En la disposición de lista de categorías, las subcategorías aparecen con su mancha de color y, si el acceso está restringido, con el icono de candado antes del título.
En la disposición de cuadros de categorías, ni la mancha de color ni el icono de candado aparecen, pero si se define un logotipo para la subcategoría, este se muestra (reducido a 20 px de forma predeterminada).
Esto es inconsistente. Debería haber al menos una opción para que coincida con la apariencia normal (lista) de los títulos de las subcategorías. Idealmente, también debería haber la opción de mostrar el logotipo en la disposición de lista.
O incluso un plugin-outlet para permitirnos modificar este comportamiento ilógico (lo he estado buscando y no puedo encontrarlo; si existe, ¿cuál es?)
Nota que algunas de mis subcategorías tienen imágenes de logotipos configuradas y se muestran.
El diseño desperdicia bastante espacio: el logotipo de la categoría está limitado a 40px, pero se centra sobre el título. Los logotipos de las subcategorías no respetan su relación de aspecto (los cálculos de --aspect-image no funcionan y, de todos modos, son innecesarios; si simplemente estableces una altura, la relación de aspecto se respetará si hay espacio).
Los logotipos de las subcategorías también son un poco grandes, lo que fuerza espacio entre las líneas.
El logotipo flota a la izquierda del título, que está centrado en el espacio restante.
Las subcategorías aparecen una por línea con una franja de color y un icono de candado, pero los logotipos de las subcategorías no se muestran (lo cual es consistente con la configuración predeterminada).
En un cuadro, no creo que tenga sentido intentar comprimir dos títulos cortos de subcategorías en una sola línea si hay espacio; me parece mejor tener una línea separada para cada una, aunque otros podrían preferir agruparlos si hay muchas subcategorías.
Los logotipos de las subcategorías se muestran con 18px de altura y la relación de aspecto correcta al final del título. Esto es opcional y podrían colocarse entre el icono de candado y el texto, pero prefiero que las franjas y los títulos queden alineados.
También tendría sentido tener la opción de usar logotipos de subcategorías en otros diseños predeterminados, pero no me he molestado en implementarlo allí.
Aquí también estoy utilizando el componente Category Icons (solo se ha configurado un icono en la subcategoría Niki Test), por lo que la posición de la franja se desplaza ligeramente para alinear el icono con ella, y el color del icono coincide con el de la franja, por lo que efectivamente se usa en lugar de la franja; pero esos son ajustes a ese componente, no al núcleo.
Finalmente, así es como se renderiza cuando se muestran los cuadros de subcategorías arriba de los temas de la categoría principal, si esa opción está activada.
Obviamente, en este momento no hay categorías de nietos que mostrar, pero eso deberá tenerse en cuenta. Además, podría ser mejor flotar el logotipo verticalmente cuando el título sea muy largo; aunque quizás sea mejor simplemente mantener los títulos de las categorías cortos.
En resumen, es una mezcla de HTML text/x-handlebars en /head para el tema, que efectivamente reemplaza “components/categories-boxes”, junto con SCSS. Estoy encantado de enviar el código a cualquier persona competente que pueda probarlo y subirlo a GitHub.
Esto funciona bien para mi sitio, pero podría haber otras consecuencias que no he detectado.
Tenía pensado revisar este diseño esta semana para intentar integrar un tercer nivel de subcategorías, así puedo verificar la consistencia mientras lo hago.
Acabo de subir una actualización con algunos avances iniciales.
Las sub-sub categorías son algo irrelevantes para este tema, pero son un trabajo en progreso que influirá en el estilo de esta página de aquí en adelante… por eso las estoy incluyendo. No estoy completamente satisfecho con este enfoque por varias razones, pero es una maquetación complicada.
Debido a lo mucho que puede variar el contenido de estas cajas, quizás en algún momento debamos truncar las sub-sub categorías… o realizar algunos cálculos de altura con JS para aplicar un diseño de tipo masonry donde las cajas no tengan todas la misma altura. Necesito pensarlo un poco más.
Para el único nivel existente de subcategorías, cambié al estilo de insignia para las categorías en lugar del enlace genérico. También mejoré nuestros cálculos de relación de aspecto; en realidad no se estaban utilizando en absoluto.
Creo que el logotipo encima del título ocupa bastante espacio vertical, algo que es escaso con una descripción muy larga y varias subcategorías.
Dado que una de las ventajas del diseño en cuadros es mostrar más categorías sin necesidad de desplazarse, creo que sería muy bueno que, por defecto, el logotipo y el título aparecieran uno al lado del otro. Por supuesto, se podría lograr esto con sobrescrituras de CSS, pero sería agradable que funcionara así por defecto.
En cuanto al problema de las subcategorías de tercer nivel, me gustan tus subcuadros, pero una opción configurable podría ser mostrar solo un nivel de subcategoría e indicar cuándo existe otro nivel más profundo: tal vez un “+N subcategorías” en texto pequeño debajo del título de la subcategoría si hay subcategorías de tercer nivel.
