Nel layout dell’elenco delle categorie, le sottocategorie vengono visualizzate con il loro cerchio colorato e, se l’accesso è limitato, con l’icona del lucchetto prima del titolo.
Nel layout a riquadri delle categorie, invece, non vengono visualizzati né il cerchio colorato né l’icona del lucchetto, ma se è definito un logo per la sottocategoria, questo viene mostrato (ridotto a 20px di default).
Questa è un’incongruenza. Dovrebbe esserci almeno un’opzione per far corrispondere l’aspetto normale (elenco) dei titoli delle sottocategorie. Idealmente, ci sarebbe anche la possibilità di visualizzare il logo nel layout a elenco.
O addirittura un plugin-outlet per permetterci di modificare questo comportamento illogico (ho cercato e non ne ho trovato uno - se esiste, per favore, qual è?)
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.
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.
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.
Pensavo di esaminare questo layout questa settimana per provare a integrare un terzo livello di sottocategorie, così da poter verificare anche la coerenza.
Ho appena inviato un aggiornamento con alcuni progressi iniziali.
Le sottocategorie di terzo livello sono in gran parte irrilevanti per questo argomento, ma sono un lavoro in corso che influenzerà lo stile di questa pagina in futuro… ed è per questo che le includo. Non sono completamente soddisfatto di questo approccio per diversi motivi, ma si tratta di un layout complesso.
Data la grande variabilità del contenuto di queste caselle, potrebbe essere necessario troncare le sottocategorie di terzo livello in un secondo momento… oppure eseguire alcuni calcoli di altezza in JavaScript per applicare un layout in stile masonry, in cui le caselle non hanno tutte la stessa altezza? Devo pensarci ancora un po’.
Per il singolo livello esistente di sottocategorie, ho passato allo stile badge per le categorie invece del collegamento generico. Ho anche migliorato i nostri calcoli del rapporto d’aspetto, che in realtà non venivano utilizzati affatto.
Penso che il logo sopra il titolo occupi troppo spazio verticale, che è prezioso con una descrizione troppo lunga e diverse sottocategorie.
Dato che uno dei vantaggi del layout a riquadri è rendere visibili più categorie senza scorrere, penso che sarebbe molto utile impostare di default il logo e il titolo affiancati. Ovviamente si potrebbe ottenere questo risultato con override CSS, ma sarebbe bello averlo già corretto di default.
Per quanto riguarda il problema delle categorie di terzo livello, mi piacciono i tuoi sottoriquadri, ma una possibile opzione di impostazione sarebbe mostrare solo un livello di sottocategoria con un indicatore quando esiste un livello successivo: magari un “+N sottocategorie” in testo piccolo sotto il titolo della categoria figlia se ci sono categorie di terzo livello.
