Categorie dell'intestazione Navbar

|||
|-|-|-|
| :discourse2: | Riepilogo | Header Categories Navbar è un semplice componente che aggiunge un menu di link alle categorie genitore all’intestazione del sito, con overflow a scorrimento orizzontale aggiunto se/quando necessario.
| :eyeglasses:|Anteprima| Anteprima su Theme Creator |
| : hammer_and_wrench:|Repository| https://github.com/discourse/discourse-categories-navbar |
| : question:|Guida all’installazione|Come installare un tema o un componente tema|
| : open_book:|Nuovo ai temi di Discourse?| Guida per principianti all’uso dei temi di Discourse

Installa questo componente tema

Funzionalità

Questo componente tema aggiunge un menu di link alle categorie genitore all’intestazione del sito:

Impostazioni

Nome Descrizione
nascondi menu a tendina categorie Nasconde il menu a tendina delle categorie dalla navigazione dell’elenco argomenti
nascondi tutta la navigazione breadcrumb Nasconde tutti i breadcrumb dalla navigazione dell’elenco argomenti
nascondi allo scorrimento dell’argomento Quando abilitato, la navigazione verrà nascosta sul desktop quando il titolo dell’argomento è ancorato all’intestazione

:discourse2: Ospitato da noi? I componenti tema sono disponibili per l’uso sui nostri piani Standard, Business e Enterprise.

20 Mi Piace

Questo è davvero fantastico, Kris! Si combinerà magnificamente con il sidebar, permettendo ai gatti principali in alto e una breve selezione personalizzata sulla barra.

Ho notato due piccoli problemi di UX che potrebbero davvero migliorarlo se affrontati:

UX: Evidenziazione della selezione della categoria

Quando ci si trova in un elenco di categorie, la categoria corretta ha un bel sottile sottolineato.

Tuttavia, questo non persiste se si entra in un argomento o in una sottocategoria.

Sarebbe bello se persistesse in entrambe le situazioni.

UX: scorrimento / overflow su mobile

C’è un bel piccolo dissolvenza / freccia sottile visibile quando c’è overflow delle categorie sul desktop.

L’overflow è molto più probabile su mobile, ma sul mio dispositivo (Chrome / Android) questi sottili indizi non sono presenti e non è chiaro che lo scorrimento sia possibile.

Potrebbe anche aiutare rendere la barra delle categorie un po’ più alta su mobile per facilitare lo scorrimento.

6 Mi Piace

Altri due problemi di UX che si applicano principalmente al mobile:

Conflitto del breadcrumb dell’argomento mobile

Nelle visualizzazioni degli argomenti mobili, la navigazione del breadcrumb si scontra con la barra di navigazione delle categorie:

Categoria evidenziata non visibile

Inoltre, la categoria selezionata non viene automaticamente visualizzata - ciò significa che non è evidente che sia selezionata a meno che l’utente non scorra la barra di navigazione. Questo è davvero fondamentale.

Solo desktop?

Mi chiedo se non sia ancora pronto per il mobile e sarebbe molto utile avere un’impostazione per applicarlo solo al desktop (almeno per ora).

4 Mi Piace

Grazie per il rapido feedback! Ho unito alcuni aggiornamenti che dovrebbero risolvere questi problemi.

3 Mi Piace

Brillante: molto felice di dare un feedback quando viene ascoltato! Ho notato che hai dovuto apportare diverse aggiunte.

Lo prenderò come un bel piccolo regalo di Natale :gift: l’uno all’altro :heart_eyes:.

Hai risolto questo problema quando è stata inserita una sottocategoria: meraviglioso!

Tuttavia, non si applica quando viene inserito un argomento: è intenzionale? Personalmente, credo che avrebbe senso se la categoria rimanesse evidenziata mentre l’utente è “dentro” di essa, il che include gli argomenti e non solo le visualizzazioni di scoperta delle categorie.

Inoltre, quando entro in un’altra pagina (come /admin), la categoria rimane selezionata. Sarebbe meglio se in questo caso non venisse selezionata alcuna categoria.

Ora vedo lo sfumare sul cellulare, ma non una freccia/chevron. Se possibile, questo sarebbe molto utile poiché lo sfumare è piuttosto sottile:

Desktop: image

Mobile: image

Richiesta #1 - UX

Nascondi la barra di navigazione durante lo scorrimento di un argomento. Diventa un po’ troppo affollato!
image

Inoltre, potrebbe essere meglio sul desktop posizionare la barra di navigazione dove si trovano il breadcrumb/tag nell’immagine invece che sotto di essi.

