È possibile farlo con CSS? Raggruppare le categorie nella pagina delle categorie

Sviluppatore
1

Ciò che vorrei fare (so che non esiste una funzionalità o un set di impostazioni predefinito) è utilizzare il CSS per raggruppare le categorie nella home page.

Non sto cercando di nidificare le categorie, ma semplicemente di raggrupparne alcune insieme e, eventualmente, aggiungere un’intestazione. So che le singole categorie possono essere “separate” con il padding e che ogni categoria può essere selezionata tramite l’ID o il nome della categoria. Quindi, il mio obiettivo è riuscire a replicare qualcosa che assomigli a questo:

image
image480×480 81.3 KB

Mi rendo conto che, per semplicità, le categorie dovrebbero essere nel loro ordine di ordinamento e ciascuna selezionata tramite category_id, ma penso che possa esistere del CSS in grado di aggiungere padding dopo una categoria o prima di un’altra.

La domanda fondamentale è: esiste la possibilità di inserire del testo nel padding per creare un’intestazione?

Lo scopo di questo approccio è prima di tutto spezzare la lunga visualizzazione dell’elenco delle categorie, separandole in questo modo: esempio

  • Categorie 1-2 sotto l’intestazione “Staff”
  • Categorie 3-4 sotto l’intestazione “Risorse della comunità”
  • Categorie 5, 8, 11, 12, 13 sotto l’intestazione “Categorie di discussione generale”

Non voglio trasformarle in sottocategorie; mi piace la struttura e il sistema delle categorie così come sono. Voglio solo visualizzare le categorie in modo leggermente diverso nella pagina di visualizzazione delle categorie. Idealmente, si tratta solo di un layout visivo, senza apportare alcun cambiamento alla struttura del repository della piattaforma.

Qualcuno ha un’idea su come realizzare questo?

Questo sarebbe un vero punto di svolta per il layout del mio sito di collaborazione.

Sam, codinghorror, credete che ci sarebbe un modo per aggiungere un passaggio di raggruppamento nel menu di riorganizzazione delle categorie che permetta di farlo nativamente, magari come opzione (raggruppamento attivo/disattivo)? Basta ordinare le categorie all’interno del raggruppamento della pagina principale e il sistema potrebbe separarle automaticamente. Sarebbe possibile implementarlo nel core, in un plugin o in un componente del tema?

3 Mi Piace
2

anyone? buehler.

feedback appreciated

3

This kind of stuff is possible in a theme component but extremely complicated. I think you would need to override templates which makes this also pretty fragile.

4 Mi Piace
4

Un po’ in ritardo :smile: ma forse serve a qualcun altro. Devo precisare che:

  • Non tutto il codice CSS è necessario, specialmente i bordi e i colori di sfondo per le righe della tabella, quindi sentiti libero di modificarli come preferisci.
  • Ho dovuto cambiare il layout da una tabella regolare a flex, perché non puoi usare margini negativi sulle righe di una tabella e ci sono altri problemi di layout; del resto… è più flessibile :smile:
  • Sostituisci Category Group 1 e Category Group 2 con i nomi dei gruppi di categorie che desideri.
  • Nel mio esempio ho usato gli ID delle categorie 2 e 4, quindi usa gli strumenti di sviluppo di Chrome per ispezionare (vedi immagine sotto), individua l’ID della categoria corretta e sostituisci [data-category-id="2"] e [data-category-id="4"] nel mio esempio con il tuo ID (o i tuoi ID).

image
image829×290 17.9 KB

Incolla questo nella scheda Common:

.category-list{
    display: flex;
    flex-direction: column;
}
.category-list thead tr{
    display: flex;
}
.category-list .topics {
    width: 95px;
    margin-left: auto;
    min-width: 95px;
    white-space: nowrap;
}
.category-list tbody tr {
    background-color: var(--primary-very-low);
    box-sizing: border-box;
    display: flex;
}
body .category-list [data-category-id="2"],body .category-list [data-category-id="4"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="2"]::before {
    content: "Category Group 1";
}
body [data-category-id="4"]::before {
    content: "Category Group 2";
}
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Incolla questo nella scheda Desktop:

.category-list tbody tr {
    margin-bottom: 15px;
    border: 1px solid var(--primary-low);
}

E questo nella scheda Mobile:

body .category-list-item.category .posts {
    width: auto;
    margin-left: auto;
}
body .category-list-item>footer,body .subcategory-list-item>footer{
    background-color: var(--primary-very-low);
}
.categories-list .category-list th {
    padding: 0;
}
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: right;
}
.category-list-item>footer .category-stat:first-child, .subcategory-list-item>footer .category-stat:first-child{
    margin-right: 0;
}
body .category-list-item.category tr:first-of-type{
    padding: 10px 0;
    border-bottom: 1px solid var(--primary-low);
}
body tr.category-topic-link:last-of-type{
    border-bottom: 1px solid var(--primary-low);
}
body .categories-list .category-list th {
    padding: 0;
}
body .category-list-item {
    border-top: none;
    margin-bottom: 10px;
}
body .category-list-item {
    padding: 0;
    border: 1px solid var(--primary-low)!important;
}
.category-list-item>footer, .subcategory-list-item>footer {
    border-top: none;
}

Ecco come appare nelle risoluzioni desktop e mobile:

desktop-category-group
desktop-category-group659×837 73.3 KB
mobile-category-group
mobile-category-group453×1061 52.3 KB

10 Mi Piace
5

Ciao Cos,

Molto interessante; grazie per aver condiviso. Nello stesso spirito (quello di ottenere una presentazione migliore), stiamo cercando di posizionare, davanti al discorso, una pagina WordPress con una presentazione specifica e vorremmo “inviare” su questa pagina i nomi delle categorie, ad esempio quelle che hanno ricevuto una risposta, quelle scelte dall’utente o una determinata categoria. Pensi che sia possibile e, in caso affermativo, come si fa?

