Project

General

Profile

Development #66458

Development #44934: Plan amélioration layout des templates

limiter la gestion des gouttières à .column plutot que .gru-content

Added by Thomas Jund 12 days ago. Updated 1 day ago.

Status:
Solution déployée
Priority:
Normal
Assignee:
Target version:
-
Start date:
21 Jun 2022
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

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

Revision 7e074b81 (diff)
Added by Thomas Jund 6 days ago

css restrict gutter margins to .column instead .gru-content (#66458)

History

#1

Updated by Thomas Jund 12 days ago

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.

#2

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.

#3

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;
+               }
+       }
#4

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.

#5

Updated by Frédéric Péters 6 days ago

  • Status changed from Solution proposée to Solution validée

Ok, passons ainsi.

#6

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)
#7

Updated by Transition automatique 1 day ago

  • Status changed from Résolu (à déployer) to Solution déployée

Also available in: Atom PDF