XF 2.0 Мигающий оффлайн статус

Jdatiko · 3 Дек 2020

Сделал онлайн статус

.message-avatar-wrapper .message-avatar-online {
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 2px solid;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
border-radius: 50%;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217)
}

И скрин. Хочу сделать точно такое же, но допустим, чтоб мигало красным, когда пользователь находится не в сети. Буду благодарен за помощь.

azmg · 3 Дек 2020

/admin.php?template-modifications/add&type=public
Шаблон message_macros
Найти

HTML:

                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                    <span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
                </xf:if>

заменить

HTML:

$0
                <xf:if is="!$user.isOnline()">
                    <span class="message-avatar-offline"></span>
                </xf:if>

в extra.less

CSS:

.message-avatar-wrapper .message-avatar-offline:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: unset;
    width: .969em;
    text-align: center;
    line-height: 1;
    font-weight: bold;
    color: red;
    background: #f5f5f5;
    border: #f5f5f5 solid 2px;
    border-radius: 50%;
    display: inline-block;
}
.message-avatar-wrapper {
    .message-avatar-offline {
        position: absolute;
        bottom: 2px;
        right: 2px;
        top: unset;
        left: unset;
        border: 4px solid red;
        border-radius: 50%;
        animation-name: pulse;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
    }
}
@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
}

Jdatiko · 3 Дек 2020

azmg написал(а):

/admin.php?template-modifications/add&type=public
Шаблон message_macros
Найти

HTML:

                <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                    <span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>

заменить

Код:

$0
<xf:else />
                    <span class="message-avatar-offline" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>

в extra.less

CSS:

.message-avatar-wrapper .message-avatar-offline {
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 2px solid;
border-color: red;
border-radius: 50%;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217)
}

А дальше все как в мануале Мигающая онлайн точка

Ой, совсем забыл:

CSS:

.message-avatar-wrapper .message-avatar-offline:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f2bd";
    width: .969em;
    text-align: center;
    line-height: 1;
    font-weight: bold;
    color: red;
    background: #f5f5f5;
    border: #f5f5f5 solid 2px;
    border-radius: 50%;
    display: inline-block;
}

в message_macros не хочет вставляться. Выдает ошибку с else

Вот

Atikin · 3 Дек 2020

Jdatiko, Вам вроде сказали модификацию создать, зачем шаблон правите?

Jdatiko · 3 Дек 2020

Atikin написал(а):
Jdatiko, Вам вроде сказали модификацию создать, зачем шаблон правите?

теперь пытаюсь понять, как это сделать :D

Atikin · 3 Дек 2020

Jdatiko, перейти по ссылке на первой строке того сообщения?

Jdatiko · 3 Дек 2020

Atikin написал(а):
Jdatiko, перейти по ссылке на первой строке того сообщения?

ключ модификации - просто уникальное свое название для этой модификации, чтоб не забыть?

Atikin · 3 Дек 2020

Jdatiko, да.

Jdatiko · 3 Дек 2020

Atikin написал(а):
Jdatiko, да.

шаблон сработал, но анимация не работает, которую я хочу (описана в первом посте).

Ну либо не так сделал. Модификацию создал, там все прописал, как написал мне человек. Но мне пишет, что он на задействована почему-то.

Skaiman · 3 Дек 2020

Истязание движка

Hope · 3 Дек 2020

Jdatiko, почему Вы так много пишите? Одно сообщение за другим... Тормозните немного.

Skaiman · 3 Дек 2020

Jdatiko написал(а):
шаблон сработал, но анимация не работает, которую я хочу (описана в первом посте).

так здесь ни кто ее и не давал

Jdatiko · 3 Дек 2020

Hope написал(а):
Jdatiko, почему Вы так много пишите? Одно сообщение за другим... Тормозните немного.

извиняюсь.

Skaiman написал(а):
так здесь ни кто ее и не давал

Так человек дал касательно оффлайн статуса, потому что онлайн у меня сделан. Но сделав модификацию под оффлайн статус и по тому же примеру кода - не работает.

azmg · 4 Дек 2020

Исправил сообщение XF 2.0 - Мигающий оффлайн статус
Теперь работает.

Jdatiko · 4 Дек 2020

azmg написал(а):
Исправил сообщение XF 2.0 - Мигающий оффлайн статус
Теперь работает.

у меня почему-то не работает. Заменил в extra файле все, что вы исправили, модификацию также заменил, но она вроде не работает, если я правильно понял.

Skaiman · 5 Дек 2020

Можно все сделать намного проще без модификации шаблона message_macros

Less:

.message-avatar {
    &.message-avatar--online {
        .avatar {
            box-shadow: 0 0 0 rgba(0,128,0,.8);
            animation: pulse 2s infinite;
            &:hover {
                animation: none;
            }
        }
        .message-avatar-online {
            display: none;
        }
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0,128,0,.8);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0,128,0,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0,128,0,0);
    }
}

Да, еще, название анимации должно быть уникальным, к примеру я назвал pulse, но это простое название и может быть код с анимацией с таким же названием, тогда обе не будут работать

Jdatiko · 5 Дек 2020

Skaiman написал(а):
Можно все сделать намного проще без модификации шаблона message_macros

Less:

.message-avatar { &.message-avatar--online { .avatar { box-shadow: 0 0 0 rgba(0,128,0,.8); animation: pulse 2s infinite; &:hover { animation: none; } } .message-avatar-online { display: none; } } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,128,0,.8); } 70% { box-shadow: 0 0 0 10px rgba(0,128,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,128,0,0); } }

Да, еще, название анимации должно быть уникальным, к примеру я назвал pulse, но это простое название и может быть код с анимацией с таким же названием, тогда обе не будут работать

.message-avatar-wrapper .message-avatar-online {
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 2px solid;
border-left-color: #7CFC00;
border-top-color: #7CFC00;
border-right-color: #7CFC00;
border-bottom-color: #7CFC00;
border-radius: 50%;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217)
}

.message-avatar-wrapper .message-avatar-offline:before {
font-family: 'Font Awesome 5 Pro';
font-size: inherit;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: unset;
width: .969em;
text-align: center;
line-height: 1;
font-weight: bold;
color: red;
background: #f5f5f5;
border: #f5f5f5 solid 2px;
border-radius: 50%;
display: inline-block;
}
.message-avatar-wrapper {
.message-avatar-offline {
position: absolute;
bottom: 2px;
right: 2px;
top: unset;
left: unset;
border: 4px solid red;
border-radius: 50%;
animation-name: pulse;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
}
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.5;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.5;
}
}

У меня вот такой код. На статус онлайн он немного иной и отлично работает сам по себе с пульсацией. Для статус оффлайн - он даже статично не появляется (я про круг на аватаре). пытался скрестить, но никак. Потому что, если можно текстом выводить статус онлайн/оффлайн пользователя, то можно это и анимировано сделать, как статус онлайн мигающей точкой.

Skaiman · 5 Дек 2020

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

XF 2.0 Мигающий оффлайн статус

Jdatiko

Вложения

azmg

Jdatiko

Вложения

Atikin

Король шутов

Jdatiko

Atikin

Король шутов

Jdatiko

Atikin

Король шутов

Jdatiko

Вложения

Skaiman

Hope

Skaiman

Jdatiko

azmg

Jdatiko

Вложения

Skaiman

Jdatiko

Skaiman

Похожие темы

Мы ценим вашу конфиденциальность