Sottomenu dell'intestazione

Sembra esserci un bug ora quando la modalità Fissa (mostra sempre il menu, anche quando si scorre verso il basso) è attivata.

Lo vedo con Discourse 2.9.0.beta8, e l’ho anche riprodotto facilmente usando il sito di anteprima del tema ufficiale di Discourse. Penso di averlo notato per la prima volta circa 2 settimane fa, ma non sono del tutto sicuro di quando abbia iniziato a succedere.

Per riprodurlo:

  • Attiva la modalità Fissa nelle impostazioni del componente del tema.
  • Clicca su un thread con molte risposte.
  • (Se è la prima volta che leggi il thread, e sei in cima, scorri verso il basso di qualche risposta, torna all’elenco dei thread, quindi clicca di nuovo sul thread, in modo da essere riportato al post che stavi guardando.)

La quantità di padding necessaria nella parte superiore della pagina viene calcolata in modo errato, con il risultato che la parte superiore del post e il nome della persona che l’ha scritto vengono nascosti sotto l’intestazione e tagliati.

Devi scorrere un po’ verso l’alto ogni volta che clicchi su un thread, solo per vedere chi ha scritto il post che stai leggendo.

Vedi questo quando entri nel thread:

Quando dovresti vedere qualcosa del genere:

Ciò che è davvero strano è che non succede sempre, e premere Ctrl-F5 spesso lo risolve. Ma succederà di nuovo un po’ più tardi.

Modificare il CSS per aumentare la quantità di padding che aggiunge a main-outlet in qualche modo risolve le cose, ma poi si ottiene molto spazio vuoto nella parte superiore degli elenchi di argomenti. Sembra che gli elenchi di argomenti e i thread necessitino di padding diversi, o forse uno di essi aggiunge il padding due volte o un padding extra da qualche altra parte?

(Modifica: A volte la pagina non può scorrere abbastanza in alto per vedere il problema. Ad esempio, quando vai all’ultimo post in un thread ed è breve, non c’è modo che l’intestazione si sovrapponga al nome del poster lì, anche se scorri verso il basso il più possibile manualmente. Ciò potrebbe spiegare alcune situazioni in cui le cose sembrano funzionare. Testa con una finestra del browser che non sia molto alta per il modo più affidabile per riprodurre il bug.)

3 Mi Piace

C’è un modo per impedire che questo venga visualizzato nella schermata di accesso? Posso farlo con il seguente CSS, ma questo presenta comunque il sottomenu dell’intestazione per un secondo e poi lo nasconde.

.static-login .top-menu {
	display: none;
}
.static-login .d-header-wrap {
	display: none;
}

C’è un modo migliore per impedire che questo appaia durante la pagina static-login?

1 Mi Piace

Questa e altre temi non funzioneranno nella visualizzazione del crawler; la visualizzazione del crawler non carica la maggior parte di JavaScript di Discourse.

3 Mi Piace

Ciao Kris, questo componente potrebbe necessitare di un aggiornamento per l’uso con la chat e la barra laterale. Con l’impostazione fixed_mode attivata, la chat e la barra laterale non vengono spostate verso il basso e si trovano dietro l’intestazione d.

Il CSS sottostante sembra risolvere bene le cose, tranne per il fatto che non funziona bene con Category Banners in quanto sembra spingere l’elemento #main-outlet verso il basso di altri 40px nelle pagine delle categorie. Grazie!

.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
    margin-top: 40px !important;
}
2 Mi Piace

Grazie per averlo segnalato! Ho appena aggiunto alcune correzioni qui:

1 Mi Piace

Fantastico, grazie Kris! Hai idea del perché #main-outlet scenda di 40px?

#main-outlet {
   padding-top: calc(1.8em + 40px);
}

2 Mi Piace

