Влияние позиционирования компонентов в версии 2.5.0.beta6

Поддержка
1

Это не критичная проблема, но я решил предупредить, что если вы используете кастомное позиционирование в своих темах, последнее обновление может негативно сказаться на работе вашего сайта.

Похоже, что последнее обновление сломало код от @smrtey или @pacharanero, предназначенный для отображения Discourse в широкоэкранном режиме:

Навигационная панель (внутри тем) в основном находится в правильном (широкоэкранном) положении. Однако при прокрутке вверх она по умолчанию возвращается к нормальному положению, а затем снова переключается обратно.

Также это непреднамеренно негативно повлияло на тему «Большой заголовок — Маленький заголовок» (от @Taylor_Troxtel):

В моём случае это привело к тому, что баннер перекрыл кнопки в верхней части (Категории, Последние, Новые).

Я пока убрал их со своего сайта, но хотел предупредить других перед обновлением.

2

Наш заголовок теперь использует position: sticky в CSS, поэтому возможно, что эти темы были затронуты этим изменением. Versatile Banner и Discourse Category Banners были обновлены для исправления проблем, если вы ищете отправную точку.

3

Спасибо @Alec, что обратили на это внимание. Недавно я заметил некоторые странности после версии 2.5.0.beta6, связанные с отступами под заголовками, на некоторых экземплярах Discourse, которые я управляю. Там я сделал панель заголовка выше, чтобы она лучше соответствовала дизайну сайта, и добавил отступы, чтобы немного опустить #main-outlet. После версии 2.5.0.beta6 эти дополнительные отступы больше не требовались.

Я изучу, что нужно обновить для исправления этой проблемы, когда у меня будет время. У меня есть два экземпляра, использующих этот TC: один выглядит немного странно, а другой — нормально. И, конечно, приветствуются PR с исправлением, если у кого-то есть время.

Спасибо @justin за подсказку по исправлению.

4

Это не повлияло на широкоформатный режим на моём сайте, где задействовано множество других элементов, не входящих в компонент, на который вы ссылаетесь. Однако это сломало мою настройку для настольного вида, чтобы он корректно отображался на мобильных экранах и позволял пользователям просматривать встроенные ответы/ответы на мобильных устройствах. По какой-то причине position: sticky перестал работать при ширине < 768px. Не знаю, почему sticky не сработал, поэтому в итоге я решил использовать:

@media (max-width: 767px) {
   .d-header-wrap {
      position: fixed;
      top: 0;
      width: 100%;
   }
   #main-outlet {
       margin-top: 48px;
   }
}
5

Привет :wave:. Просто хочу сообщить, что я должен внедрить исправление для этого компонента чуть позже сегодня!

Редактирование: Я только что выкатил обновление для компонента. Пожалуйста, обновите его через вашу панель администратора.