Quando il componente del tema header submenus è attivo, le icone in fondo alla barra laterale scompaiono dallo schermo.
Probabilmente c’è qualche tipo di calcolo CSS che va nella direzione sbagliata?
4 Mi Piace
Gli header personalizzati non sono inclusi affatto nel calcolo, questo può essere riprodotto aggiungendo qualsiasi contenuto alla sezione header di un tema.
Il calcolo che utilizziamo per la barra laterale e la chat tiene conto dell’altezza dell’header di Discourse e imposta --header-offset come variabile durante il calcolo di alcune altezze.
Includere gli header personalizzati potrebbe essere un po’ complicato perché il contenuto dell’header personalizzato non rimane fisso durante lo scorrimento per impostazione predefinita, a differenza dell’header di Discourse… quindi se lo includiamo nel calcolo per impostazione predefinita, una volta che scorri e l’header personalizzato scompare, l’altezza diventa errata.
Quindi, ad esempio, se aumento manualmente --header-offset dell’altezza del mio header personalizzato (è circa 60px per impostazione predefinita), si crea uno spazio sopra la barra laterale durante lo scorrimento:
Aggiungiamo una classe .docked al body una volta che un header personalizzato è uscito dalla vista, quindi è possibile utilizzarla… il che è meglio, ma c’è una transizione evidente poiché l’altezza della barra laterale si adatta tra gli stati… questo accade perché .docked è attivato o disattivato.
Se desideri un header fisso, questo è un po’ più facile da aggirare… perché puoi aumentare --header-offset dell’altezza dell’header personalizzato, e quindi impostare il valore top di .d-header-wrap come altezza dell’header personalizzato:
Una soluzione che mi viene in mente per migliorare il caso dell’header non fisso è:
- Controllare l’altezza dell’header personalizzato
- Includere l’altezza dell’header personalizzato in
--header-offset - Decrementare l’altezza dell’header personalizzato utilizzata nel calcolo di
--header-offsetin base alla posizione di scorrimento. Questo adeguerà più gradualmente l’altezza della barra laterale in un modo che la classe.dockednon può fare.
Potrebbe essere necessaria qualche sperimentazione per ottenere il risultato giusto…
5 Mi Piace
Molto utile, grazie @awesomerobot
(spostato in UX)
4 Mi Piace
Questo è stato implementato qui (un grande ringraziamento a @david):
Questo dovrebbe risolvere problemi con la barra laterale, la chat e altri problemi con contenuti di intestazione personalizzati.
4 Mi Piace