Мне очень нравится эта идея! Я с радостью проверю и приму PR, реализующий эту функцию 
11 лайков
Мне очень нравится эта идея 
Поэтому я немного поэкспериментировал с этим. Думаю, есть гораздо лучший способ реализации, но пока это работает на моём сайте вполне неплохо. 
Я использую компонент Big Header - Little Header, вставляя его код в секцию <head> шаблона.
К сожалению, на iPhone есть ограничение: нижняя навигация полностью перекрывает панель вкладок Discourse. Поэтому я её скрываю.
Я обновил этот код!
Теперь просто делюсь им здесь (не уверен, что его можно будет объединить):
Разместите это в секции <head> для мобильных устройств:
<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
var lastScrollTop = 0;
var body = $("body");
var scrollMax = 30;
$(window).scroll(function() {
var scroll = $(this).scrollTop();
if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
body.addClass("tab-bar-hidden");
} else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
body.removeClass("tab-bar-hidden");
}
lastScrollTop = scroll;
});
});
</script>
Разместите это в секции CSS для мобильных устройств:
html:not(.anon) {
#topic-progress-wrapper,
#reply-control.draft {
bottom: 49px;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .1s ease-out;
}
.posts-filtered-notice {
transition: all .1s ease-out;
bottom: 49px;
}
}
body.tab-bar-hidden {
.d-tab-bar {
bottom: -49px;
transition: all .2s ease-in;
}
#topic-progress-wrapper:not(.docked),
#reply-control.draft {
bottom: 0;
transition: all .2s ease-in;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .2s ease-in;
}
.posts-filtered-notice {
transition: all .2s ease-in;
bottom: 0;
}
}
.d-tab-bar {
transition: all .1s ease-out;
}
body:not(.footer-nav-ipad) .footer-nav {
display: none;
}
Демо
17 лайков
Какая классная штука у тебя получилась!
5 лайков
Удобный маленький компонент — спасибо!
Может ли каждый пользователь настроить его или полностью скрыть?
5 лайков
Отлично, @Don, спасибо! Я только что отправил ваш код (с небольшими правками) в компонент.
Встроенной возможности для индивидуальных пользователей настроить или скрыть компонент нет, но в ядре Discourse есть обходной путь, который можно использовать, чтобы позволить пользователям скрывать этот компонент: вы можете создать вариант вашей основной темы без этого компонента, а затем сделать этот вариант доступным для выбора пользователями в разделе Настройки → Интерфейс.
Вот как это будет выглядеть:
Пользователи, которые не хотят видеть этот компонент, могут выбрать вариант Grey Amber (w/o Tab Bar), который настроен точно так же, как Grey Amber, но компонент панели вкладок в нём отсутствует.
6 лайков
Отличная идея! Спасибо!
4 лайка
Спасибо @Osama, это потрясающе!
Я заметил одну проблему в CSS. Панель вкладок Discourse может активироваться и поднимать редактор.
Думаю, она должна активироваться только при #reply-control.draft, а не для всего #reply-control.
4 лайка
Отлично, теперь должно быть исправлено. Спасибо, что сообщили! 
6 лайков
Просто хотел сказать большое спасибо за это — отличное дополнение для любого сайта на Discourse. @discoverearth, вам удалось сделать так, чтобы это отображалось постоянно для всех пользователей?
5 лайков
Я пытаюсь настроить это для переключения вкладок, пока пользователь перемещается по платформе. В данном случае я хочу создать кнопки, которые открывают вкладки для плагинов Канбан, Календарь и Голосование.
Канбан:
Если я нахожусь в категории или подкатегории и добавляю ‘?board=default’ к URL, происходит переход на вкладку Канбан (Доска), так что это возможно. Проблема в том, что этот плагин использует относительный путь от корня, а не от текущего пути пользователя.
(мне также придется придумать обходной путь для главной страницы, так как логика URL там отличается).
Календарь:
Для вкладки Календарь нужно добавить ‘/l/calendar’ в конец URL.
Это выглядит возможным, но также необходимо удалять любой текст в URL, который находится выше текущей категории или подкатегории пользователя. Например, если пользователь перешел на ‘latest’ или ‘kanban’, эту часть URL нужно удалить перед добавлением ‘/l/calendar’ в конец.
У кого-нибудь есть идеи, как это реализовать? Было бы здорово иметь возможность использовать это с этими плагинами. На мобильных устройствах селектор вкладок сейчас фактически скрыт, что плохо для сайтов, которые активно используют такие компоненты, как Канбан или Календарь.
1 лайк
Этот плагин — отличная работа, но его нельзя использовать с DiscourseHub (по крайней мере, на iPhone), так как он скрывает вкладку навигации в том же месте. Из-за этого невозможно переключиться между форумами.
Поэтому он полезен только для форумов, которые каким-то образом не поддерживают DiscourseHub или сильно ухудшают пользовательский опыт, заставляя полностью закрывать приложение после посещения форума 
Конечно, кто-то, кто умеет программировать, может показывать эту панель вкладок только при использовании браузера… но учить пользователя разным интерфейсам на одном устройстве — очень плохая идея.
С этим компонентом:
А в чистом DiscourseHub:
3 лайка
Ты знаешь, какой это форум? Я просто в восторге от интерфейса!
3 лайка
Я бы хотел, чтобы кнопка уведомлений имела красный индикатор непрочитанных уведомлений, как у кнопки в верхнем меню в версии по умолчанию. Не могли бы вы подсказать, как это сделать? Я не очень хорошо разбираюсь в программировании.
@nildarar, вам удалось отобразить количество уведомлений на кнопке? Спасибо.
1 лайк
Привет! Мне очень нравится эта концепция. Спасибо.
Один вопрос: я бы предпочёл использовать контурные версии иконок FontAwesome вместо закрашенных, чтобы это было более согласовано с другими разделами моего сайта.
Есть ли способ это указать? Обычно использование полного имени иконки — например, far fa-star (вместо просто star) — позволяло бы сделать это различие. Но всякий раз, когда я пытаюсь вставить полное имя иконки таким образом, компонент вообще ничего не отображает на его месте.
Есть ли способ заставить это работать?
1 лайк
Это выглядит действительно круто. Есть ли способ создать вкладку для отображения ленты подписок? Тогда пользователь сможет легко видеть ленту всех людей, на которых он подписан.
Также возможно ли сделать это для конкретной страницы
.user-main .about {
margin-bottom: 0;
color: var(--secondary);
display: none;
}
Только для страницы ленты?
1 лайк
Просто для уточнения: вы имеете в виду ленту подписок с Discourse Follow? Если да, то установите feed как маршрут (третий сегмент) в настройках вкладки, которую вы хотите перенаправить на ленту подписок.
4 лайка
Да, я. Спасибо!
3 лайка
Думаю, было бы здорово добавить кнопку «Новая тема» прямо в центре панели. 
Отличный пример — Reddit.
6 лайков
Конечно. Попробуйте один из следующих вариантов в настройках 3-й или 4-й вкладки, чтобы получить средний эффект:
New, plus, /new-topic
6 лайков
