Développement #44934
Plan amélioration layout des templates
100%
Description
En relevant #44780, je me suis dit que ce serait quand même bien de simplifier notre système de layout pour créer des template différents (3 colonnes) sans avoir besoin de tout réécrire.
En inspectant notre code relatif à la gestion des layouts
Plusieurs améliorations en vue
1. Le layout des colonnes est en float.
2. Le layout est codé en desktop first avec une surcouche pour mobile. Ce qui ajoute du code inutile.
3. L'espace entre les colonnes (gouttière) est géré par les cellules et non pas les colonnes elle-même (avec un risque de conflit avec le système de grille qui modifie également les margins des cellules).
4. Les gouttières (margins) sont supprimées sur la première (ceux de gauche) et la dernière colonne (ceux de droite). En 2 colonnes cela fonctionne, mais pas au-delà. Une utilisation des marges négatives permettrait de compenser ce problème pour le moment.
5. Il y a des imbrications de colonnes possibles en allouant une page combo à authentic (redirection vers [idp_url]) qui sont parfois mal gérés.
6. Au passage réduire la spécificité des sélecteurs CSS
En faisant en sorte que le core expose le même code aux thèmes :
- Ne pas toucher pour le moment au positionnement float,
- ni la gestion des gouttières à travers les marges des cellules.
- Se limiter presque uniquement à la gestion des marges
Subtasks
History
Updated by Thomas Jund over 4 years ago
La branch wip/44934-clean-layout-css permet de suivre le processus global de réécriture.
Je vais poser des patchs progressivement en "sous-taches".
Updated by Thomas Jund about 4 years ago
J'ai buté sur 2 points :
- Imbriquer un layout dans un autre (cas par exemple de la page a2/account au sein d'un template 2 colonnes), mais ce serait vraiment intéressant d'y arriver.
- rendre le systeme de grille des cellules compatible avec les layouts multi-colonnes
J'ai donc développé un system de template et une grille fonctionnelle avec du CSS moderne (flexbox + gap) avec l'idée d'avoir ça en point de mire.
- Un system de layout de colonnes en flexbox permettant facilement de créer des templates avec colonnes 3+
- Une gestion des gouttières au niveau des colonnes et non plus au niveau des cells.
- un system de grille pour les cellules (ou autre) qui respecte la largeur du bloc parent.
- La possibilité d'imbriquer sans problème les layouts
Le code est dispo sur ce codepen
https://codepen.io/Sacripant/pen/QWNxxrb
1-
Puis j'ai fixé la première étape : passer le layout des colonnes en flexbox
https://codepen.io/Sacripant/pen/KKzBrNg
2-
Et la deuxième ou je passe la gestion des gouttières aux colonnes.
https://codepen.io/Sacripant/pen/abNjajb
3-4-5-
il restera ensuite la réécriture du system de grille des cellules (en le dissociant du system de grille pour les widget de formulaire), puis prendre le temps d'adapter cette nouvelle grille aux formulaires.
Le chemin va être long et semé d’embûches.
Updated by Thomas Jund about 4 years ago
- Subject changed from Nettoyer le code CSS des templates (gouttières) to Plan amélioration layout des templates
Updated by Thomas Jund about 4 years ago
Mike par mail :
Il arrive que l'on utilise la grille dans combo au lieu d'un simple modèle de
page deux colonnes, parce qu'on veut que le premier bloc, qui fait office de
bandeau de contenu de page, prenne la largeur des deux colonnes.https://portail-somme.test.entrouvert.org/rsa
Mais les blocs juxtaposés ne faisant pas la même hauteur ça fait un rendu pas
terrible avec un gros espace entre certains blocs.Mais j'imagine que ce n'est pas un problème de bloc mais plutôt un nouveau
template de page qu'il faudrait avec une partie "entête de contenu".