Richiesta #2 - Funzionalità

Potresti aggiungere una classe CSS a ciascuna Nav Pill in modo che sia facile nasconderne alcune se necessario?

Lo chiedo perché ho un paio di categorie padre (private) che sono solo genitori per abilitare le sottocategorie e ingombrano la navigazione generale in modo indesiderato.

Per ora le ho nascoste usando il loro href, ma ovviamente è piuttosto rischioso!

Richiesta #3 - UX

Un’opzione per ordinare le categorie della barra laterale alfabeticamente.

Mentre implemento questo, ho rimosso le categorie padre dall’elenco predefinito delle categorie della barra laterale. Ciò significa che i miei utenti ora hanno solo un elenco di 1-5 sottocategorie che sono rilevanti per loro.

Tuttavia, sono un po’ disordinate e senza un ordine logico poiché l’ordine su /Categorie per le sottocategorie non ha molto senso. Sarebbe molto utile che queste sottocategorie fossero in ordine alfabetico per aiutare in questo!

4 Mi Piace

I colori sono leggermente diversi quando selezionati

  • palette chiare e scure predefinite

Idee?

3 Mi Piace

Grazie per la segnalazione! Questo dovrebbe risolvere il problema:

2 Mi Piace

Funziona perfettamente. Grazie!

2 Mi Piace

Ciao! Prima di tutto, vorrei sottolineare che questo è un componente molto utile dell’argomento e ti ringrazio per il lavoro svolto :raised_hands:
Nella mia istanza, questo componente ha causato un errore, ho verificato la compatibilità con altri plugin e componenti del tema e a questo punto non ho ancora trovato un conflitto. Il componente stesso potrebbe essere la causa?

Abilitare questo componente distorce la presentazione del contenuto.
Ecco un video:


Per rilevare un errore, è necessario fare clic su qualsiasi post dalla pagina degli ultimi post /latest, il post si aprirà in modalità standard, quindi è necessario tornare alla pagina degli ultimi post.

1 Mi Piace

@Aizada_M - Non riesco a riprodurlo. Ti succede quando visualizzi l’anteprima dal componente?

2 Mi Piace

Saluti! Scusa per la lunga risposta :raised_hands:
Non ho usato l’anteprima, l’ho testata con il componente abilitato.

1 Mi Piace

Funziona al 100% delle volte quando faccio clic sul nome della categoria sotto il titolo dell’argomento.

1 Mi Piace

Ho notato che il testo nella barra di navigazione delle categorie dell’intestazione è cambiato improvvisamente in font-up-1 (mentre penso che prima fosse font-down-1). Questo è piuttosto stridente e sgradevole, poiché è lo stesso di tutte le altre pillole di navigazione.

L’ho sovrascritto con questo CSS, che è molto più gradevole:

// corregge la dimensione del testo della barra di navigazione dell'intestazione
.custom-categories-navbar .nav-pills > li > a {
    font-size: var(--font-0);
}

Preferisco in realtà font-0 perché è sufficientemente diverso e un po’ più facile da usare.

1 Mi Piace

Il CSS principale non è cambiato e il componente non imposta la dimensione del carattere. :thinking:
Forse avevi del CSS personalizzato in precedenza?

2 Mi Piace

4 messaggi sono stati divisi in un nuovo argomento: Stile mobile non corretto della barra di navigazione delle categorie di intestazione

Adoro questo TC, grazie! Sarebbe fantastico poter personalizzare quali elementi appaiono e quali no!

3 Mi Piace

Lo adoro, ma il componente del tema sembra rotto nell’ultima versione di Discourse

MODIFICA: funziona bene, ma è stato necessario disattivare le icone “chat” e “Dark-Light Toggle” nell’intestazione

2 Mi Piace

Funziona per me con la chat attiva :slight_smile:

3 Mi Piace

Sì, è a causa del mio logo. Se lo taglio un po’, funziona con la chat e l’interruttore chiaro-scuro. Sto usando:

.d-header #site-logo {
max-height: 30px;
}

per ora

2 Mi Piace

Ciao, ho appena notato un bug che puoi riprodurre così. Su mobile:

1- Clicca su una categoria nell’intestazione
2 - Clicca su un post nella categoria e scorri fino alla fine
3 - Clicca sulla stessa categoria nell’intestazione

Tutta l’intestazione della categoria scomparirà. L’ho appena provato sul mio forum e sulla demo

MODIFICA:
è lo stesso se vai in una categoria e aggiorni (f5) la pagina. Tutte le categorie scompariranno.

MODIFICA:
C’è una soluzione? Grazie

4 Mi Piace