Projet

Général

Profil

Development #44934

Plan amélioration layout des templates

Ajouté par Thomas Jund il y a plus de 3 ans. Mis à jour il y a plus d'un an.

Statut:
Nouveau
Priorité:
Normal
Assigné à:
Version cible:
-
Début:
08 juillet 2020
Echéance:
% réalisé:

100%

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

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

Je vais commencer une simplification du core CSS sans avoir besoin de toucher aux thèmes existants.
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

Sous-tâches

Development #44936: supprimer padding:0 inutile sur les cellulesFerméThomas Jund

Actions
Development #44937: Ne plus appliquer les marges gouttières à `#service > ul > li` FerméThomas Jund

Actions
Development #45175: Supprimer les marges gouttières des a2-blocks en contexte 2 colonnes et en mobileFerméThomas Jund

Actions
Development #46706: définir les gouttières des colonnes en mobile firstFerméThomas Jund

Actions
Development #47913: Ajouter block columns-top & columns-bottomFerméThomas Jund

Actions
Development #48515: remplacer #left et #right par .columnFerméThomas Jund

Actions
Development #65164: gérer les gouttières à partir des colonnes et de la sidebarNouveauThomas Jund

Actions
Development #70656: gestion de la gouttière de la sidebarFerméThomas Jund

Actions
Development #66458: limiter la gestion des gouttières à .column plutot que .gru-contentFerméThomas Jund

Actions

Historique

#1

Mis à jour par Thomas Jund il y a plus de 3 ans

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".

#2

Mis à jour par Thomas Jund il y a plus de 3 ans

Changement de stratégie.
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.

#3

Mis à jour par Thomas Jund il y a plus de 3 ans

  • Sujet changé de Nettoyer le code CSS des templates (gouttières) à Plan amélioration layout des templates
#4

Mis à jour par Thomas Jund il y a plus de 3 ans

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".

Formats disponibles : Atom PDF