Display a chevron on accordion item "preferences" #46
Conversation
Badatos
changed the title
|
Je viens de me rendre compte que selon le navigateur, il y avait déjà un chevron (ou pas). |
|
C'est une bonne idée ! Plutôt que d'ajouter une image et de la manipuler en CSS. Je propose de plutôt mettre simplement |
|
avec |
…e it on all browsers, and replace by chevron icon + Prevent a multi-line menu to be displayed over the next item.
|
Je viens de pousser une correction qui rend l'affichage uniforme sur tous les navigateurs (testé sur Firefox, Safari et Chrome) |
|
Je viens de faire le test avec Safari (sur IOS). |
|
Je viens de tester sur le mac de mon collègue. |
Concernant la potentielle mise à jour de materialize, c'est un vrai chantier, et à priori c'est pas quelque-chose de prévu tout de suite. Je pense que quand on fera la mise à jour, on se posera sérieusement la question de migrer directement vers un autre framework CSS |
Badatos
changed the title
|
Va pour le "display: list-item" alors. Du moment que Safari ne décide pas un jour d'ajouter une puce devant le chevron, ca me va ;) |
Badatos
changed the title
|
D'ailleurs, pour la langue, on pourrait ajouter 'langue" devant la planète |
C'est fait dans mon autre PR #45 , mais bien vu en effet ^^ |
Badatos
changed the title
|
Voila qui est fait. (testé fonctionnel sur Firefox, Chrome et Safari) |
|
Bonjour et désolé pour le délai. Avec l'ajout du chevron, je trouve que cela rend moins bien chevron + planète côte-à-côte. ça vous convient si je fais chevron + langue + planète ? |
|
L'important, c'est :
|
| .side-nav ul li ul li { | ||
| height: 48px; | ||
| .side-nav a { | ||
| /* Prevent a multi-line menu to be displayed over the next item. */ |
There was a problem hiding this comment.
Sans line-height: normal;, une ligne qui dépasse prend la place de 2 items (par exemple webauthn en Anglais)
Ensuite sans align-content: center;, le premier item de chaque liste se retrouve collé en haut
Remettre ces 2 règles corrige le problème
|
Je peux remettre ces 2 règles sans que ça n'altère l'accessibilité et les bonnes pratiques promues par vos commits ? |
oui, à priori pas de souci ^^. Dans mon souvenir, la correction était pour éviter qu'un element sensé etre sur 2 lignes soit à moitié caché (à cause de la hauteur fixe). |
|
J'ai remis en place ces 2 règles CSS pour faciliter la fusion. |
|
(vu que les commits sont un peu désorganisés, je vais squash les PR ensemble) |
This is a squash of multiples PR from Badatos these PR improve : - accessibility, - compliance with typographical rules, - formatting of certain files (e.g. removal of unnecessary spaces) #42 Improve OTP-Manager general layout accessibility: * Put "lang" value in "/" route * Replace #app.container div by main for more explicit client layout * Replace H2 by H1 in index.jade and H5 by P * put lang attribute in html tag for general layout #44 improved readme presentation #45 * Increase duration of all toasted errors * Replace some "b" html tags by "strongs" * Use non breakable spaces in french strings punctuations * Remove unwanted spaces in English strings (no spaces before punctuations in english) * Display textual "language" on language icon * CSS : add styles for heading (h1,2,3...) * page-title now use H1 instead of p * Correct some heading hierarchy * Remove every `text-align: justify` (Avoid Justify align in every web pages for Accessibility) #46 Display a disclosure triangle on accordion item "preferences", to better see it can be opened
…to better see it can be opened.