Pode ser feito com CSS? Agrupando categorias na página de categorias

Dev
1

O que eu gostaria de fazer (e sei que não há uma configuração ou conjunto de recursos nativo para isso) é usar CSS para agrupar categorias na página inicial.

Não estou procurando aninhar categorias, mas apenas agrupar algumas delas e, possivelmente, adicionar um cabeçalho. Sei que as categorias individuais podem ser “separadas” com padding, e sei que cada categoria pode ser selecionada pelo ID ou pelo nome da categoria. Então, o que espero é conseguir replicar algo que se pareça com isso:

image
image480×480 81.3 KB

Percebo que, para simplificar, as categorias precisariam estar em sua ordem de classificação, e cada categoria seria selecionada pelo category_id, mas estou pensando que talvez haja algum CSS que possa adicionar padding após uma categoria ou antes de outra.

A grande questão é: há a capacidade de inserir algum texto no padding para criar um cabeçalho?

O objetivo disso é, primeiramente, quebrar a visualização longa da lista de categorias e separar: exemplo

  • Categorias 1–2 sob o cabeçalho “staff”
  • Categorias 3–4 sob “recursos da comunidade”
  • Categorias 5, 8, 11, 12, 13 sob “categorias de discussão geral”

Não quero transformar essas categorias em subcategorias; gosto da estrutura e do sistema de categorias exatamente como estão. Tudo o que quero fazer é exibir as categorias de forma um pouco diferente na página de visualização de categorias. Idealmente, isso seria apenas um layout visual, NADA que altere a estrutura de biblioteca da plataforma.

Alguma ideia de como fazer isso acontecer?

Isso seria uma espécie de mudança de jogo para o layout do meu site de colaboração.

Sam, codinghorror, você acha que haveria uma maneira de criar uma etapa de agrupamento no menu de reorganização de categorias que pudesse fazer isso nativamente, digamos, como uma opção (agrupamento ligado/desligado)? Basta colocar as categorias em ordem dentro do agrupamento da página principal, e elas poderiam ser separadas automaticamente. Isso seria feito no núcleo, em um plugin ou em um componente de tema?

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

Um pouco atrasado :smile:, mas talvez alguém mais precise disso. Devo mencionar que:

  • Nem todo o código CSS é necessário, especialmente as bordas e as cores de fundo das linhas da tabela, então sinta-se à vontade para ajustá-las como preferir.
  • Tive que mudar o layout da tabela regular para flex, pois não é possível usar margens negativas em linhas de tabela e há outros problemas de layout, e bem… é mais flexível :smile:
  • Substitua Category Group 1 e Category Group 2 pelos nomes desejados dos seus grupos de categoria.
  • No meu exemplo, usei os IDs das categorias 2 e 4. Então, usando as ferramentas de desenvolvedor do Chrome para inspecionar (veja a imagem abaixo), encontre o ID correto da categoria e substitua [data-category-id="2"] e [data-category-id="4"] no meu exemplo pelo(s) seu(s) ID(s).

image
image829×290 17.9 KB

Cole isso dentro da aba 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);
}

Cole isso dentro da aba Desktop:

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

E isso dentro da aba 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;
}

E é assim que fica nas resoluções de desktop e mobile:

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

5

Olá, Cos.

Muito interessante; obrigado por compartilhar. No mesmo espírito (o de obter uma apresentação melhor), estamos tentando colocar, na frente do discurso, uma página do WordPress com uma apresentação específica e gostaríamos de “enviar” para essa página nomes de categorias, por exemplo, aquelas que receberam uma resposta, aquelas escolhidas pelo usuário ou então uma categoria determinada. Você acha que isso é possível e, se sim, como fazer?

6

Temo que você não possa fazer isso apenas com CSS. Talvez o plugin WordPress Discourse seja o que você precisa. Além disso, os shortcodes do wp discourse também são essenciais.
Já estamos usando no nosso site WordPress e até agora funciona muito bem. É assim que o plugin aparece no widget da barra lateral:

image
image454×664 52.5 KB

7

@sam, a resposta do @cosdesign funciona. Existe alguma maneira de integrar isso aos menus do núcleo, para que os usuários possam desativá-lo por padrão, mas depois definir os cabeçalhos no painel administrativo para títulos de cabeçalho de grupo e, na página de atributos de cada categoria, selecionar, em um menu suspenso, os cabeçalhos de seção ativados no painel administrativo, de modo que a categoria fique simplesmente sob o cabeçalho.

Isso não deveria ser muito difícil de adicionar à plataforma e realmente melhoraria instalações grandes com múltiplos papéis de usuário e grupos, e múltiplas categorias.

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

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