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

Dev
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?

3 curtidas
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 curtidas
4

A bit late :smile: but maybe someone else needs it. I must mention that:

  • Not all the CSS code is required, especially the borders and the background colors for table rows, so feel free to adjust them as you like.
  • I had to change the layout from the regular table into flex cause you can’t have negative margins on table rows and other layout issues, and well…is more flexible :smile:
  • Replace Category Group 1 and Category Group 2 with your desired category group names
  • In my example I’ve used the category ID’s 2 and 4, so using chrome dev tools to inspect ( see pic below), find the right category id and replace [data-category-id="2"] and [data-category-id="4"] in my example with your id(s).

image
image829×290 17.9 KB

Paste this inside the Common tab:

.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);
}

Paste this inside the Desktop tab:

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

And this inside the Mobile tab:

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;
}

And this is how it looks on desktop and mobile resolutions:

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

10 curtidas
5

Hi Cos
]very interesting; thank you for sharing. in the same spirit (that of obtaining a better presentation, we are trying to put, in front of discourse, a wordpress page with a specific presentation and we would like to "send on this page, category names, for example those which have received a response , those chosen by the user, or then a determinate category; do you think this is possible and if so how?

1 curtida
6

I’m afraid you can’t do that just by CSS. Maybe the WordPress Discourse plugin is what you need. In addition to this, the wp discourse shortcodes is also a must.
We are already using it on our WordPress website and it works great so far. This is how the plugin looks in the sidebar widget:

image
image454×664 52.5 KB

2 curtidas
7

@sam, @cosdesign’s response works. is there any way to bake this into core’s menus so users can leave it off by default, but then set the headers in the admin panel for group header titles, and in each category’s attributes page, select from a dropdown of the enabled section headers from the admin panel so the category just falls under the header.

This shouldn’t be terribly difficult to add to the platform and would really improve large multi user role and group, multi category installations

1 curtida
9

Este tipo de agrupamento agora é suportado no core do Discourse:

Escolha “Subcategorias com Tópicos em Destaque” como o ‘estilo da página de categoria para desktop’:

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

E então sua página de categorias ficará parecida com isto:

image
image2440×1758 306 KB

5 curtidas
10

É possível com RTL?? Tentei mas falhei :broken_heart:

11

Isso faz sentido. Os estilos CSS principais do Discourse são invertidos para criar uma versão RTL aqui: discourse/lib/stylesheet/compiler.rb at main · discourse/discourse · GitHub. Não acho que os arquivos CSS adicionados por temas sejam compilados para criar uma versão RTL. Se isso estiver correto, isso explicaria os problemas que você encontrou com temas quando um layout RTL é usado.

Você poderia confirmar isso adicionando algumas regras CSS que contenham uma direção ao tema do seu site, depois visite o site com uma localidade RTL e veja se a direção foi invertida. Acho que não será invertida.

Por exemplo, se você adicionar isso ao seu tema:

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

Não acho que será convertido para isto:

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

Concordo com você, ainda estou confuso em usar o código acima :confused:

Alguma sugestão?

13

Você conhece algum exemplo de tema que não funcione com RTL? Se sim, poste um link para o tema aqui e eu testarei minha teoria e explicarei o que está dando errado após o teste.

Editar: Aqui está uma explicação do problema:

Para os arquivos CSS que estão na base de código principal do Discourse, o CSS RTL é criado “invertendo” a maioria das regras CSS que dependem da direção do layout do site. Por exemplo, padding-left é invertido para padding-right. Isso é feito com a gema RTLcss: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

O problema é que os temas do Discourse não têm suas regras CSS invertidas. Isso significa que, se um tema tiver regras CSS que especificam uma direção, a direção será a mesma quando um idioma RTL for usado como quando um idioma LTR é usado. Aqui está um pequeno exemplo disso:

Quando o tema é usado com uma interface RTL, padding-left: 8px; não está sendo invertido para padding-right: 8px;. Isso causa um pequeno problema de alinhamento. Tenho certeza de que existem exemplos de problemas maiores que ocorrem quando temas são usados com um idioma RTL.

O mesmo vale para qualquer CSS que você adicione a um tema padrão do Discourse no editor de temas. Aqui está um exemplo usando o código deste tópico: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Aqui está uma regra desse CSS que define uma direção:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // isso precisa ser alterado
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Com uma localidade RTL, este é o problema:

image
image863×676 57.5 KB

Se essa regra estivesse em um arquivo CSS principal do Discourse, left: 0; seria automaticamente convertido para right: 0; quando um idioma RTL fosse selecionado. Como o CSS é adicionado a um tema, você precisa editá-lo manualmente para:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // alterado para a posição correta para layouts RTL
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

image
image829×674 57.1 KB

O Discourse adiciona uma classe rtl à tag html quando um layout RTL é usado. Os desenvolvedores de temas poderiam usar essa classe para fazer seus temas funcionarem tanto para layouts LTR quanto RTL. Isso funciona, e eu acho que está correto, mas possivelmente a declaração left: auto não precisa estar lá.

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);
}
/* Corrige o posicionamento para layouts rtl */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

Não tenho certeza se os desenvolvedores devem adotar essa abordagem com seus temas. É demorado e pode levar a erros e problemas de manutenção. Talvez o Discourse pudesse compilar alguns temas e considerar fornecer uma versão RTL. Pode valer a pena testar essa abordagem com alguns deles:

require "rtlcss"

Rtlcss.flip_css("theme_css")

Isso deveria ser uma resposta curta :slight_smile: Se o que escrevi estiver correto e não tiver sido tratado em outro tópico, talvez deva ser movido para um novo tópico.

14

Estes Theme component podem fazer o que você deseja. Ou ser uma boa base para olhar o código e ter ideias.

“Modern Category + Group boxes” como usado no Air Theme funciona bem.

Screenshot_20240302-030928
Screenshot_20240302-0309281080×2400 122 KB