Skip to content

Conversation

@alinekeller
Copy link
Collaborator

@alinekeller alinekeller commented May 1, 2024

Breadcrumb

  • Ajout des dropdowns qui contiennent les pages de même niveau;
  • Sur desktop: toutes les étapes sont affichées, si nécessaire le breadcrumb passe sur plusieurs lignes;
  • Sur mobile / tablette: par défaut, uniquement la maison et la dernière étape sont affichées. Entre deux se trouve un bouton avec trois petit points; lorsqu'on clique dessus, le chemin entier est affiché (sur plusieurs lignes si nécessaire).

Navigation mobile
Le menu mobile comprend désormais deux navigations:

  • Le menu principal, affiché de manière plus simple, sur deux lignes;
  • La navigation latérale (nav aside) qui contient les pages de même niveau que la page courante, ainsi que ses pages enfants.

Pour un exemple complet du breadcrumb et de la navigation mobile, voir le modèle de page Lab Homepage.

@github-actions
Copy link

github-actions bot commented May 1, 2024

🔎 Download the Backstop report for this pull request (link valid for 90 days):

@github-actions
Copy link

github-actions bot commented May 1, 2024

Unit Test Results

    1 files      1 suites   0s ⏱️
270 tests 255 ✔️ 0 💤   0  15 🔥
270 runs  240 ✔️ 0 💤 15  15 🔥

For more details on these errors, see this check.

Results for commit 43a4675.

♻️ This comment has been updated with latest results.

@jdelasoie jdelasoie removed their request for review May 6, 2024 07:29
}
}

.breadcrumb .dropdown-menu {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dans certains cas, le dropdown n'est pas complètement visible :

localhost_3000_(Nexus 5X)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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…

Capture d’écran 2024-05-16 à 18 12 44

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

@xentenza xentenza May 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

comportement-breadcrumb

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.
@alinekeller alinekeller requested a review from williambelle May 16, 2024 16:21
@williambelle williambelle merged commit d02cb1b into dev May 21, 2024
@williambelle williambelle deleted the styleguide/breadcrumb-nav branch May 21, 2024 13:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants