Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Amélioration UX du dropdown structure #3968

Merged
merged 1 commit into from
Apr 29, 2024

Conversation

hellodeloo
Copy link
Contributor

@hellodeloo hellodeloo commented Apr 23, 2024

🤔 Pourquoi ?

Le nom des structures trop longues est croppé et rien ne permets de l'afficher dans sa totalité.

🍰 Comment ?

Maj du thème et modif du template pour ajout conditionnel d'un tooltip avec le nom complet

Et aussi, amélioration de la liste des structures dans le dropdown

  • la structure sélectionnée reste présente dans la liste des structures (et donc plus de chamboulement de l'ordre des structures restantes)
  • mise en avant de la structure sélectionnée dans la liste (statut actif bleu)

💻 Captures d'écran

Capture d’écran 2024-04-16 à 10 42 05 👇 ![capture 2024-04-25 à 15 11 05](https://github.com/gip-inclusion/les-emplois/assets/3874024/7e842b90-1a55-4114-9f39-4ed34f390a89)

@hellodeloo hellodeloo self-assigned this Apr 23, 2024
@hellodeloo hellodeloo added the 1-recette-jetable [Payé à l’heure] Crée une recette jetable sur CC label Apr 23, 2024
@hellodeloo hellodeloo changed the title fix: dropdown structure Amélioration UX du dropdown structure Apr 23, 2024
Copy link

🥁 La recette jetable est prête ! 👉 Je veux tester cette PR !

@hellodeloo hellodeloo force-pushed the deloo/fix-dropdown-structure branch from 9374147 to ac58e4e Compare April 25, 2024 09:02
@hellodeloo hellodeloo force-pushed the deloo/fix-dropdown-structure branch 2 times, most recently from cfbaabd to 8f88591 Compare April 25, 2024 12:16
@hellodeloo hellodeloo force-pushed the deloo/fix-dropdown-structure branch from 8f88591 to 119cead Compare April 25, 2024 14:01
@hellodeloo hellodeloo force-pushed the deloo/fix-dropdown-structure branch from 119cead to 229a868 Compare April 25, 2024 14:59
@francoisfreitag francoisfreitag dismissed their stale review April 25, 2024 15:06

Doute subit

@francoisfreitag
Copy link
Contributor

francoisfreitag commented Apr 25, 2024

C’est sûrement seulement chez moi, mais l’EI garage martinet ne tient pas dans la case, mais n’a pas de tooltip (23 / 24 caractères).
Je me demande si on ne devrait pas mettre le tooltip en permanence (hors mobile) ?

image

@hellodeloo
Copy link
Contributor Author

C’est sûrement seulement chez moi, mais l’EI garage martinet ne tient pas dans la case, mais n’a pas de tooltip (23 / 24 caractères). Je me demande si on ne devrait pas mettre le tooltip en permanence (hors mobile) ?

image

Y'a eu un débat là-dessus avec les UX. Il a été tranché qu'on ne le met que quand c'est trop long.
Par contre, oui le 24 caractères c'est perfectible (encore plus chez toi avec ton ratio) car 24 i ne sont pas aussi long que 24 w mais bon....

@francoisfreitag
Copy link
Contributor

Peut-être descendre la limite pour être sûr que ça tienne ? "EI Garage Martinet" fait 18 caractères, et c’est la totalité de l’espace chez moi. Je doute qu’on ait beaucoup de 24 * W, donc peut-être juste utiliser 18 au lieu de 24 pour la limite ? Mieux vaut un tooltip pour rien que de masquer la partie intéressante du nom de la structure.

Pour info, je suis revenu au scale factor 1 pour éviter les ennuis, mais visiblement c’est pas suffisant...

@hellodeloo
Copy link
Contributor Author

hellodeloo commented Apr 25, 2024

Peut-être descendre la limite pour être sûr que ça tienne ? "EI Garage Martinet" fait 18 caractères, et c’est la totalité de l’espace chez moi. Je doute qu’on ait beaucoup de 24 * W, donc peut-être juste utiliser 18 au lieu de 24 pour la limite ? Mieux vaut un tooltip pour rien que de masquer la partie intéressante du nom de la structure.

Pour info, je suis revenu au scale factor 1 pour éviter les ennuis, mais visiblement c’est pas suffisant...

Chez moi, par exemple, le "EI Garage Martinet Siege" de 24 caractères passe sans ... et sans tooltip donc
capture 2024-04-25 à 19 03 30
Ça donne quoi chez toi ? (j'ai preparé un test dans zeroheight)
Chez moi, je peux passer 26 caractères sans ... mais j'avais dejà descendu la limite a 24 pour laisser un peu de marge avec les letter-spacing différents selon les navigateurs.

Je suis passé a > 20

@hellodeloo hellodeloo force-pushed the deloo/fix-dropdown-structure branch 2 times, most recently from 7164346 to 376cecf Compare April 26, 2024 08:24
@francoisfreitag
Copy link
Contributor

Chez moi, par exemple, le "EI Garage Martinet Siege" de 24 caractères passe sans ... et sans tooltip donc capture 2024-04-25 à 19 03 30

Ça donne quoi chez toi ?

image,png

(j'ai preparé un test dans zeroheight) Chez moi, je peux passer 26 caractères sans ... mais j'avais dejà descendu la limite a 24 pour laisser un peu de marge avec les letter-spacing différents selon les navigateurs.

Je suis passé a > 20

image.png

@francoisfreitag
Copy link
Contributor

Sur chromium (qui n’a pas d’extensions sur mon système, ni de paramétrage particulier)
image

@hellodeloo
Copy link
Contributor Author

C'est dingue la différence
capture 2024-04-29 à 10 01 17

@hellodeloo hellodeloo force-pushed the deloo/fix-dropdown-structure branch from 376cecf to c91cf43 Compare April 29, 2024 12:25
@hellodeloo hellodeloo added this pull request to the merge queue Apr 29, 2024
Merged via the queue into master with commit b620589 Apr 29, 2024
11 checks passed
@hellodeloo hellodeloo deleted the deloo/fix-dropdown-structure branch April 29, 2024 12:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1-recette-jetable [Payé à l’heure] Crée une recette jetable sur CC modifié
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants