Produits Entr'ouvert » Intégrations graphiques Publik

En travaillant sur le thème de saint-denis, j'ai lutté pour ne pas induire de nouveaux décalages et donc je n'ai pas trouvé mieux que ça à proposer comme correction :
il y a toujours le décalage, mais il se comble quand on fait passer la souris dessus.

Je ne dirais pas que le soucis vienne du core. Car dans le core la nav a un margin qui est dans ce thème supprimé par

custom.scss: 63

div#nav,
div#nav ul {
    margin: 0;
}

Le bug fait donc référence à ce thème spécifiquement.
Perso je patcherais avec

--- a/static/publik/_custom.scss
+++ b/static/publik/_custom.scss
@@ -50,6 +50,8 @@
                width: auto;
                text-transform: uppercase;
                height: 100%;
+               position: relative;
+               z-index: 1;
                a {
                        line-height: 2.5em;
                }

Pour passer la nav par-dessus l'image.

En effet, j'ai testé avec le thème publik et je réalise maintenant qu'il y a que peu de thèmes qui reproduisent le bug.
Par exemple : publik, blois-2018 et le nouveau thème sur lequel je travaille (je suis parti de rien).

dans le core la nav a un margin qui est dans ce thème supprimé par

• pour ne pas avoir de marge entre la barre de navigation et l'image
• pour décaler vers le bas le texte dans la barre de recherche navigation (là je ne pige pas vraiment comment ça marche).

Perso je patcherais avec ...

cela introduit un décochement en dessous de la barre de navigation au niveau du menu

ou beaucoup plus simple et + cohérent. Tu repasses l'image en position static.

c'est la solution que j'ai écartée quand je disais que j'ai lutté pour ne pas induire de nouveaux décalages,
mais cela me permet du coup de préciser le ticket : il s'agit des thèmes pour lesquels la barre de recherche navigation est collée à l'image et où le texte n'est pas centré verticalement dans la barre de recherche navigation.
Ici avec static on perd cet alignement.

Quelle serait la façon de procéder pour décaler vers le bas le texte dans la barre de recherche navigation ?

État des lieux¶

• dans le core, la nav principale (.gru-nav) a un margin top et bottom de 1em "non-défini". Hérité des styles navigateur sur l'élément ul (élément qui est en niveau 3 d'arborescence du composant).
• En mobile la navigation est positionné à côté du titre du header à l'aide d'un margin negatif.
• L'image de la page est injecté dans un pseudo-élement :after de cette nav (Je ne comprends/connais pas l'origine de cette décision) et est positionné en relative avec un top de -0.5em pour réduire un peu l'espace créer par le margin-bottom de 1em géré par le navigateur et par la même créer un espace de 0.5em sous l'image.
• En desktop, les menus secondaires sont positionnés au-dessus des autres éléments de la page avec un z-index de 1000.

Bug repérés¶

• Dans les thèmes où la marge bottom de la nav est réduite à zero, que la page a une image et la navigation un sous-menu alors
  • en Desktop l'image de la page en remontant de 0.5em va recouvrir la nav principale et créer le bug repéré par nico.
  • en mobile l'image en remontant va recouvrir un peu le header.
• (annexe au bug mais relié quand même) en mobile, dans les thèmes où la page a une image et le $responsive-menu est de type "left-to-right", alors l'image recouvre complètement le header (dût au positionnement avec marge negative en mobile).

Patchs proposés¶

Patch qui a donc comme objectif de pouvoir supprimer les marges de la nav en toute sécurité.

Patch minimal 0001-nav.scss-remove-default-positionning-of-page-image-3¶

• inscrire clairement les marges dans le code plutôt que de croiser les doigts que les styles navigateurs n'évolueront pas. (Idéalement il nous faudrait un reset)
• Supprimer le positionnement de l'image.

Problèmes de ce patch

• les thèmes "natifs" ou non modifiés au niveau de la nav/image vont voir l'espace entre la nav et l'image passé de 0.5 à 1rem.
• certains thèmes ont déjà modifié la valeur top qui positionne l'image, faudra faire un tour.

Patch plus costaud 0001-nav.scss-improve-the-working-and-display-of-navigati¶

• Positionné avec un Z-index toute la nav, est pas uniquement les sous-nav, ce qui serait assez logique. Mais la nav étant remontée par un margin-negatif en mobile, elle recouvrira alors complètement le header (le rendant non clickable). donc
• Positionner le burger btn en absolute plutôt qu'une marge negative, ce qui patcherait aussi le bug en mode "left-to-right"

Problème de ce patch

Il y a un petit paquet de thèmes à reprendre, ceux qui ont modifié la position du burger menu en jouant sur le margin negatif :/