Editorial - insert contact module

Support Themes & Styling
1

There is such code, I want to integrate it into the theme Editorial beautifully and correctly.
I will be grateful for any advice. Demo - lower right corner +

<div class="contact-button">
    <div class="icon phone">
        <a href="tel:+77777777777"><i class="fa fa-phone"></i></a>
    </div>
    <div class="icon whatsapp">
        <a href="https://wa.me/77777777777" target="_blank"><i class="fab fa-whatsapp"></i></a>
    </div>
    <div class="main-button">
        <i class="fa fa-plus"></i>
    </div>
</div>

<script>
document.querySelector('.main-button').addEventListener('click', function() {
    document.querySelectorAll('.contact-button .icon').forEach(function(icon) {
        icon.style.display = icon.style.display === 'block' ? 'none' : 'block';
    });
});
</script>


<style>
.contact-button {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
}

.contact-button .icon {
    display: none;
    position: absolute;
    bottom: 58px;
    right: 0;
    width: 44px;
    height: 44px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 44px;
    color: #007bff;
    font-size: 30px;
    transition: all 0.3s;
}

.contact-button .icon.phone {
    bottom: 120px;
}

.contact-button .main-button {
    width: 44px;
    height: 44px;
    background-color: #fe3000;
    border-radius: 50%;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 21px;
    cursor: pointer;
}

.contact-button .main-button:hover + .icon,
.contact-button .main-button:hover + .icon + .icon {
    display: block;
}
</style>
2

Hi.
You can propose your code in a pull request in the Editorial theme repository, explaining what you want to achieve with it.

However, if you try to add some code to the Editorial theme, it is better to keep it separate, i.e. the styles in a styles file (preferably specific to these buttons, and in scss format), inside the assets/scss/components folder. The javascript code, integrated inside main.js and a partial template, which contains the logic of the buttons, loading through the theme blueprint, the buttons to be displayed and their links (see social.htm.twig and blueprints.yaml).

3

Eh, I’m still learning. Alas, I don’t know how to do it. GitHub is still complicated for me

4

I’ll put it on the list of new features for the theme for now. Right now I’m working on some personal projects that take up a lot of my time.

1 Like
5

You are just Batman and my idol :star_struck: