Le composant de thème des sous-menus de l'en-tête pousse le bas de la barre latérale hors de l'écran

UX
1

Lorsque le composant de thème header submenus est actif, les icônes en bas de la barre latérale disparaissent de l’écran.

https://cdn.screencast.com/uploads/g000302MBEXFEjy4eyPzZN1QY9lUH/LWR_Recording.mp4?sv=2021-08-06&st=2023-05-18T04%3A17%3A29Z&se=2023-05-19T04%3A17%3A29Z&sr=b&sp=r&sig=7%2B95Shu88XVl4t3jX%2BP9p8cxStR%2B2WKs4CSyK%2FzvaZc%3D

Il y a probablement un problème de calcul CSS qui se passe mal ?

4 « J'aime »
2

Les en-têtes personnalisés ne sont pas du tout inclus dans le calcul, cela peut être reproduit en ajoutant du contenu à la section header d’un thème.

Le calcul que nous utilisons pour la barre latérale et le chat prend en compte la hauteur de l’en-tête Discourse et définit --header-offset comme une variable lors du calcul de certaines hauteurs.

L’inclusion d’en-têtes personnalisés pourrait être un peu délicate car le contenu de l’en-tête personnalisé ne reste pas fixé au défilement par défaut, contrairement à l’en-tête Discourse… donc si nous l’incluons dans le calcul par défaut, une fois que vous faites défiler et que l’en-tête personnalisé disparaît, la hauteur est alors incorrecte.

Donc, par exemple, si j’augmente manuellement --header-offset de la hauteur de mon en-tête personnalisé (il est d’environ 60px par défaut), vous obtenez un espace au-dessus de la barre latérale lors du défilement :

Nous ajoutons une classe .docked au body une fois qu’un en-tête personnalisé est hors de vue, il est donc possible de l’utiliser… ce qui est mieux, mais il y a une transition perceptible car la hauteur de la barre latérale s’ajuste entre les états… c’est parce que .docked est activé ou désactivé.

Si vous voulez un en-tête fixe, c’est un peu plus facile à contourner… car vous pouvez augmenter --header-offset de la hauteur de l’en-tête personnalisé, puis définir la valeur top de .d-header-wrap comme la hauteur de l’en-tête personnalisé :

Une solution qui me vient à l’esprit pour améliorer le cas de l’en-tête non fixe est de :

  1. Vérifier la hauteur de l’en-tête personnalisé
  2. Inclure la hauteur de l’en-tête personnalisé dans --header-offset
  3. Décrémenter la hauteur de l’en-tête personnalisé utilisée dans le calcul --header-offset en fonction de la position de défilement. Cela ajustera plus progressivement la hauteur de la barre latérale d’une manière que la classe .docked ne peut pas.

Cela pourrait nécessiter quelques expérimentations pour bien faire…

5 « J'aime »
3

C’est très utile, merci @awesomerobot

(déplacé ceci vers UX)

4 « J'aime »
4

Ceci a été implémenté ici (un grand merci à @david) :

Cela devrait résoudre les problèmes de barre latérale, de chat et d’autres problèmes avec le contenu de l’en-tête personnalisé.

4 « J'aime »