Can it be done with CSS? Grouping categories on category page

Разработка
1

What I’d like to do (as I know there’s no baked in setting or feature set) is use CSS to group categories on the home page.

I’m not looking to nest categories, but just group some together and possibly put a header on them. I know the individual categories can be “separated” with padding, and I know each category can be targeted by category ID or category name. So what I’m hoping is to be able to replicate something that looks like this:

image

I realize for simplicity, the categories would have to be in their sorted order, and each category targeted by catediry_id, but I’m thinking that there’s possibly some CSS that can throw padding after one category or before another.

The big question is there the ability to insert some text in the padding to create a header?

The propose of this is to first break up the long category list view, but separate: example

  • category 1-2 under “staff” header

  • Category 3-4 under “community resources)

  • categories 5,8,11,12,13 “under general discussion categories”

I don’t want to make these sub categories, I like the structure and category system just as it is. All I want to do is display the categories a little differently on the categories view page. Ideally this is just a visual layout, NOTHING to change with the library structure of the platform.

Any idea how to make this happen?

This would be kind of a game changer for my work collaboration site’s layout.

Sam, codinghorror, do you think there would be a way to create a grouping step in the category reorganization menu that could do this natively, say as an option (grouping on/off).just put the categories in order within main page grouping and it could automatically separare them. In core, plugin or a theme component?

2

anyone? buehler.

feedback appreciated

3

This kind of stuff is possible in a theme component but extremely complicated. I think you would need to override templates which makes this also pretty fragile.

4

Чуть с опозданием :smile:, но, возможно, это кому-то пригодится. Хочу отметить следующее:

  • Не весь CSS-код обязателен, особенно границы и фоновые цвета для строк таблицы, так что не стесняйтесь настраивать их по своему вкусу.
  • Мне пришлось изменить макет с обычной таблицы на flex, так как для строк таблицы нельзя использовать отрицательные отступы, да и возникают другие проблемы с макетом. К тому же… это более гибко :smile:
  • Замените Category Group 1 и Category Group 2 на названия ваших групп категорий.
  • В моём примере использованы ID категорий 2 и 4. Чтобы найти нужный ID категории, используйте инструменты разработчика в Chrome (см. скриншот ниже), а затем замените [data-category-id="2"] и [data-category-id="4"] в моём примере на ваши ID.

image
image829×290 17.9 KB

Вставьте это во вкладку Common:

.category-list{
    display: flex;
    flex-direction: column;
}
.category-list thead tr{
    display: flex;
}
.category-list .topics {
    width: 95px;
    margin-left: auto;
    min-width: 95px;
    white-space: nowrap;
}
.category-list tbody tr {
    background-color: var(--primary-very-low);
    box-sizing: border-box;
    display: flex;
}
body .category-list [data-category-id="2"],body .category-list [data-category-id="4"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="2"]::before {
    content: "Category Group 1";
}
body [data-category-id="4"]::before {
    content: "Category Group 2";
}
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Вставьте это во вкладку Desktop:

.category-list tbody tr {
    margin-bottom: 15px;
    border: 1px solid var(--primary-low);
}

А это — во вкладку Mobile:

body .category-list-item.category .posts {
    width: auto;
    margin-left: auto;
}
body .category-list-item>footer,body .subcategory-list-item>footer{
    background-color: var(--primary-very-low);
}
.categories-list .category-list th {
    padding: 0;
}
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: right;
}
.category-list-item>footer .category-stat:first-child, .subcategory-list-item>footer .category-stat:first-child{
    margin-right: 0;
}
body .category-list-item.category tr:first-of-type{
    padding: 10px 0;
    border-bottom: 1px solid var(--primary-low);
}
body tr.category-topic-link:last-of-type{
    border-bottom: 1px solid var(--primary-low);
}
body .categories-list .category-list th {
    padding: 0;
}
body .category-list-item {
    border-top: none;
    margin-bottom: 10px;
}
body .category-list-item {
    padding: 0;
    border: 1px solid var(--primary-low)!important;
}
.category-list-item>footer, .subcategory-list-item>footer {
    border-top: none;
}

А вот так это выглядит на разрешениях для настольных компьютеров и мобильных устройств:

desktop-category-group
desktop-category-group659×837 73.3 KB
mobile-category-group
mobile-category-group453×1061 52.3 KB

5

Привет, Кос!

Очень интересно, спасибо, что поделился. В том же духе (стремление к лучшему представлению) мы пытаемся разместить перед дискурсом страницу WordPress с определённым оформлением. Хотим «отправлять» на эту страницу названия категорий, например те, которые получили ответ, выбранные пользователем, или же определённую категорию. Как ты думаешь, это возможно и если да, то как это сделать?

