Visualização apenas de categorias reformulada em duas colunas

[loginerror (Maciej Kuźmicz)]

Continuando a discussão de Como estilizar a página /categories?:

Tenho uma pergunta relacionada a uma discussão mais antiga.

Quão simples é conseguir isso:

O mais próximo que cheguei foi isso:

Aplicando column-count: 2 ao DIV que envolve a tabela e display: block aos elementos da tabela.

Mas não tenho certeza de como forçar o cabeçalho a ocupar toda a linha

EDIT.
Acabei de perceber que, funcionalmente, eu teria que duplicar essa linha de cabeçalho, deixar apenas “Categorias” ou simplesmente ocultá-la toda…

[awesomerobot (Kris)]

Acho que pode ser mais fácil se você definir tbody com display: block e column-count: 2. Assim, o thead ainda ocupará a largura total.

Mas, nesse ponto, você vai querer ocultar tudo, exceto “Categoria”, de qualquer forma.

[Canapin (Coin-coin le Canapin)]

Alternativa com flexbox:

.category-list tbody {
    display: flex;
    flex-wrap: wrap;
}
.category-list tbody tr {
    width: 50%;
    display: flex;
}
.category-list tbody .category {
    flex: 1;
}

Ainda há alguns ajustes a fazer.

[loginerror (Maciej Kuźmicz)]

@Canapin

Alternativa com flexbox:

No meio disso, esqueci que seria bom se mantivessem o alinhamento horizontal.
Isso é fantástico

[Canapin (Coin-coin le Canapin)]

Observe que, com este CSS, as categorias não serão listadas assim:

1 - 4
2 - 5
3 - 6

Mas sim assim:

1 - 2
3 - 4
5 - 6

Além disso, você precisa adicionar uma media query para alterar o estilo em telas pequenas.

[loginerror (Maciej Kuźmicz)]

Testei um pouco ambas as opções e parece que dividir a tabela de categorias ao meio, em vez de fazê-lo sequencialmente, é melhor para o nosso propósito.

No entanto, é complicado controlar onde a divisão deve ocorrer.

Consegui realizar isso no meu navegador:

Mas apenas quando coloquei artificialmente as categorias à esquerda dentro de uma div (para evitar que a divisão ocorresse muito cedo; caso contrário, a categoria raiz “Measure” iria para a coluna da direita):

Existe alguma maneira de “empacotar” as linhas com IDs de categoria específicos dentro da DIV, talvez por meio da API do tema?

[Canapin (Coin-coin le Canapin)]

O que você está pedindo parece complicado e pode exigir algum truque com JavaScript.
Com a propriedade CSS column, tenho certeza de que as categorias não ficarão alinhadas horizontalmente (a menos que você defina uma altura fixa), como acontece com o flexbox, e não fica muito bonito.

Consegui o que você quer, mas é um pouco hacky:

Usei meu CSS anterior, depois adicionei um <tr> vazio (o que acredito que possa ser feito com uma única linha de JS) e defini a propriedade order para alterar a ordem das divs. Este último pode ser feito apenas via CSS, mirando cada valor HTML data-category-id. Eis o resultado:

Aqui está o <tr> vazio:

Observe que provavelmente terá que alterar o CSS e/ou o JS toda vez que adicionar ou remover uma categoria.

edição: se precisar apenas de um ou dois elementos vazios adicionais, não é necessário usar JS para adicionar um <tr>; você também pode usar um :after e/ou :before assim:

.category-list tbody:after {
    width: 1px;
    content: "";
}

Isso adiciona um elemento vazio de 1px que funciona da mesma forma.

[loginerror (Maciej Kuźmicz)]

Obrigado, funcionou bem Não nos importamos de ter que gerenciar as categorias em detalhes, então está tudo bem.
O resultado final pode ser visto no nosso Fórum.

[Canapin (Coin-coin le Canapin)]

Você pode compartilhar a URL do seu fórum?

[loginerror (Maciej Kuźmicz)]

@Canapin

URL do fórum

Claro, está no meu perfil e eu não queria fazer propaganda direta

UiPath Community Forum