Projet

Général

Profil

Development #64406

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

Ajouté par Thomas Jund (congés, retour le 29/04) il y a environ 2 ans. Mis à jour il y a environ 2 ans.

Statut:
Nouveau
Priorité:
Normal
Assigné à:
-
Version cible:
-
Début:
20 avril 2022
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Non
Planning:
Non

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.

Formats disponibles : Atom PDF