Липкие аватары для мобильных устройств

Привет :wave: Этот компонент темы активирует закрепленные аватары на мобильных устройствах.

Я повторно использовал основную функцию закрепленных аватаров, чтобы сделать её доступной на мобильных устройствах.
Весь раздел (аватар темы + мета-данные темы) закрепляется в верхней части экрана. Это работает, если высота сообщения превышает высоту экрана или при прокрутке вверх в длинных сообщениях. Я отключил закрепление аватара в коротких сообщениях при прокрутке вверх, чтобы функция активировалась только для длинных сообщений на мобильных устройствах.

Я отключил эту функцию в личных сообщениях с помощью переопределения CSS.

Поскольку в закрепленном разделе я установил цвет фона var(--secondary), я перенёс подсветку сообщения темы с .topic-post на .topic-post .contents, чтобы подсвечивался только раздел ниже аватара и мета-данных. :arrow_down_small:

В этом сообщении подсвечивается только раздел с содержимым.

13 лайков

Отличная работа, @Don!

Как можно добавить тень под фиксированную рамку аватара?
(Что-то вроде этого: box-shadow: 0 -10px 30px 8px #CCCCCC;)

Было бы здорово, если бы в компоненте темы появилась возможность добавить лёгкую тень, где администратор мог бы просто ввести HEX-код, размытие, распространение и так далее. Но, наверное, это не стоит ваших усилий.

На данный момент, какой будет правильный CSS-переопределение, чтобы добавить тень именно там, где нужно?

Когда я пытался применить стиль к topic-meta-data, тень появлялась вокруг всего элемента, а не только снизу, и при этом она не включала topic-avatar.

Буду очень признателен за любые советы! :folded_hands:

Кроме того, я получаю сообщение об ошибке с этим компонентом темы (см. ниже). Этот компонент больше не поддерживается?

[Уведомление администратора] Тема «Sticky Avatars for Mobile» содержит код, требующий обновления. (id: discourse.widgets-decommissioned) (узнать больше)

1 лайк

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

2 лайка

Кроме того, фиксированная панель имеет тенденцию мигать при прокрутке.

Если компонент не поддерживается, он должен иметь тег unmaintained :slight_smile:

3 лайка