SNCFdevelopers/bootstrap-sncf

Menu Galactic bar

ggrimbert opened this issue · 7 comments

Bonjour,

Je suis en train d'intégrer le menu Galactic bar et je détecte un comportement inattendu.

Lorsque la taille de l'écran passe sous les 1280 pixels; la barre augmente de taille (de 64 à 76 pixels); ce qui a pour effet de rogner sur les composants en dessous et de changer le design de l'écran.
Un autre effet est la disparition du titre de l'application intégré dans la barre.

Largeur de plus de 1280px :
header-normal-size

Largeur de moins de 1280px :
header-min-size

Ce comportement peut être reproduit directement depuis la page d'exemple de bootstrap SNCF.

Cordialement

diyfr commented

Sur la page exemple https://designmetier-bootstrap.sncf.fr/docs/4.0/examples/navtabs/

  • Jusqu'à 767 px hauteur 60 px
  • de 768 px à 1279 px hauteur 76 px
  • à partir de 1280 px hauteur 60 px

Hello, merci pour ton signalement.

@diyfr a raison, en réalité il s'agît d'un comportement normal et désigné ainsi. Comme tu as créé un nouveau composant (la barre bleue en dessous), il faudrait que tu adaptes ton code CSS pour tenir compte du comportement de la galactic bar aux différents breakpoints (tu peux t'inspirer de l'imbrications des headers de la page https://designmetier-bootstrap.sncf.fr/docs/4.0/examples/navigation/ — l'ordre des différents composants est important pour que le comportement soit ok).

Après, tu soulèves un point intéressant, il se pose la question de la pertinence de changer de largeur dans ce breakpoint-là, faut qu'on en discute avec @jroquillet côté design ;)

J'ai réussi à caler ma barre en fonction de cette taille.
Ma seule question concerne la pertinence de ce changement de taille.

Hello @vdesdoigts ! Cela va faire partie des éléments à adapter dans les jours qui nous restent. @jroquillet va joindre la planche qui va bien. Merci ;)

Voici la planche, @vdesdoigts je t'ai envoyé une invitation sur le Zeplin partagé qui est en cours de travail mais qui contiendra tous les éléments design à jour (sans risque de versioning).

Corrigé selon design & mergé dans dev