Project

General

Profile

Développement #64406

simplifier / ajouter une possibilité de modifier le padding des cellules

Added by Thomas Jund over 2 years ago. Updated over 2 years ago.

Status:
Nouveau
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
20 April 2022
Due date:
% Done:

0%

Estimated time:
Patch proposed:
No
Planning:
No

Description

Pour Miribel, j'ai essayé de faire le tour des modifs CSS nécessaires pour modifier le padding des cellules
Ou encore : modifier $title-padding et faire en sorte que le contenu des cellules soit aligné verticalement sur ces valeurs

Voici le résultat :

$title-padding: 0.75rem 1.5rem;

//////

// ajust cell padding on $title-padding
.column div.a2-block,
.gru-content div.cell,
.block {
    & h2 + div,
    .cell--body {
        padding: $title-padding;
    }
}
.gru-content .cell.wcsformsofcategorycell {
    h2 ~ div.intro {
        padding: $title-padding;
    }
}
.a2-block {
    & form, & p {
        padding: $title-padding;
        margin: 0;
    }
}
%cell-links-list {
    & > li {
        > a {
            padding: $title-padding;
        }
        div.description {
            padding-left: nth($title-padding, 2);
            padding-right: nth($title-padding, 2);
        }
    }
}
div.textcell {
    p, h1, h2, h3, h4, h5 {
        margin-left: nth($title-padding, 2);
        margin-right: nth($title-padding, 2);
    }
}
div.searchcell {
    form {
        padding: $title-padding;
    }
    .search-service-label {
            padding-left: nth($title-padding, 2);
            padding-right: nth($title-padding, 2);
    }
}

reflexion à frappe haute :

On pourrait poser une variable scss $cell-padding et l'appliquer partout, mais ce serait contourner le problème d'un code fragile qui a besoin d'être homogénéisé / simplifié.
Generaliser `.cell-body` devrait aider. Mais ça ferme la possibilité de poser des backgrounds aux elements individuellement, pour cela il faudrait poser les padding sur chaques enfants : cell-description, cell-error, search-results, etc. La solution de poser plusieurs `.cell-body` coince sémantiquement. Pourquoi pas changer le nom de la class en `.cell--section` ?
Les links-lists ne reçoivent pas de padding, l'alignement se fait sur les liens, parceque séparateur full cell width. Donc `.cell-section` ferait l'affaire pour les elements avant et après les listes.
Et ça coince sur les textcells qui posent des marges sur les h*, p pour gérer l'alignement, parce cette cellule n'a pas de titre (#42968) et qu'on hack en appliquant le design du titre sur h2:first-child.

Also available in: Atom PDF