Annidare le sottocategorie Nest sotto le loro categorie principali nella barra laterale

Sono d’accordo. Ci sono stati aggiornamenti in merito? O ce ne saranno nel prossimo futuro?

2 Mi Piace

Non abbiamo piani immediati per apportare ulteriori modifiche qui.

Nota che ora puoi vedere che le sottocategorie si ordinano sotto la loro principale (ad esempio, le sottocategorie di Documentation su meta):

Inoltre, l’interfaccia utente per la selezione delle categorie è cambiata da quando è iniziata questa discussione e, all’interno di quella finestra di dialogo, le sottocategorie sono nidificate.

Questo dovrebbe aiutarle a renderle più facilmente individuabili per le persone che scelgono quali aggiungere alla loro barra laterale.

3 Mi Piace

Saluti!

Per serendipità, mi sono imbattuto in questo articolo. La sua somiglianza con la mia composizione precedentemente scritta è sorprendente.
https://meta.discourse.org/t/navigation-menu-sidebar-modifier/267354/24?u=aizada_m

Sono curioso di sapere: il team di discourse ha previsto soluzioni in merito, o la questione può essere considerata risolta?

Non lo so con certezza, ma ho la sensazione che se la categoria padre viene mostrata, allora forse le sottocategorie possono essere indirizzate con CSS per indentarle e fornire un aspetto nidificato? Si potrebbe usare un pseudo-elemento ::before? :woman_shrugging:t2:

Forse vedrò cosa riesco a escogitare per uno dei miei componenti del menu di navigazione quando li aggiornerò. Ho la logica in mente di come potrebbe essere realizzata, ma non sono sicuro se sia effettivamente possibile. Nei miei sogni, non solo le sottocategorie sono nidificate, ma è anche possibile comprimere le sottocategorie nelle loro categorie padre facendo clic sul punto. :laughing: :exploding_head:

5 Mi Piace

Mi unisco così ricevo notifiche se si verificano modifiche, poiché abbiamo anche troppe sottocategorie per la barra laterale da presentare senza costruire una torre, il che compromette il miglioramento dell’UX che la barra laterale offre.

La migliore soluzione che abbiamo ora è far scegliere agli utenti i loro gruppi e visualizzare solo le categorie correlate a quei gruppi, più una predefinita, che funziona finché un utente non ne seleziona troppe e costruisce una torre nella sua barra laterale.

@Lilly se quel metodo non dovesse funzionare, mi chiedevo se esistesse già lo strumento per creare categorie nidificate.

Il modulo Aggiungi sezione personalizzata potrebbe essere istruito ad aggiungere automaticamente tutte le categorie di primo livello come proprie sezioni e a includere le loro sottocategorie al di sotto.

Questo metodo darebbe agli utenti un eccellente controllo sulla loro barra laterale, poiché tutti avrebbero una funzione di modifica integrata.

Lo svantaggio è che gli utenti perderebbero l’icona della casella colorata per la categoria e probabilmente la funzione che mostra quanti nuovi post ci sono in ogni sezione.

2 Mi Piace

C’è mai stata una soluzione a questo?

Sembra pazzesco che tutto ciò che possiamo avere sia un unico lungo elenco… non sembra nemmeno che venga aggiunta alcuna classe alle sottocategorie che possiamo stilizzare manualmente con un piccolo rientro.

Sto cercando di ottenere qualcosa di simile a quanto segue:

Marketing ⌄

  • Customer Centricity
  • Technology
  • Tools

Non lo so, ci ho pensato molto ultimamente: voglio dire, l’intera sezione delle categorie è personalizzabile dai singoli utenti e questo è il modo preferito e dovrebbe essere incoraggiato. Poiché le sottocategorie possono essere aggiunte senza le loro categorie principali e hanno pallini semicolorati per indicare il loro stato di sottocategoria, penso che l’elenco nidificato/indentato non valga davvero la pena, specialmente data l’ardua e difficile attività di programmazione per realizzarlo. Da una prospettiva funzionale, forse l’idea di categorie principali comprimibili (come la sezione Altro, ad esempio) facendo clic sul pallino mi sembra più attraente dell’indentazione, sebbene sia un’impresa di programmazione ancora più difficile. :thinking:

2 Mi Piace

Quindi utilizza gli ID delle sottocategorie, che sono alquanto fastidiosi ma funzionali:

li.sidebar-section-link-wrapper {
  &[data-category-id="10"], /* ID sottocategoria */
  &[data-category-id="11"], /* ID sottocategoria */
  &[data-category-id="12"], /* ID sottocategoria */
  &[data-category-id="13"]  /* ID sottocategoria */ {
    margin-left: 1em;
  }
}

8 Mi Piace

Oh, questa è una bella soluzione!!! Grazie per averla condivisa :raised_hands:. La mia domanda è, è possibile fare qualcosa di simile con i normali link nella barra laterale? :sweat_smile:

Apri la console per sviluppatori e dai un’occhiata al record data-list-item-name:

Quindi puoi prenderli di mira nel tuo CSS, ad esempio

li.sidebar-section-link-wrapper {
  &[data-list-item-name="New"],
  &[data-list-item-name="Global leaderboard"],
  &[data-list-item-name="Test leaderboard"] {
    margin-left: 1em;
  }
}

Con un approccio simile puoi spostare un’intera sezione invece di singoli link:

.sidebar-section-wrapper.sidebar-section[data-section-name="new-global-links-section"] {
    margin-left: 1em;
}

6 Mi Piace

Ciao @dax! Perdonami per la lunga risposta :pray:
Sì, è magia :sparkles: e funziona, cercavo una soluzione come questa da 3 mesi, ti sono profondamente grato :raised_hands:

2 Mi Piace

Nella barra laterale, mi chiedo se sia possibile mostrare le sottocategorie con un rientro sotto la loro categoria principale? Vedi nella mia barra laterale:

Ad esempio, sotto “Eventi” ho la sottocategoria “AGU” senza rientro. Molti utenti non riescono a distinguere la differenza nei colori e pensano che “AGU” sia solo una categoria diversa, non correlata a “Eventi”. Quindi, in seguito, cercano “AGU” come categoria e non come sottocategoria, e quindi non riescono a trovarla facilmente.

Esiste un’opzione per avere quel rientro? In caso contrario, sarebbe bello averla.

Mi stavo chiedendo se potessimo semplificare questo?

Nel componente del tema Category Hider è stato aggiunto un interruttore per nascondere tutte le sottocategorie

.hamburger-panel .category-link.subcategory {
      display:none;
}

Prima di questo componente avevo nascosto manualmente tutte le sottocategorie prendendo di mira ciascuna individualmente. Finché qualcuno non ha condiviso un codice di 1 riga che nascondeva tutte le sottocategorie

li.sidebar-section-link-wrapper {
  .category-link.subcategory {
    margin-left: 1em;
  }
}

Testerò il codice sopra a breve.

Purtroppo questo non funziona. :sad_but_relieved_face:. Ci potrebbe essere un modo per adattare questo codice affinché funzioni?

Ho creato un semplice componente tematico per fare questo

10 Mi Piace

Funziona benissimo! Grazie!

1 Mi Piace