Visualizzazione solo categorie rifatta in due colonne

Contribuisci UX
1

Continuando la discussione da Come stilizzare la pagina /categories?:

Ho una domanda relativa a una discussione più vecchia.

Quanto è semplice ottenere questo:

image
image2560×1480 223 KB

Il risultato più vicino che sono riuscito a ottenere è questo:

image
image1136×259 7.21 KB

Applicando column-count: 2 al DIV che circonda la tabella e display: block agli elementi della tabella.

Ma non sono sicuro di come forzare l’intestazione ad estendersi su tutta la riga :sweat_smile:

AGGIORNAMENTO.
Ho appena realized che, dal punto di vista funzionale, dovrei o duplicare questa riga di intestazione, lasciare solo “Categorie” o semplicemente nasconderla tutta…

3 Mi Piace
2

Credo che potrebbe essere più semplice se imposti tbody con display: block e column-count: 2? In questo modo, thead continuerà a occupare l’intera larghezza.

Ma sì, a quel punto vorrai nascondere tutto tranne “Categoria”.

3 Mi Piace
3

Alternativa con flexbox:

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

image
image1205×853 95.6 KB

Ci sono ancora qualche piccola modifica da apportare.

9 Mi Piace
4

Nel mezzo di tutto questo, ho dimenticato che sarebbe stato bello se mantenessero l’allineamento orizzontale.
È fantastico :slight_smile:

5

Notare che con questo CSS le categorie non verranno elencate come:

1 - 4
2 - 5
3 - 6

ma come:

1 - 2
3 - 4
5 - 6

Inoltre, è necessario aggiungere una media query per modificare lo stile su schermi piccoli.

4 Mi Piace
6

Ho provato un po’ entrambe le opzioni e sembra che dividere la tabella delle categorie a metà, anziché in sequenza, sia più adatto al nostro scopo.

Tuttavia, è complicato controllare dove deve avvenire la divisione.

Sono riuscito a ottenere questo risultato nel mio browser:

image
image586×539 34.1 KB

Ma solo quando ho inserito artificialmente le categorie a sinistra in un div (per evitare che si dividesse troppo presto; altrimenti la categoria radice “Measure” finirebbe nella colonna di destra):

image
image659×247 10 KB

Esiste un modo per “impacchettare” le righe con specifici ID di categoria in un DIV, magari tramite la API del tema?

1 Mi Piace
7

Quello che chiedi sembra complicato e potrebbe richiedere un po’ di magia JavaScript.
Con la proprietà CSS column, sono sicuro che le categorie non saranno allineate orizzontalmente (a meno che non imposti un’altezza fissa), come accade con Flexbox, e non è molto elegante.

Ho ottenuto quello che volevi, ma è un po’ macchinoso:

Ho utilizzato il mio precedente CSS, poi ho aggiunto un <tr> vuoto (che credo si possa fare con una singola riga di JS) e impostato la proprietà order per cambiare l’ordine dei div. Quest’ultimo può essere fatto solo via CSS indirizzando ogni valore HTML data-category-id. Ecco il risultato:

image
image1166×989 107 KB

Ecco il <tr> vuoto:

image
image1175×351 29.9 KB

Tieni presente che probabilmente dovresti modificare il CSS e/o JavaScript ogni volta che aggiungi o rimuovi una categoria.

Modifica: se ti servono solo uno o due elementi vuoti aggiuntivi, non hai bisogno di usare JavaScript per aggiungere un <tr>; puoi anche usare :after e/o :before in questo modo:

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

Questo aggiunge un elemento vuoto di 1px che funziona allo stesso modo.

image
image1177×244 19.8 KB

3 Mi Piace
8

Grazie, è andato tutto bene :slight_smile: Non ci dispiace dover gestire manualmente le categorie, quindi va tutto bene.
Il risultato finale è visibile sul nostro Forum.

1 Mi Piace
9

Puoi condividere l’URL del tuo forum?

1 Mi Piace
10

Certo, ce l’ho nel mio profilo e non volevo fare pubblicità diretta :smiley:

2 Mi Piace