Layout das Caixas de Categoria não corresponde ao Layout de Lista

No layout de lista de categorias, as subcategorias aparecem com seu bloco de cor e, se houver acesso restrito, o ícone de cadeado antes do título.

Já no layout de caixas de categorias, nem o bloco de cor nem o ícone de cadeado aparecem, mas, se um logotipo estiver definido para a subcategoria, ele será exibido (reduzido para 20px por padrão).

Isso é inconsistente. Deve haver, no mínimo, uma opção para fazer com que os títulos das subcategorias correspondam à aparência normal (lista). Idealmente, também haveria a opção de exibir o logotipo no layout de lista.

Ou até mesmo um plugin-outlet para nos permitir modificar esse comportamento ilógico (tenho procurado e não encontrei nenhum — se houver, por favor, qual é ele?)

3 curtidas

@vinothkannans você pode investigar isso, mostrar algumas capturas de tela do problema com uma correção proposta.

2 curtidas

Aqui estão algumas capturas de tela:

  1. Categorias Padrão com Tópicos em Destaque

    A propósito, os logotipos aqui estão realmente um pouco grandes, forçando muito espaço desperdiçado — prefiro reduzi-los para 75px de altura.
  2. Caixas Padrão com Subcategorias

    Note que algumas das minhas subcategorias têm imagens de logotipo definidas e elas são exibidas.
    O layout é bastante desperdiçador de espaço: o Logotipo da Categoria é restrito a 40px, mas é centralizado acima do título. Os logotipos das subcategorias não estão respeitando sua proporção (os cálculos de --aspect-image não estão funcionando e, de qualquer forma, são desnecessários; se você apenas definir uma altura, a proporção será respeitada se houver espaço.).
    Os logotipos das subcategorias também estão um pouco grandes, forçando espaço entre as linhas.
  3. Minha modificação, passo um

    O logotipo flutua à esquerda do título, que está centralizado no espaço restante.
    As subcategorias aparecem uma por linha com faixa de cor e ícone de bloqueio, mas os logotipos das subcategorias não são exibidos (o que é consistente com o padrão).
    Em uma caixa, não acho que faz sentido tentar espremer dois títulos curtos de subcategoria em uma única linha se houver espaço; fica melhor com uma linha separada para cada um, na minha opinião, mas outros podem preferi-los comprimidos se houver muitas subcategorias.
  4. Minhas modificações finais:

    Os logotipos das subcategorias são exibidos com 18px de altura e a proporção correta no final do título. Isso é opcional e eles poderiam ser posicionados entre o ícone de bloqueio e o texto, mas prefiro que as faixas e os títulos fiquem alinhados.
    Faria sentido também ter a opção de usar logotipos de subcategoria nos outros layouts padrão, mas não me preocupei com aqueles.
    Aqui estou também usando o componente Category Icons (um ícone foi definido apenas na subcategoria Niki Test), então a posição da faixa está ligeiramente deslocada para alinhar o ícone com ela, e a cor do ícone é a cor da faixa, então ele é efetivamente usado no lugar da faixa — mas essas são modificações nesse componente, não no núcleo.
  5. Finalmente, aqui está como é renderizado quando as caixas de subcategoria são mostradas acima dos tópicos da categoria pai, se configurado.

    Obviamente, no momento, não há categorias netas para mostrar, mas isso precisará ser acomodado. Também pode ser melhor flutuar o logotipo verticalmente quando houver um título muito longo — talvez seja melhor apenas manter os títulos das categorias curtos!

Então, uma mistura de HTML text/x-handlebars em /head para o tema, efetivamente substituindo “components/categories-boxes” e SCSS. Estou feliz em enviar o código para qualquer pessoa competente para testar e inseri-lo no GitHub.
Isso funciona bem para o meu site, mas pode haver outras consequências que eu não notei.

3 curtidas

Entendi, vamos esperar até que as férias terminem. Gostaria da opinião do @awesomerobot sobre isso.

5 curtidas

Eu estava planejando analisar esse layout esta semana para tentar integrar um terceiro nível de subcategorias, para que eu possa verificar a consistência ao mesmo tempo.

3 curtidas

Acabei de enviar uma atualização com alguns progressos iniciais.

Sub-subcategorias são um tanto irrelevantes para este tópico, mas são um trabalho em andamento que influenciará o estilo desta página daqui para frente… é por isso que as estou incluindo. Não estou totalmente satisfeito com essa abordagem por alguns motivos, mas é um layout complicado.

Devido à grande variação no conteúdo dessas caixas, talvez queiramos truncar as sub-subcategorias em algum momento… ou fazer alguns cálculos de altura em JS para que possamos aplicar um layout no estilo masonry, onde as caixas não tenham todas a mesma altura? Preciso pensar mais sobre isso.

Enfim, voltando ao tópico…

Para o nível único existente de subcategorias, mudei para o estilo de badge para as categorias em vez do link genérico. Também melhorei nossos cálculos de proporção de aspecto; eles não estavam sendo usados de forma alguma.

5 curtidas

Gostei; tenho alguns comentários:

Acho que o logotipo acima do título ocupa bastante espaço vertical, que é limitado devido a uma descrição muito longa e várias subcategorias.
Como uma das vantagens do layout em caixas é exibir mais categorias sem precisar rolar a página, acredito que seria muito bom ter o logotipo e o título lado a lado como padrão. Claro, é possível fazer isso quase que totalmente com sobrescritas de CSS, mas seria ótimo que isso já funcionasse corretamente por padrão.

Quanto ao problema das categorias de neto, gosto das suas subcaixas, mas uma configuração opcional possível seria mostrar apenas um nível de subcategoria com um indicador quando houver um nível adicional — talvez um “+N subcategorias” em texto pequeno abaixo do título da categoria filha, caso existam categorias de neto.

E um layout estilo masonry seria ideal…