🔥 Разберите мой компонент темы: Карточки продвинутых тем

[jrgong]

Привет, ребята!

Отказ от ответственности: При создании этого компонента темы ни один ИИ не пострадал

Да, ребята, я признаю, что бесстыдно скопировал компонент темы Topic Cards. Огромное спасибо оригинальным авторам и участникам за отличную работу!

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

Advanced Topic Cards — предварительный релиз

Благодаря нашей переписке вы получаете:

• более детальный контроль над местом отображения карточек тем;
• два разных макета карточек тем;
• слайдер с карточками избранных тем в верхней части страницы «Последние».

Полный список подробностей — ниже

Не стесняйтесь тестировать, запускать, копировать и критиковать его в этой теме! Я очень жду ваших отзывов о результате:

GitHub - jrgong420/advanced-topic-cards

Известные проблемы:

• Избыточные настройки TC: некоторые функции, касающиеся миниатюр и высоты карточек, больше не актуальны/не имеют значения;
• В настольной версии отсутствует горизонтальная прокрутка с помощью тачпада или колёсика мыши (Embla предоставляет для этого плагин, но мы ещё не успели его добавить);
• Кнопки действий недостаточно «отполированы», требуется более качественная визуальная доработка.

Сводка улучшений и функций:

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

  • Пример макета сетки: Samen-Verzeichnis - Forum | Cannabisanbauen.net
  • Пример макета карточки: Growreports - Forum | Cannabisanbauen.net

• Наследование макета подкатегории
  Опционально наследуйте макет карточек из родительской категории, чтобы не настраивать каждую подкатегорию вручную.

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

  • Пример: forum.cannabisanbauen.net (главная страница)

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

  • Пример: Growreports - Forum | Cannabisanbauen.net

• Возможности визуальной кастомизации

  • Заглушки для миниатюр (иконка Font Awesome), если у темы нет изображения

  • Предустановки радиуса скругления границ карточки

  • Выбор размера шрифта заголовка карточки (с использованием токенов шрифтов Discourse)

  • Опциональные фиксированные высоты карточек/сетки и управление размером миниатюр

• Богатый набор компонентов карточки
  Новая структура карточки с:

  • Подписью (аватар автора темы + имя пользователя + опциональная дата публикации)

  • Кнопками действий (Детали + CTA для избранной ссылки)

  • Встроенными тегами (бейдж категории + теги внутри тела карточки)

• Совместимость с другими компонентами тем/плагинами:

  • Плагин «Календарь + События»: отображение даты события после заголовка
  • Компонент темы «Портфолио пользователя»: отображение

• Запланированные функции:

  • Более детальный контроль для слайдера избранных тем: дополнительные точки подключения плагинов, маршруты страниц и т. д.
  • Разворачивание/сворачивание слайдера карточек избранных тем (+ автоматическое разворачивание на основе новых/непрочитанных тем)

[denvergeeks]

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

[RGJ (Richard - Communiteq)]

Очень здорово!! Отличная работа

Замечания:

• Не работает на маршрутах обнаружения, не относящихся к категориям, таких как /latest или выбор тегов без категории.

• Изображения не всегда хорошо выровнены

даже когда изображений нет

• Карусель ОЧЕНЬ хорошая, но разве она не должна быть отдельным компонентом?

• Было бы здорово иметь возможность исключить темы без изображения из карусели.

[jrgong]

Спасибо за обратную связь!

@RGJ

• Изображения не всегда хорошо выравниваются

Изображения действительно выглядят странно, то же самое касается обрезки текста анонса темы.

Не будет ли лучше с точки зрения UX/UI добавить отступы вокруг изображений в макете списка?

@RGJ

• Карусель ОЧЕНЬ хорошая, но не должна ли она быть отдельным компонентом?

Это справедливое замечание. Хотя моя цель заключалась в том, чтобы по сути использовать одни и те же стили CSS для карусели и обычных карточек тем.

@RGJ

• Было бы здорово иметь возможность исключить из карусели темы без изображения.