Ecco alcune schermate:
- Categorie predefinite con argomenti in evidenza
A proposito, i loghi qui sono davvero un po’ grandi, costringendo a uno spreco di spazio: preferirei ridurli a un’altezza di 75px. - Box predefiniti con sottocategorie
Notate che alcune delle mie sottocategorie hanno immagini logo impostate e vengono mostrate.
Il layout spreca molto spazio: il logo della categoria è limitato a 40px, ma è centrato sopra il titolo. I loghi delle sottocategorie non rispettano il loro rapporto d’aspetto (i calcoli --aspect-image non funzionano e sono comunque inutili; se impostate semplicemente un’altezza, il rapporto d’aspetto verrà rispettato se c’è spazio).
I loghi delle sottocategorie sono anche un po’ grandi, costringendo a spazi tra le righe. - La mia modifica, primo passo
Il logo galleggia a sinistra del titolo, che è centrato nello spazio rimanente.
Le sottocategorie sono una per riga con striscia colorata e icona di blocco, ma i loghi delle sottocategorie non vengono mostrati (il che è coerente con l’impostazione predefinita).
In un box, non penso abbia senso cercare di stipare due titoli brevi di sottocategorie su una singola riga se c’è spazio; a mio avviso è meglio avere una riga separata per ciascuna, anche se altri potrebbero preferire di accorparli se ci sono molte sottocategorie. - Le mie modifiche finali:
I loghi delle sottocategorie vengono mostrati con un’altezza di 18px e il corretto rapporto d’aspetto alla fine del titolo. Questa opzione è facoltativa e potrebbero essere posizionati tra l’icona di blocco e il testo, ma preferisco che le strisce e i titoli siano allineati.
Avrebbe anche senso avere l’opzione di utilizzare i loghi delle sottocategorie negli altri layout predefiniti, ma non mi sono preso la briga di farlo.
Qui sto anche utilizzando il componente Category Icons (un’icona è impostata solo sulla sottocategoria Niki Test), quindi la posizione della striscia è leggermente spostata per allineare l’icona con essa, e il colore dell’icona è quello della striscia, così viene effettivamente utilizzata al posto della striscia: ma queste sono modifiche a quel componente, non al nucleo. - Infine, ecco come viene renderizzato quando le box delle sottocategorie sono mostrate sopra gli argomenti della categoria genitore, se impostato.
Ovviamente al momento non ci sono sottocategorie di terzo livello da mostrare, ma ciò dovrà essere previsto. Inoltre, potrebbe essere meglio far galleggiare verticalmente il logo quando il titolo è molto lungo: forse è meglio semplicemente mantenere i titoli delle categorie brevi!
Quindi una miscela di HTML e testo/x-handlebars in /head per il tema, che sostituisce efficacemente “components/categories-boxes”, e SCSS. Sono felice di inviare il codice a chiunque sia competente per testarlo e inserirlo su GitHub.
Questo funziona bene per il mio sito, ma potrebbero esserci altre conseguenze che non ho notato.