F NAV - Вкладки мобильной навигации

[MihirR (Mihir)]

@MihirR

body.f-nav-hidden .d-header-wrap {
animation: none !important;
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important; // убедиться, что он остаётся поверх других элементов
}

После нового обновления это больше не работает. @Don, ты внёс какие-то соответствующие изменения или что-то ещё?

[Don]

@MihirR

Вы внесли какие-либо существенные изменения?

Привет Нет, я так не думаю. Последнее изменение было 2 месяца назад. Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub

[MihirR (Mihir)]

Да, всё снова заработало. Проблема была вызвана другими компонентами темы.

[Don]

Привет Хм, мне не удалось воспроизвести это… какое устройство и браузер вы используете?

[clacle]

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

Edge на ПК

Приложение Discourse Hub на iPhone

Safari на iPhone

Edge на Android

[clacle]

@Don

Хм, я не могу воспроизвести это… Какое устройство и браузер вы используете?

Я использовал следующий CSS для корректировки позиции, и это работает довольно хорошо.

/* Используйте Flexbox для центрирования chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Убедитесь, что контейнер имеет контекст позиционирования */
}

/* Убедитесь, что стили элемента с номером не мешают центрированию */
.chat-channel-unread-indicator__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[David_Ghost]

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

[jrgong]

@Don, вы принимаете PR? Я добавил функцию для открытия модального меню, куда можно добавлять дополнительные элементы.

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

Смотрите: GitHub - jrgong420/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub

[jrgong]

Быстрое обновление о моём форке «F-NAV для мобильных устройств» с кнопкой «Назад», пользовательским подменю и элементами управления видимостью. Лучше всего работает с версией 3.6beta1.

Зачем этот форк?

• Добавлена кнопка «Назад» в заголовке на страницах тем, повторяющая распространённый UX мобильных приложений.
• Предложен тип вкладки «customMenu», открывающий настраиваемое подменю (идеально для ссылок на несколько целей; мы используем его для добавления пользовательских ссылок «Новая тема» с предустановленными данными).
• Добавлена групповая видимость для вкладок и элементов меню, чтобы можно было показывать определённые элементы только сотрудникам и т. д.
• Небольшие исправления, связанные с устареванием и улучшением стилей/доступности.

Краткое описание новых функций

• Иконка «Назад» в заголовке (опционально)
  • Заменяет логотип «Домой» в заголовке на стрелку «Назад» на страницах тем.
  • Поведение: переход назад, если есть история, иначе — перенаправление на «/».
  • Управление через настройку: header_back_icon_enabled.
• Тип вкладки «Custom Submenu» (пользовательское подменю)
  • Новая функция f_nav_tabs: customMenu.
  • Новая настройка: f_nav_submenu_items.
    • Настройка элементов меню с меткой и URL (опционально иконка).
    • Отлично подходит для быстрого доступа к нескольким страницам из одной вкладки.
• Элементы управления видимостью на основе групп
  • Вкладки, элементы подменю и profile_extra_items можно ограничить выбранными группами.
  • Поведение:
    • Пустые группы => видны всем.
    • Если группы заданы => видят только члены хотя бы одной выбранной группы.
    • Анонимные пользователи не видят ограниченные элементы.
• Опционально: скрытие панели навигации на страницах тем
  • Управление через настройку: hide_nav_in_topic.
• Артефакты сборки в архиве и документация по тестированию
  • Удобные артефакты сборки (v1–v5) в папке builds/.
  • Файлы TESTING_GUIDE.md и TEST_RESULTS.md с документацией по ручной валидации.

Улучшения существующих функций

• Элементы и вкладки F-NAV
  • Добавлен видимый getter visibleTabs для учёта групповой видимости.
  • Интеграция нового компонента CustomSubmenu в поток FNavItem.
• Меню профиля/аватара в заголовке
  • Определение мобильного вида перемещено внутрь компонента, что улучшило поведение и устранило предупреждения.
  • Дополнительные элементы профиля теперь поддерживают групповую видимость.
• Стилизация и доступность
  • Новый SCSS для пользовательского подменю и иконки «Назад».
  • Последовательные состояния наведения/активности/focus-visible.
  • Последовательный border-radius с использованием переменных ядра; улучшенные отступы (например, отступ кнопки «Назад» установлен в 0).

Исправления ошибок и поддержка

• Устранены предупреждения об устаревании site.mobileView путём переноса проверок из инициализаторов в рендеринг компонентов.
• Исправлен случайный сбой рендеринга путём вынесения функции из блока.
• Небольшие доработки для соответствия поведению заголовка Discourse (состояния наведения/активности, переходы непрозрачности).
• Небольшие правки CSS (например, убедиться, что отступ кнопки «Назад» равен нулю, предотвратить случайные изменения размеров).

---

Сравнение высокого уровня (Оригинал vs Форк)

• Оригинал (main): Мобильные вкладки F-NAV + опциональный импорт чата; нет кнопки «Назад» или пользовательского подменю.
• Форк (feat/home-logo-arrow-back):
  • Добавлена функция иконки «Назад» в заголовке с резервным маршрутизированием.
  • Введена функция вкладки «customMenu» с настраиваемыми элементами подменю.
  • Добавлена групповая видимость для вкладок, элементов подменю и элементов профиля.
  • Опциональное скрытие F-NAV на страницах тем.
  • Улучшена доступность (a11y) и согласованность состояний взаимодействия.
  • Предоставлена документация по тестированию и упакованные сборки.

Примечания:

• Этот компонент предназначен для последних версий Discourse, поддерживающих уровень API плагинов Discourse 1.14+ (как указано в инициализаторах).
• Если вы используете групповую видимость, сначала убедитесь, что группы и членство в них настроены.

---

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

Спасибо Дон за этот отличный компонент — это прекрасное дополнение к UX/UI Discourse!

[nicolsdennis]

Привет! Похоже, ваш CSS скрывает текущего пользователя по умолчанию, даже если в настройках не включена соответствующая опция. То есть правило CSS display: none прописано жестко. Было бы здорово, если бы это можно было изменить.

Касательно кастомного меню, которое вы создали: есть ли способ настроить цвет его элементов?

[joo (slower)]

@joo

При использовании темы Horizon один из компонентов в списке тем вызывает появление пустой области в верхней части (область логотипа/элементов) при прокрутке.

Проблема с белым пространством в верхней части снова появилась на мобильных устройствах. Я обновил всё, но это всё ещё происходит.

[gilles]

После последнего обновления Discourse компонент f-nav вызывает падение Discourse на Android.

[Don]

Привет

Спасибо за отчёт! Я объединил обновление, которое исправляет проблемы, с которыми вы столкнулись в последней версии Discourse. Пожалуйста, обновите компонент темы!

FIX: Compatibility with latest Discourse (#8)

[joo (slower)]

@joo

@joo

При использовании темы Horizon один из компонентов в списке тем вызывает появление пустой области в верхней части (область логотипа/элементов) при прокрутке.

При использовании мобильного устройства проблема с пустой областью в верхней части снова возникает. Я обновил всё, но проблема сохраняется.

 body.f-nav-hidden .d-header-wrap {
    animation: none !important;
    opacity: 1 !important;
    z-index: 1000 !important;
  }