XF 2.2 Баннер группы пользователя

[R0mz1k]

Подскажите, встречал-ли кто-нибудь готовый вариант отображения вертикального свернутого баннера группы пользователей, который разворачивается в момент наведения мышью на иконку баннера ?

Если готового решения нет, может-ли кто-нибудь реализовать подобное за денежное вознаграждение ?

 

[25517]

R0mz1k, это чисто набросок, также не учитывается адаптивность.

Добавить в extra.less

.message-userBanner
{
    width: 30px;
    cursor: pointer;
    .m-transition();
   
    position: relative;
    margin-left: -15px;
   
    &:hover
    {
        width: unset;
        & > strong
        {
            font-size: unset;
        }
    }
   
    & > strong
    {
        font-size: 0;
        &:after
        {
            .m-faBase();
            float: right;
            font-size: 12px !important;
        }
    }
   
    & > span:first-child
    {
        width: 5px;
        height: 3px;
       
        bottom: -2px;
        position: absolute;
       
        background-color: inherit;
    }
   
    & > .userBanner-before
    {
        left: 0;
        border-bottom-left-radius: 2px;
    }
   
    // Icons
    &.userBanner--staff
    {
        & > strong:after
        {
            .m-faContent('\f7f3');
        }
    }
   
    &.userBanner--red
    {
        & > strong:after
        {
            .m-faContent('\f6a5');
        }
    }
   
    &.userBanner--green
    {
        & > strong:after
        {
            .m-faContent('\f505');
        }
    }
}

При наведении.

---

Если надо перенести повыше, то надо будет создать модификацию шаблонов.
admin.php?template-modifications/add&type=public

Шаблон: message_macros
Ключ и описание придумываете сами.
Найти: <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
Заменить:

<div class="userBannerGroup">
    $0
</div>

Потом добавить в extra.less следующий код.

.userBannerGroup
{
    top: 30px;
    position: absolute;
    width: @xf-messageUserBlockWidth - (@xf-messagePadding * 2);
}

И результат при наведении.

 

[R0mz1k]

Все хорошо работает!

А можно скорректировать скорость сворачивая и разворачивая (сделать ее более плавной) ?

 

[R0mz1k]

Если это:

& > span:first-child
    {
        width: 5px;
        height: 3px;
      
        bottom: -2px;
        position: absolute;
      
        background-color: inherit;
   }

Заменить на это:

& > span:first-child
    {
        content: "";
        border-top: 3px solid #000;
        border-left: 4px solid transparent;
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 0;
    }

То, визуально будет выглядеть более привлекательно.