Styleguide: mise à jour du breadcrumb et de la navigation mobile #718
Conversation
|
🔎 Download the Backstop report for this pull request (link valid for 90 days): |
assets/components/pages/study-plan-course/study-plan-course.twig
Outdated
Show resolved
Hide resolved
| } | ||
| } | ||
|
|
||
| .breadcrumb .dropdown-menu { |
There was a problem hiding this comment.
Dans certains cas, le dropdown n'est pas complètement visible :
There was a problem hiding this comment.
Ce point là est assez délicat et nécessite un peu de js. J'ai tenté la chose suivante: au clic sur le bouton, on calcule la position du bouton et la largeur du dropdown. Si le dropdown est plus large que l'espace disponible à droite du bouton, on ajoute une classe qui permet de décaler le dropdown sur la gauche. J'ai testé plusieurs cas de figure, et ça a l'air de fonctionner comme voulu.
(à voir si le javascript peut être amélioré, ce n'est pas du tout mon domaine d'expertise)
Seul cas qui reste problématique: quand le breadcrumb item passe sur deux lignes, le dropdown le recouvre partiellement (et recouvre le bouton). On peut quand même le fermer en cliquant n'importe où en dehors du dropdown. Et idéalement, il ne faudrait pas avoir des éléments aussi longs dans un breadcrumb…
There was a problem hiding this comment.
Pour moi, c'est tout bon comme ça. (j'ai juste formaté le js).
Pour le comportement sur deux lignes, il faut confirmer avec l'équipe WordPress si c'est ok pour eux.
There was a problem hiding this comment.
Il y a effectivement des choses qui pourraient être plus jolies le comportement sur deux lignes, comme le sous-menu laissant apparaître le bouton, ou encore les éléments s'affichant comme un texte suivi (cf. ci-dessous, mais je ne vois pas comment faire avec un <li>).
Mais là, on parle du 1% du 99% du travail déjà effectué. Je valide la PR, bon boulot!
The problem: when the breadcrumb item is too close to the right side of the window, the dropdown might be partially hidden outside of the viewport. The solution: if the width of the dropdown is greater than the space between the button and the right side of the viewport, add class "open-left" to ".dropdown-menu" and use it to change the position of the dropdown.
Breadcrumb
Navigation mobile
Le menu mobile comprend désormais deux navigations:
Pour un exemple complet du breadcrumb et de la navigation mobile, voir le modèle de page Lab Homepage.