Компонент темы подменю в шапке выталкивает нижнюю часть боковой панели за пределы экрана

Внести вклад UX
1

Когда активен компонент темы подменю в заголовке, иконки в нижней части боковой панели исчезают с экрана.

https://cdn.screencast.com/uploads/g000302MBEXFEjy4eyPzZN1QY9lUH/LWR_Recording.mp4?sv=2021-08-06&st=2023-05-18T04%3A17%3A29Z&se=2023-05-19T04%3A17%3A29Z&sr=b&sp=r&sig=7%2B95Shu88XVl4t3jX%2BP9p8cxStR%2B2WKs4CSyK%2FzvaZc%3D

Возможно, где-то неверно рассчитываются стили CSS?

4 лайка
2

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

Используемое нами вычисление для боковой панели и чата учитывает высоту заголовка Discourse и устанавливает переменную --header-offset при расчёте некоторых высот.

Включение пользовательских заголовков может быть немного сложным, потому что контент пользовательского заголовка по умолчанию не закрепляется при прокрутке, как это делает заголовок Discourse… поэтому, если мы включим его в расчёт по умолчанию, то после прокрутки, когда пользовательский заголовок исчезнет, высота станет неверной.

Например, если я вручную увеличу --header-offset на высоту моего пользовательского заголовка (по умолчанию она составляет примерно 60 пикселей), то при прокрутке над боковой панелью появится зазор:

Мы добавляем класс .docked к body, когда пользовательский заголовок прокручивается за пределы видимости, поэтому можно использовать это… что лучше, но заметен переход, когда высота боковой панели меняется между состояниями… это происходит потому, что .docked либо включён, либо выключен.

Если вам нужен закреплённый заголовок, это немного проще обойти… потому что вы можете увеличить --header-offset на высоту пользовательского заголовка, а затем установить значение top для .d-header-wrap равным высоте пользовательского заголовка:

Одно из решений, которое приходит в голову для улучшения случая с незакреплённым заголовком, это:

  1. Проверить высоту пользовательского заголовка.
  2. Включить высоту пользовательского заголовка в --header-offset.
  3. Уменьшить высоту пользовательского заголовка, используемую в расчёте --header-offset, в зависимости от позиции прокрутки. Это позволит более плавно корректировать высоту боковой панели способом, который не может обеспечить класс .docked.

Может потребоваться некоторое экспериментирование, чтобы всё получилось правильно…

5 лайков
3

Это очень полезно, спасибо @awesomerobot

(переместил это в ux)

4 лайка
4

Это было реализовано здесь (большое спасибо @david):

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

4 лайка
The component pushes down the chat, hiding partially the chat input