Projet

Général

Profil

Autre #43311

Plan de refactorisation du block `user-info`

Ajouté par Thomas Jund (congés, retour le 29/04) il y a presque 4 ans. Mis à jour il y a 11 mois.

Statut:
Fermé
Priorité:
Normal
Assigné à:
-
Version cible:
-
Début:
03 juin 2020
Echéance:
% réalisé:

100%

Temps estimé:
(Total: 0:00 h)
Patch proposed:
Non
Planning:
Non

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

Development #43593: Themes : nettoyage des variants du {% block user-info %}FerméThomas Jund (congés, retour le 29/04)

Actions
Development #43810: Option pour ne pas appliquer les styles actuels du bloc user-infoRejetéThomas Jund (congés, retour le 29/04)

Actions
Development #52275: Faciliter le déplacement du block user-info dans le thèmeFerméThomas Jund (congés, retour le 29/04)

Actions
Development #63860: supprimer span.sep dans le block #toplinksFerméThomas Jund (congés, retour le 29/04)

Actions

Demandes liées

Lié à Intégrations graphiques Publik - Development #40926: [RGAA][A] Les liens inscription/connexion ou utilisateur/déconnexion devraient être une listeFermé

Actions

Historique

#1

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" %} ?

#2

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.

#3

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.

#4

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é
#5

Mis à jour par Frédéric Péters il y a 11 mois

  • Statut changé de Nouveau à Fermé

Formats disponibles : Atom PDF