Улучшенный компонент отображения категорийных блоков

[oca]

discourse-theme-category-homepage

Я много работал над новой главной страницей category-box для форума моего сообщества. Она довольно специфична для наших нужд и может быть не полезна многим, но кто-то может почерпнуть из неё идеи.

После/До

Наш конкретный случай использования

У нас есть сообщество, которое занимается множеством широких тем. Мы объединяем местные НПО, у которых есть свои члены, и у нас есть автономные группы, каждая из которых выполняет одну или несколько действий, которые нужно рекламировать, и им также нужно приватное пространство для обсуждения этих действий.

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

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

Организация тем

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

Каждая НПО и локальная группа делает свои объявления в публичной подкатегории наиболее очевидно связанной категории верхнего уровня и тихо работает в приватной подкатегории.

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

Функции

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

Установка

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

Установите компонент как обычно. Как установить тему или компонент темы?
Репозиторий: https://framagit.org/oca/discourse-theme-category-homepage.git

Дорожная карта будущих улучшений

Исправить огромное количество ошибок CSS.
Исправить проблему, которая заставляет отображать разделители/заголовки для подкатегорий, даже если нет публичных или приватных подкатегорий.
Сделать красивую страницу категории с отображением коробок подкатегорий и тем.
Обновить всё, как только команда Discourse решит, что под-под-категории могут стать реальностью (я знаю, давайте надеяться…)

Я открыт для предложений новых функций, но добавлю их в этот компонент только если они служат моему очень специфичному случаю использования или очень просты в реализации. Любая новая функция будет переключаться.

[HAWK]

@oca

Может, кто-нибудь добавит режим вики, чтобы я мог при необходимости обновлять первое сообщение и добавлять тег theme-component?

Без проблем, сделано.

[torstensson (Per Torstensson)]

Спасибо большое за создание этого замечательного компонента, он просто супер!

Один вопрос: можно ли активировать его с настройкой категории «Блоки с избранными темами»? Если нет, то возможно ли реализовать эту функцию, или вы видите какие-либо проблемы с этим?

Всего наилучшего, и ещё раз огромное спасибо за создание этого!

[oca]

@torstensson

Один вопрос: возможно ли активировать это с настройкой категории «Коробки с избранными темами»? Если нет, то является ли это функцией, которую можно реализовать, или вы видите какие-либо проблемы с этим?

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

[torstensson (Per Torstensson)]

Всё полностью понятно.

Для меня ключевой функцией вашего компонента является добавление значка статуса уведомлений для каждой подкатегории, а также простой, но мощный способ изменения ширины столбцов. В моём случае, если бы эти функции были доступны при включённом параметре «Блоки с популярными темами», это идеально подошло бы моим потребностям.

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

Всего наилучшего.

[oca]

У меня были трудности с этим (ссылка), но в итоге это оказалось не так сложно.

В компоненте темы измените ваш хендбл-компонент, добавив следующий код:

{{#each categories as |c|}}
  
  ...какой-то код перед колокольчиком...

  {{category-notifications-button
    value=c.notification_level
    onChange=(action "changeCategoryNotificationLevel" c)
  }}

  ...какой-то код после колокольчика...

{{/each}}

Если вы не знаете, как это сделать, руководство от Johani — отличное место для начала.

И если вы узнаете, как сделать то же самое с тегами, пожалуйста, сообщите мне! Я не могу найти способ это сделать.

[pmusaraj (Penar Musaraj)]

@oca Я недавно внес изменения в ядро, из-за которых компиляция SCSS этого компонента темы не удаётся. Исправление довольно простое: нужно удалить из стиля следующие две строки:

@import "common/foundation/variables";
@import "theme_variables";

(Вторая строка вызывает ошибку компиляции SCSS, так как этот файл больше не существует. Однако обе строки избыточны, поскольку переменные ядра и темы теперь внедряются до компиляции любого SCSS-файла.)

[oca]

Спасибо за разъяснения.

Это удалено.

[Fma965]

Отличная работа! Не работает ли это на мобильных устройствах?

CyanLabs Official Community

Мобильная версия

Настольная версия

[Fma965]

Хотелось бы понять, как заставить это работать на мобильных устройствах. На компьютере это выглядит круто, но если на телефоне этим невозможно пользоваться, то это бессмысленно. Уверен, есть какой-то простой способ, но я не знаю какой. У кого-нибудь есть предложения?

[Fma965]

Извините за множественные посты.

Мне удалось заставить работать Categories Layout Override только для мобильных устройств.

Затем, используя мою модифицированную версию GitHub - cyanlabs/discourse-categories-layout-override · GitHub,

я теперь могу указывать переопределение как categories_boxes

что принудительно включает мобильный вид в требуемый вид для работы этого плагина.

Планшет

Мобильный

Очевидно, это не идеальное решение, но оно работает, так что пока кто-нибудь не предложит лучшее, вот обходной путь

[hoangphuctran93 (Hoàng Phúc Trần)]

Спасибо за настройку компонента темы «Переопределение макета категорий». Однако не могли бы вы поделиться настройками компонента темы «Улучшенное отображение блока категорий»? Я посетил ваш сайт и оценил использование вами свойства «background-color» для класса «category-logo».

[hoangphuctran93 (Hoàng Phúc Trần)]

Спасибо за недавние кастомизации, однако после недавнего обновления до версии 3.2.0.beta 4-dev компонент темы перестал работать. Также надеюсь, что кастомизация отображения на мобильных устройствах будет интегрирована в ядро Discourse, так как я хочу получить синхронный опыт работы с десктопа на мобильные устройства.

[Fma965]

К сожалению, не знаю, как это исправить.

[hoangphuctran93 (Hoàng Phúc Trần)]

Недавно при обновлении до последней версии компонент темы «discourse theme category homepage» перестал работать на мобильных устройствах, и я постоянно получаю следующее сообщение:

Это мой сайт Categories - Business Lab

[david (David Taylor)]

Привет, @hoangphuctran93! Я переместил ваш пост в соответствующую тему компонента темы (cc @oca)

[stephtara (Stephanie Booth)]

О, это звучит как что-то, что мне будет очень полезно! Активное сообщество поддержки с широким спектром тем, но люди, вероятно, останутся в маленьком уголке огромного сада; цифровая грамотность у многих довольно низкая. Жаль, что всё, кажется, сломано, но я всё равно попробую. @oca, вы до сих пор активно используете это у себя?

[hellekin]

Будьте осторожны с тегом broken — он действительно сломает всё.

@stephtara

люди, которые, вероятно, останутся в небольшом сюжете огромного сада; цифровая грамотность у многих довольно низкая

Я бы рекомендовал по умолчанию отключить уведомления для всех категорий и подготовить темы с тегом #welcome, чтобы дать обзор доступных категорий. Когда вы назначаете группу для наблюдения за категорией, вы можете создать постепенный опыт: пользователи могут присоединяться к группам, чтобы включить уведомления или открыть для себя новые категории. С помощью всего нескольких приветственных тем вы можете ознакомить читателей с тем, что доступно, и дать им возможность выбрать, где они хотят участвовать. Также важно документировать уведомления, чтобы избежать информационной перегрузки.

[stephtara (Stephanie Booth)]

@hellekin

Будьте осторожны с тегом broken, он обязательно сломает.

Спасибо за предупреждение, наверное, лучше держаться от него подальше…

@hellekin

Документирование уведомлений также важно, чтобы избежать информационной перегрузки.

Конечно!

[hellekin]

Вы можете попробовать установить компонент темы… но не на вашей продакшн-системе