Категории заголовков навигационной панели

:discourse2: Сводка Header Categories Navbar — это простой компонент, который добавляет в заголовок сайта меню со ссылками на родительские категории. При необходимости автоматически включается горизонтальная прокрутка.
:eyeglasses: Предпросмотр Предпросмотр в Theme Creator
:hammer_and_wrench: Репозиторий https://github.com/discourse/discourse-categories-navbar
:question: Инструкция по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Возможности

Этот компонент темы добавляет в заголовок сайта меню со ссылками на родительские категории:

Настройки

Название Описание
hide category dropdown Скрывает выпадающее меню категорий из навигации по списку тем
hide all breadcrumb nav Скрывает все хлебные крошки из навигации по списку тем
hide on topic scroll При включении навигация скрывается на десктопе, когда заголовок темы закрепляется в шапке

:discourse2: Размещены у нас? Компоненты тем доступны для использования на наших тарифах Standard, Business и Enterprise.

20 лайков

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

Я заметил две небольшие проблемы с UX, которые могли бы значительно улучшить впечатление, если их решить:

UX: Подсветка выбора категории

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

Однако это не сохраняется при переходе к теме или подкатегории.

Было бы замечательно, если бы это сохранялось в обоих случаях.

UX: Прокрутка / переполнение на мобильных устройствах

На рабочем столе при переполнении категорий видна приятная легкая тень или ненавязчивая стрелка.

На мобильных устройствах переполнение встречается гораздо чаще, но на моём устройстве (Chrome / Android) эти тонкие подсказки отсутствуют, и неясно, что возможна прокрутка.

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

6 лайков

Ещё несколько проблем с UX, в основном касающихся мобильных устройств:

Конфликт хлебных крошек темы на мобильных

На мобильных просмотрах темы навигация хлебных крошек конфликтует с панелью категорий:

Выделенная категория не в поле зрения

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

Только для настольных ПК?

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

4 лайка

Спасибо за быстрый отзыв! Я внес несколько обновлений, которые должны решить эти вопросы.

3 лайка

Отлично — я с удовольствием дам обратную связь, когда её слушают! Я заметил, что вам пришлось внести в неё довольно много дополнений.

Я восприму это как приятный маленький рождественский :gift: друг для друга :heart_eyes:.

Вы исправили это при входе в подкатегорию — прекрасно!

Однако это не применяется при входе в тему — это намеренно? Лично я считаю, что имеет смысл, чтобы категория оставалась подсвеченной, пока пользователь «находится» в ней, что включает в себя и темы, а не только виды обнаружения категорий.

Кроме того, когда я перехожу на другую страницу (например, /admin), категория остается выбранной. В этом случае было бы лучше, если бы ни одна категория не была выбрана.

Теперь я вижу затухание на мобильном, но не стрелку/уголок. Если это возможно, это было бы очень полезно, так как затухание довольно тонкое:

Desktop: image

Mobile: image

Запрос №1 — UX

Скрывать навигационную панель при прокрутке в теме. Всё становится немного перегруженным!
image

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

Запрос №2 — Функциональность

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

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

Я пока скрыл их, используя их href, но это, конечно, довольно ненадежно!

Запрос №3 — UX

Возможность сортировать категории в боковой панели по алфавиту.

Поскольку я внедряю это, я убрал родительские категории из списка категорий по умолчанию в боковой панели. Это означает, что у моих пользователей теперь есть только список из 1–5 подкатегорий, которые для них актуальны.

Однако они немного перемешаны и не имеют логического порядка, так как порядок на странице /Categories для подкатегорий не совсем имеет смысл. Было бы очень полезно, если бы эти подкатегории были отсортированы по алфавиту, чтобы помочь в этом!!

5 лайков

Цвета немного искажаются при выборе

  • стандартные светлая и тёмная палитры

Есть идеи?

3 лайка

Спасибо за сообщение! Это должно исправить проблему:

2 лайка

Работает отлично. Спасибо!

2 лайка

Привет! Прежде всего, хочу отметить, что это очень полезный компонент темы, и я хочу поблагодарить вас за проделанную работу :raised_hands:
На моём экземпляре этот компонент вызывал ошибку. Я проверил совместимость с другими плагинами и компонентами темы, но на данный момент конфликта не обнаружил. Не может ли причина быть в самом компоненте?

Включение этого компонента искажает отображение контента.
Вот видео:


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

1 лайк

@Aizada_M — Мне не удаётся воспроизвести эту проблему. У вас это происходит при предпросмотре из компонента?

2 лайка

Приветствую! Извините за длинный ответ :raised_hands:
Я не использовал предварительный просмотр, я протестировал его с включённым компонентом.

1 лайк

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

1 лайк

Я заметил, что текст в навигационной панели «Категории заголовков» внезапно изменился на font-up-1 (хотя, как мне кажется, раньше был font-down-1). Это выглядит довольно резко и неприятно, так как теперь он такой же, как у всех остальных кнопок навигации.

Я переопределил это с помощью следующего CSS, что выглядит гораздо приятнее:

// исправляет размер текста в навигационной панели заголовка
.custom-categories-navbar .nav-pills>li>a {
    font-size: var(--font-0);
}

На самом деле я предпочитаю font-0, так как он достаточно отличается и немного удобнее в использовании.

1 лайк

Основные стили CSS не изменились, и компонент не задаёт размер шрифта. :thinking:
Возможно, у вас раньше были пользовательские стили CSS?

2 лайка

4 сообщения были перенесены в новую тему: Сломанная мобильная стилизация навигационной панели категорий заголовка

Обожаю этот TC, спасибо! Было бы здорово настроить, какие элементы отображаются, а какие нет!

3 лайка

Мне это нравится, но компонент темы, похоже, сломан в последней версии Discourse.

РЕДАКТИРОВАНИЕ: всё работает отлично, но нужно было отключить иконки «чат» и «переключение тёмной/светлой темы» в заголовке.

2 лайка

У меня работает, когда чат активен :slight_smile:

3 лайка

Да, это из-за моего логотипа. Если немного уменьшить его, он будет нормально работать с чатом и переключением темы светлая/тёмная. Пока я использую:

.d-header #site-logo {
max-height: 30px;
}

2 лайка

Привет, я только что заметил баг, его можно воспроизвести следующим образом. На мобильном устройстве:

  1. Нажмите на одну из категорий в заголовке.
  2. Нажмите на любой пост в этой категории и прокрутите до конца.
  3. Нажмите на ту же категорию в заголовке.

Все заголовки категорий исчезнут. Я только что проверил это на своём форуме и на демо-версии.

РЕДАКТИРОВАНИЕ:

То же самое происходит, если зайти в категорию и обновить страницу (F5). Все категории исчезнут.

РЕДАКТИРОВАНИЕ:

Есть ли какое-то исправление для этого? Спасибо.

4 лайка