6

Боюсь, что сделать это только с помощью CSS не получится. Возможно, вам подойдет плагин WordPress Discourse. Кроме того, обязательно установите короткие коды wp discourse.
Мы уже используем его на нашем сайте WordPress, и пока всё работает отлично. Вот как выглядит плагин в виджете боковой панели:

image
image454×664 52.5 KB

7

@sam, ответ от @cosdesign работает. Есть ли способ встроить это в меню ядра, чтобы пользователи могли отключать это по умолчанию, но затем настраивать заголовки в панели администратора для заголовков групп, а на странице атрибутов каждой категории выбирать из выпадающего списка включённые заголовки секций из панели администратора, чтобы категория просто попадала под этот заголовок.

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

9

Такой вид группировки теперь поддерживается в ядре Discourse:

Выберите «Подкатегории с избранными темами» в качестве «стиля страницы категорий для рабочего стола»:

Screenshot 2022-03-07 at 10.25.34
Screenshot 2022-03-07 at 10.25.341346×654 53.9 KB

После этого ваша страница категорий будет выглядеть примерно так:

image
image2440×1758 306 KB

10

Возможно ли сделать это с поддержкой RTL?
Я пробовал, но у меня не получилось :broken_heart:

11

Это логично. Основные стили Discourse переворачиваются для создания версии с правой на левую сторону (RTL) здесь: discourse/lib/stylesheet/compiler.rb at main · discourse/discourse · GitHub. Я не думаю, что CSS-файлы, добавляемые темами, компилируются для создания версии RTL. Если это так, то это объясняет проблемы, с которыми вы столкнулись при использовании тем с макетом RTL.

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

Например, если вы добавите это в свою тему:

.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: right;
}

Я не думаю, что оно будет преобразовано в это:

.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: left;
}
12

Я согласен с вами, но всё ещё боюсь, что запутался в использовании вышеуказанного кода :confused:

Есть какие-нибудь предложения?

13

Вы знаете пример темы, которая не работает с RTL? Если да, опубликуйте ссылку на тему здесь, и я проверю свою теорию, а затем объясню, что идёт не так после тестирования.

Редактирование: Вот объяснение проблемы:

Для CSS-файлов, входящих в основную кодовую базу Discourse, RTL-CSS создаётся путём «отражения» большинства правил CSS, зависящих от направления макета сайта. Например, padding-left преобразуется в padding-right. Это делается с помощью гема RTLcss: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby · GitHub.

Проблема заключается в том, что правила CSS тем Discourse не отражаются. Это означает, что если тема содержит правила CSS, задающие направление, это направление останется неизменным как при использовании RTL-языка, так и при использовании LTR-языка. Вот небольшой пример этого:

Когда тема используется с RTL-интерфейсом, padding-left: 8px; не преобразуется в padding-right: 8px;. Это вызывает небольшую проблему с выравниванием. Я уверен, что существуют примеры более серьёзных проблем, возникающих при использовании тем с RTL-языками.

То же самое относится к любому CSS, который вы добавляете в тему Discourse по умолчанию через редактор тем. Вот пример с использованием кода из этой темы: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Вот правило из этого CSS, задающее направление:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // это нужно изменить
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Для RTL-локализации возникает следующая проблема:

image
image863×676 57.5 KB

Если бы это правило находилось в основном CSS-файле Discourse, left: 0; автоматически преобразовалось бы в right: 0; при выборе RTL-языка. Поскольку CSS добавляется в тему, вам нужно вручную изменить его следующим образом:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // изменено на правильное положение для RTL-макетов
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

image
image829×674 57.1 KB

Discourse добавляет класс rtl к тегу html, когда используется RTL-макет. Разработчики тем могли бы использовать этот класс, чтобы их темы работали как для LTR, так и для RTL-макетов. Это работает, и я думаю, что это правильно, но возможно, объявление left: auto не обязательно.

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}
/* Исправление позиционирования для RTL-макетов */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

Я не уверен, следует ли разработчикам использовать этот подход для своих тем. Это отнимает много времени и может привести к ошибкам и проблемам с обслуживанием. Возможно, Discourse могла бы компилировать некоторые темы или рассмотреть возможность предоставления версии для RTL. Возможно, стоит протестировать этот подход на нескольких из них:

require "rtlcss"

Rtlcss.flip_css("theme_css")

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

14

Эти #theme-component могут сделать то, что вам нужно. Или послужить хорошей основой для изучения кода и получения идей.

«Современные блоки категорий и групп», используемые в теме Air, работают отлично.

Screenshot_20240302-030928
Screenshot_20240302-0309281080×2400 122 KB