Header Submenus

[LeoDavidson]

Похоже, теперь есть ошибка, когда включён режим «Fixed» (всегда показывать меню, даже при прокрутке вниз).

Я наблюдаю это в Discourse 2.9.0.beta8, а также легко воспроизвёл на официальном сайте предпросмотра тем Discourse. Думаю, я впервые заметил это примерно две недели назад, но точно не уверен, когда это началось.

Чтобы воспроизвести:

• Включите режим «Fixed» в настройках компонента темы.
• Перейдите в тему с большим количеством ответов.
• (Если вы читаете тему впервые и находитесь в самом верху, прокрутите вниз несколько ответов, вернитесь к списку тем, затем снова откройте тему, чтобы вернуться к тому посту, на котором остановились.)

Расчёт отступа в верхней части страницы выполняется неверно, из-за чего верх поста и имя автора оказываются скрытыми под заголовком и обрезанными.

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

При входе в тему вы видите следующее:

А должно быть примерно так:

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

Редактирование CSS для увеличения отступа, добавляемого к элементу main-outlet, частично решает проблему, но тогда вверху списков тем появляется много пустого пространства. Похоже, что для списков тем и для самих тем нужны разные отступы, либо один из них добавляет отступ дважды, либо где-то ещё добавляется лишний отступ?

(Редактирование: Иногда страница не может прокрутиться достаточно высоко, чтобы увидеть проблему. Например, если вы переходите к последнему посту в теме, и он короткий, заголовок не может перекрыть имя автора, даже если прокрутить вниз насколько возможно вручную. Это может объяснять некоторые ситуации, когда всё кажется работающим. Для наиболее надёжного воспроизведения ошибки используйте окно браузера небольшой высоты.)

[Tris20 (Tristan)]

Есть ли способ предотвратить появление этого на экране входа? Я могу сделать это с помощью следующего CSS, но при этом заголовок подменю всё равно появляется на секунду, и только потом скрывается.

.static-login .top-menu {
	display: none;
}
.static-login .d-header-wrap {
	display: none;
}

Существует ли более эффективный способ предотвратить его появление на странице static-login?

[awesomerobot (Kris)]

Эта и другие темы не будут работать в режиме краулера; в режиме краулера не загружается большая часть JavaScript-кода Discourse.

[davidkingham]

Привет, Крис, этот компонент можно обновить для использования с чатом и боковой панелью. При включённом параметре fixed_mode чат и боковая панель не сдвигаются вниз и оказываются за d-header.

Ниже приведённый CSS отлично решает проблему, но он плохо сочетается с Category Banners, так как, похоже, дополнительно сдвигает #main-outlet вниз на 40 пикселей на страницах категорий. Спасибо!

.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
    margin-top: 40px !important;
}

[awesomerobot (Kris)]

Спасибо, что обратили на это внимание! Я только что добавил исправления здесь:

UX: update fixed styling for sidebar & chat (#18)

[davidkingham]

Отлично, спасибо, Крис! Есть какие-то идеи, почему #main-outlet опускается на 40 пикселей?

#main-outlet {
   padding-top: calc(1.8em + 40px);
}

[awesomerobot (Kris)]

Ах, я упустил это — это можно убрать, и оно будет удалено после слияния этого PR: UX: remove old main-outlet adjustment by awesomerobot · Pull Request #19 · discourse/discourse-header-submenus · GitHub

Обновление: теперь он слит, поэтому лишнее пространство исчезнет, если вы обновите компонент.

[P2W (Mike Riddick)]

Где можно найти названия иконок?

[awesomerobot (Kris)]

Я считаю, что всё, перечисленное здесь, доступно для использования: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Однако для некоторых иконок требуется дополнительный шаг: если иконка не используется в Discourse по умолчанию, её название нужно добавить в настройку темы Svg icons.

Если вам нужна полная точность, все иконки, используемые в Discourse по умолчанию, перечислены здесь: discourse/lib/svg_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub

А все иконки, доступные для использования в темах (через настройку svg icons), находятся в этой директории: discourse/vendor/assets/svg-icons at main · discourse/discourse · GitHub

Просмотр SVG-файлов на GitHub не особенно полезен, так как вы увидите просто большой белый квадрат:

Но вы можете нажать кнопку «Raw» и просмотреть исходный код страницы: название иконки — это id элемента symbol.

[P2W (Mike Riddick)]

Ты супер, большое спасибо

[davidkingham]

Спасибо, Крис, это исправило проблему. Однако я заметил ещё пару других моментов. .topic-navigation нужно сдвинуть вниз на 40 пикселей, а .topic-post.sticky-avatar .topic-avatar рассчитывается неверно при прокрутке вниз, в результате чего элемент оказывается позади d-header. Кроме того, можно растянуть окно композитора и чата слишком высоко, из-за чего элементы управления также скроются за d-header. Думаю, это всё!

Редактирование: ещё один момент — при переходе по якорной ссылке заголовок оказывается под шапкой.

[satonotdead]

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

Отлично, что при наведении на логотип можно перейти в блог, документацию или вики!

[alxndr (Alexander)]

Кстати, «настройка темы SVG-икон», упомянутая Крисом, в данный момент находится в разделе Администрирование > Настройки > Другое > в нижней части есть «подмножество SVG-икон» (…надеюсь, это правильно??)

[davidkingham]

В новом лайтбоксе Glimmer возникла небольшая проблема с z-index: значение 1001 просто размещает элемент поверх лайтбокса, так как сам лайтбокс имеет z-index 1000.

[awesomerobot (Kris)]

Классическая проблема с z-index, она будет исправлена при следующем обновлении Discourse

UX: increase experimental lightbox z-index (#22865)

[clement]

Спасибо за этот отличный плагин.

Интересует, можно ли скрыть подменю заголовка, если пользователь не авторизован?

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

Прошу прощения, если вопрос кажется простым…

Спасибо,
К.

[Kieran_Berryman]

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

[Kieran_Berryman]

Ладно, я как-то решил свою проблему, просто собрав все самые важные ссылки в подменю и разместив их в «Навигационном» верхнем заголовке на мобильных устройствах.