Ah, me ne sono accorto ora — quello può essere rimosso, e lo sarà una volta che questo PR sarà unito: UX: remove old main-outlet adjustment by awesomerobot · Pull Request #19 · discourse/discourse-header-submenus · GitHub

Aggiornamento: ora è stato unito, quindi lo spazio extra sparirà se aggiorni il componente.

2 Mi Piace

Dove si può trovare i nomi delle icone?

3 Mi Piace

Credo che tutto ciò che è elencato qui sia disponibile per l’uso: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Sebbene alcune icone richiedano un passaggio aggiuntivo… per le icone che non utilizziamo in Discourse per impostazione predefinita, i nomi delle icone devono essere aggiunti all’impostazione del tema Svg icons.

Se vuoi davvero essere specifico, tutte le icone che utilizziamo in Discourse per impostazione predefinita sono elencate qui: discourse/lib/svg_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub

E tutte le icone disponibili per l’uso nei temi (tramite l’impostazione svg icons) si trovano in questa directory: discourse/vendor/assets/svg-icons at main · discourse/discourse · GitHub

La visualizzazione dei file SVG su GitHub non è molto utile, perché vedrai un grande riquadro bianco:

ma puoi fare clic sul pulsante “raw” e visualizzare il codice sorgente della pagina, il nome dell’icona è l’id del symbol

3 Mi Piace

Spacchi, grazie mille

2 Mi Piace

Grazie Kris, ha funzionato. Ho notato però un paio di altri problemi. .topic-navigation deve essere spostato verso il basso di 40px e .topic-post.sticky-avatar .topic-avatar sembra essere calcolato in modo errato quando si scorre verso il basso, finendo dietro l’intestazione d-header. Inoltre, è possibile espandere il composer e la finestra di chat troppo in alto e perdere i controlli dietro l’intestazione d-header. Penso che questo copra tutto!

Modifica: ancora una cosa, quando visiti un link di ancoraggio, anche l’intestazione si trova sotto l’intestazione d-header.

2 Mi Piace

2 post sono stati divisi in un nuovo argomento: Il componente spinge verso il basso la chat, nascondendo parzialmente l’input della chat

2 post sono stati uniti in un argomento esistente: Il componente spinge verso il basso la chat, nascondendo parzialmente l’input della chat

Qualcuno ha capito come fare? Mi piace l’approccio di non usare spazio aggiuntivo e riutilizzare le risorse già presenti sullo schermo.

È davvero fantastico che passando il mouse sopra il logo si possa navigare verso il blog, la documentazione o la wiki!

2 Mi Piace

Per quanto ne so, l’impostazione “svg icons theme” menzionata da Kris si trova attualmente in Admin > Impostazioni > Altro > verso il fondo c’è svg icon subset (…credo sia corretto??)

1 Mi Piace

C’è un piccolo problema di z-index con la nuova light-box Glimmer, 1001 la posiziona sopra la light-box perché la light-box è a 1000.

2 Mi Piace

Problema classico di z-index, verrà risolto la prossima volta che Discourse verrà aggiornato

4 Mi Piace

Grazie per questo bel plugin.

Mi chiedo, c’è un modo per non visualizzare i sottomenu dell’intestazione quando non si è connessi?

Oppure, (come idea di sviluppo?) forse meglio, che ne dici di avere voci di menu visualizzate collegate a gruppi (livelli di fiducia o altri)?
Facile da chiedere lo so…

Grazie
C.

3 Mi Piace

Non credo che questo sia da nessun’altra parte, mi scuso se così fosse. Mi piace usare i sottomenu dell’intestazione, ma ho molte intestazioni principali e di conseguenza sembrano piuttosto brutte sui dispositivi mobili. Vorrei che le mie intestazioni non andassero fuori schermo e mi facessero scorrere. È possibile?

2 Mi Piace

Ok, ho in parte risolto il mio problema compilando tutti i link più importanti come sottomenu in un’intestazione principale “Navigazionale” su mobile.

2 Mi Piace