1 Mi Piace
6

Temo che non sia possibile farlo solo con il CSS. Forse il plugin WordPress Discourse è ciò di cui hai bisogno. Inoltre, anche gli shortcode wp discourse sono indispensabili.
Lo stiamo già utilizzando sul nostro sito WordPress e finora funziona benissimo. Ecco come appare il plugin nel widget della barra laterale:

image
image454×664 52.5 KB

2 Mi Piace
7

@sam, la risposta di @cosdesign funziona. Esiste un modo per integrare questo nelle menu del core, in modo che gli utenti possano disattivarlo di default, ma poi impostare gli header nel pannello di amministrazione per i titoli degli header di gruppo e, nella pagina degli attributi di ogni categoria, selezionare da un menu a tendina gli header di sezione abilitati dal pannello di amministrazione, così che la categoria rientri semplicemente sotto l’header.

Non dovrebbe essere particolarmente difficile da aggiungere alla piattaforma e migliorerebbe davvero le installazioni con molti ruoli utente e gruppi, e molte categorie.

1 Mi Piace
9

Questo tipo di raggruppamento è ora supportato nel core di Discourse:

Scegli “Sottocategorie con argomenti in primo piano” come “stile della pagina della categoria desktop”:

Screenshot 2022-03-07 at 10.25.34
Screenshot 2022-03-07 at 10.25.341346×654 53.9 KB

E quindi la tua pagina delle categorie apparirà più o meno così:

image
image2440×1758 306 KB

5 Mi Piace
10

È possibile farlo con RTL??
Ci ho provato ma ho fallito :broken_heart:

11

Ha senso. I fogli di stile principali di Discourse vengono invertiti per creare una versione RTL qui: discourse/lib/stylesheet/compiler.rb at main · discourse/discourse · GitHub. Non credo che i file CSS aggiunti dai temi vengano compilati per creare una versione RTL. Se ciò è corretto, ciò spiegherebbe i problemi che hai riscontrato con i temi quando viene utilizzato un layout RTL.

Potresti confermarlo aggiungendo alcune regole CSS che contengono una direzione al tema del tuo sito, quindi visita il sito con una locale RTL e vedi se la direzione è stata invertita. Non credo che verrà invertita.

Ad esempio, se aggiungi questo al tuo tema:

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: right;
}

Non credo che verrà convertito in questo:

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: left;
}
12

Sono d’accordo con te, ho ancora paura di essere confuso nell’usare il codice sopra :confused:

Qualche suggerimento?

13

Conosci un esempio di tema che non funziona con RTL? Se sì, pubblica qui un link al tema e testerò la mia teoria e spiegherò cosa sta andando storto dopo averlo testato.

Modifica: Ecco una spiegazione del problema:

Per i file CSS nel codice principale di Discourse, il CSS RTL viene creato “invertendo” la maggior parte delle regole CSS che dipendono dalla direzione del layout del sito. Ad esempio, padding-left viene invertito in padding-right. Questo viene fatto con la gemma RTLcss: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

Il problema è che i temi di Discourse non hanno le loro regole CSS invertite. Ciò significa che se un tema ha regole CSS che specificano una direzione, la direzione sarà la stessa quando viene utilizzata una lingua RTL rispetto a quando viene utilizzata una lingua LTR. Ecco un piccolo esempio:

Quando il tema viene utilizzato con un’interfaccia RTL, padding-left: 8px; non viene invertito in padding-right: 8px;. Questo causa un piccolo problema di allineamento. Sono sicuro che ci sono esempi di problemi più grandi che si verificano quando i temi vengono utilizzati con una lingua RTL.

Lo stesso vale per qualsiasi CSS che aggiungi a un tema Discourse predefinito nell’editor del tema. Ecco un esempio che utilizza il codice di questo argomento: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Ecco una regola da quel CSS che imposta una direzione:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // questo deve essere cambiato
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Con una localizzazione RTL, questo è il problema:

image
image863×676 57.5 KB

Se quella regola fosse in un file CSS principale di Discourse, left: 0; verrebbe automaticamente convertito in right: 0; quando viene selezionata una lingua RTL. Poiché il CSS viene aggiunto a un tema, è necessario modificarlo manualmente in questo modo:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // cambiato nella posizione corretta per i layout RTL
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

image
image829×674 57.1 KB

Discourse aggiunge una classe rtl al tag html quando viene utilizzato un layout RTL. Gli sviluppatori di temi potrebbero utilizzare questa classe per far funzionare i loro temi sia per i layout LTR che RTL. Questo funziona, e penso sia corretto, ma forse la dichiarazione left: auto non è necessaria.

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}
/* Corregge il posizionamento per i layout rtl */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

Non sono sicuro se gli sviluppatori debbano adottare questo approccio con i loro temi. Richiede tempo e potrebbe portare a errori e problemi di manutenzione. Forse Discourse potrebbe compilare alcuni temi, o considerare di fornire una versione RTL. Potrebbe valere la pena testare questo approccio con alcuni di essi:

require "rtlcss"

Rtlcss.flip_css("theme_css")

Questa doveva essere una risposta breve :slight_smile: Se quello che ho scritto è corretto e non è stato trattato in un altro argomento, forse dovrebbe essere spostato in un nuovo argomento.

14

Questi Theme component potrebbero fare al caso tuo. Oppure essere una buona base per guardare il codice e trarre ispirazione.

“Modern Category + Group boxes” come usato nel tema Air funziona bene.

Screenshot_20240302-030928
Screenshot_20240302-0309281080×2400 122 KB