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.
Files
Associated revisions
History
Updated by Thomas Jund 12 days ago
- File 0001-css-restrict-gutter-margins-to-.column-instead-.gru-.patch 0001-css-restrict-gutter-margins-to-.column-instead-.gru-.patch added
- Status changed from Nouveau to Solution proposée
- Patch proposed changed from No to Yes
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.
Updated by Frédéric Péters 8 days ago
Je serais pour d'abord passer #65145, ça permettra de viser précisément les endroits avec la grille flex.
Updated by Frédéric Péters 8 days ago
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;
+ }
+ }
Updated by Thomas Jund 6 days ago
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.
Updated by Frédéric Péters 6 days ago
- Status changed from Solution proposée to Solution validée
Ok, passons ainsi.
Updated by Thomas Jund 6 days ago
- Status changed from Solution validée to 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)
Updated by Transition automatique 1 day ago
- Status changed from Résolu (à déployer) to Solution déployée
css restrict gutter margins to .column instead .gru-content (#66458)