Autre #43311
Plan de refactorisation du block `user-info`
100%
Description
Le bloc avec les liens "connexion, inscription" ne possède aucune option de mise en forme. Il nécessite systématiquement une customisation CSS.
Propositions d'étapes d'évolutions pour ce bloc
1- reprendre les surcouches HTML des thèmes pour les simplifier (que l'on peut déjà bien simplifier depuis #38856).
à reprendre:
- gers-cd32
- grand-chambery
- grenoble-metropole-2019
- haute-garonne-cd31
- hautes-alpes-2018
- metz-metropole-2019
- moselle
- toulouse-metropole
2- Isoler son code HTML dans un fichier propre (include) permettant ainsi plus facilement de l'insérer à d'autres endroits dans le template (Il est souvent placé visuellement au-dessus du header) mais également de retrouver plus facilement les thèmes qui le surcharge.
3- Utiliser une convention de nommage plus précise pour les sélecteurs CSS. Le sélecteur #top-links n'est pas sémantiquement approprié. Côté Django `user-infos` est utilisé. `.user-nav` serait aussi plus parlant.
4- Améliorer la sémantique HTML / accessibilité en utilisant une liste ul > li > a (#40926) ?
5- Uniformiser l'utilisation du séparateur: Il y a une balise séparatrice entre les liens "Inscription" / "connexion", mais pas entre "FirstName LastName" / "Déconnexion".
6- Ajouter des options de mise en forme (#38197). À minima une option qui permet un `reset` de sa mise en forme actuelle, qui permet de ne pas appliquer la bordure, l'ombre, et le positionnement absolute. On retrouve très souvent dans les thèmes
border: none; box-shadow: none; border-radius: 0;
7- Reprendre les CSS des thèmes pour les simplifier et adopter les nouveaux sélecteurs.
Sous-tâches
Demandes liées
Historique
Mis à jour par Frédéric Péters il y a presque 4 ans
Comment tu assures le changement 4 sans rien casser ? i.e. il n'y aurait pas à déplacer la reprise de l'existant avant ça ?
2- Isoler son code HTML dans un fichier propre (include) permettant ainsi plus facilement de l'insérer à d'autres endroits dans le template (Il est souvent placé visuellement au-dessus du header) mais également de retrouver plus facilement les thèmes qui le surcharge.
Ça n'est plus vraiment une question sur le plan général (qui j'imagine aura des tickets individuels par étape), mais je ne vois pas trop comment tu envisages les choses ici, j'ai l'impression que ça change juste déplacer {% block user-info }{ endblock } en déplacer un { include "user_info.html" %} ?
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a presque 4 ans
L'ordre n'est pas fixe, certaines étapes seront peut-être à faire avant d'autres (5 avant 4 par ex.)
Comment tu assures le changement 4 sans rien casser ?
C'est pour cela que j'ai mis un point d'interrogation à la fin :).
De visu je pensais essayer de remplacer la balise span.logged-in et la balise span.login par des balises ul, et wrapper chaque lien d'une balise li.
Puis de forcer ul et li en `display: inline` pour que le core génère le même layout en sorti.
Il y aura peut-être quelques retouches au niveau des thèmes à faire en même temps (étape 7).
Avec l'idée de faire évoluer le markup, se pose déjà le problème de la balise séparatrice `span.sep`, l'exemple suivant n'étant pas valable
<ul class="login"> <li> <a accesskey="2" href="{% url 'auth_login' %}">Connexion</a> </li> <span class="sep">/</span> <li> <a class="registration" href="{{idp_registration_url}}">Inscription</a> </li> </ul>
Il faudra donc peut-être s'occuper du point 5 avant.
Si trop compliqué, une autre solution pour améliorer l'accessibility serait de se retourner vers les attributs aria role= list || listitem. Mais il faudra quand même une évolution du markup et je préférerais tenter la première.
j'ai l'impression que ça change juste déplacer {% block user-info }{ endblock } en déplacer un { include "user_info.html" %} ?
C'est juste, on pourrait insérer le code ailleurs en déplaçant {% block user-info } dans theme.html (qui demande aussi des aménagements pour le faire). Mais on continuerait à surcharger le bloc depuis page_template.html et je trouve plus claire pour la maintenance des themes que toutes les surcharges de ce bloc se fassent à travers un fichier dédié.
Dans les 2 cas il y un peu de retouche du markup à faire. Aujourd'hui déplacer { block user-info %} ne déplace pas son wrapper #toplinks qui lui donne son style et revoir aussi la position de la condition `if include_top_links` par exemple.
(qui j'imagine aura des tickets individuels par étape)
Oui c'est l'idée. Mais en débattre ici et maintenant pour évaluer la pertinence de chaque étape c'est bien aussi.
Mis à jour par Frédéric Péters il y a presque 4 ans
Ce qui me préoccupe donc surtout est l'ordre des choses, éviter d'avoir un moment "et là il faut tout faire partout", à remonter les choses je vois même deux approches différentes possibles :
- des étapes globales qui sont à appliquer l'une après l'autre, c'était dans ce sens que j'avais ma question "il n'y aurait pas à déplacer la reprise de l'existant avant ça ?"
- et/ou une approche qui permet d'avoir l'objectif en place, sur de nouvelles intégrations, et permettre petit à petit la mise à jour/vérification des anciennes. (l'important étant ici "petit à petit").
Et ça se combine, la progression petit à petit peut se faire pour atteindre un niveau général, qui permet alors une action globale qui aurait autrement cassé quelque chose, et puis une suite à nouveau petit à petit.
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Lié à Development #40926: [RGAA][A] Les liens inscription/connexion ou utilisateur/déconnexion devraient être une liste ajouté