Development #66458
Development #44934: Plan amélioration layout des templates
limiter la gestion des gouttières à .column plutot que .gru-content
0%
Description
Situation actuelle pour gérer les gouttières des colonnes
1. on ajoute des marges pour créer les gouttières sur toutes les cells de `.gru-content`
{
margin-left: #{$columns-gutter / 2};
margin-right: #{$columns-gutter / 2};
}
2. on suprime ces marges pour les cells de la sidebar
.gru-content {
#sidebar {
div.cell {
@if $sidebar-position == left {
margin-left: 0;
margin-right: $sidebar-columns-gutter;
} @else {
margin-left: $sidebar-columns-gutter;
margin-right: 0px;
}
}
}
}
3. On supprime ces marges pour les cells enfants direct de #columns, pour ne pas les appliquer en configuration 1 colonne
.gru-content #columns > .cell {
margin-left: 0;
margin-right: 0;
}
4 *On supprime" ces marges à gauche pour les cell de la 1ère colonne et à droite pour les cells de la 2e colonne.
.gru-content .column:first-child .cell { margin-left: 0; }
.gru-content .column:last-child .cell { margin-right: 0; }
Et malheureusement ces marges qui servent de gouttières sont appliqués inutilement aux cellules ajoutées dans les thèmes custom via les blocks
- {% block columns-top %}
- {% block columns-bottom %}
- {% block content-top }{ endblock %}
- {% block content-bottom }{ endblock %}
Ce qui par défaut crée des décalages dans les alignements, mais en plus, fait buggé les nouvelles options de grille flexbox ajoutés aux placeholders.
Fichiers
Révisions associées
Historique
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a presque 2 ans
- Fichier 0001-css-restrict-gutter-margins-to-.column-instead-.gru-.patch 0001-css-restrict-gutter-margins-to-.column-instead-.gru-.patch ajouté
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Ce patch ne déplace pas encore la gestion des gouttières aux div .column mais au moins limite le contexte à .column permettant de ne plus impliquer les cellules situés dans d'autres blocks et ainsi de faire déjà fonctionner le system de grille flex dans les placeholders columns-bottom et columns-top.
J'ai fais un tour des thèmes custom qui personnalise les blocks- {% block columns-top %}
- {% block columns-bottom %}
- {% block content-top }{ endblock %}
- {% block content-bottom }{ endblock %}
et restauré les marges si besoin.
Mis à jour par Frédéric Péters il y a presque 2 ans
Je serais pour d'abord passer #65145, ça permettra de viser précisément les endroits avec la grille flex.
Mis à jour par Frédéric Péters il y a presque 2 ans
Après #65145, et en acceptant qu'on oublie internet explorer (i.e. qu'on puisse utiliser column-gap), il me semble de quelques tests locaux qu'on pourrait faire,
--- a/static/includes/_cells.scss
+++ b/static/includes/_cells.scss
@@ -53,9 +53,19 @@ $cell-close-foldable-icon: "\f106" !default; // angle-up
.column:last-child .block,
.column:last-child div.a2-block,
.gru-content .column:last-child .cell { margin-right: 0; }
+ .combo-placeholder--fx-grid {
+ justify-content: space-between;
+ column-gap: $fx-grid-gutter;
+ &.fx-grid > [class*="size--"] {
+ flex-grow: 1;
+ }
+ & > div.cell {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a presque 2 ans
columns-gap pour flexbox est dispo à partir de safari 14.
Ce qui me parait un peu trop recent. De ce que j'ai vu, il y encore pas mal de hardware pommé en circulation bloqué en safari 12.
Mais ok pour valider Development #65145: ajouter une classe aux placeholder qui sont en mode grid
Ce ticket, c'est parceque j'ai besoin de pouvoir utliser le nouveau sytem de grille dans les placeholders columns-bottom et columns-top pour Nantes.
Et je pense que ça va vraiment aider pour la suite, excluant du radar tout ce qui n'est pas column lorsque que je vais migrer les goutières.
Mis à jour par Frédéric Péters il y a presque 2 ans
- Statut changé de Solution proposée à Solution validée
Ok, passons ainsi.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a presque 2 ans
- Statut changé de Solution validée à Résolu (à déployer)
commit 7e074b81db33b9d7bc901c9a5e09fe1c5f0b7e67
Author: Thomas JUND <tjund@entrouvert.com>
Date: Tue Jun 21 17:39:49 2022 +0200
css restrict gutter margins to .column instead .gru-content (#66458)
Mis à jour par Transition automatique il y a presque 2 ans
- Statut changé de Résolu (à déployer) à Solution déployée
css restrict gutter margins to .column instead .gru-content (#66458)