Development #16147
permettre la "jonction" visuelle des cellules dans combo
0%
Description
Certaines cellules pourraient nécessiter du texte autour sans qu'il soit parametrable dans la cellule même.
On peut s'en sortir avec des cellules "Text" autour mais il faut donner l'impression visuelle que c'est la même cellule.
Mon idée est de définir des noms de classes (documentées) qu'on mettrait dans l'option d'une cellule afin qu'elle colle la cellule au-dessus ou en dessous.
Fichiers
Révisions associées
help: start documentation on reusable CSS classes (#16147)
Historique
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a environ 7 ans
- Fichier 0001-cells-add-styles-to-allow-cells-gluing-16147.patch 0001-cells-add-styles-to-allow-cells-gluing-16147.patch ajouté
- Fichier glued_cells.png glued_cells.png ajouté
- Patch proposed changé de Non à Oui
Voilà: 2 classes CSS à définir dans les cellules afin qu'elles soient "collées" en bas ou en haut.
Mis à jour par Frédéric Péters il y a environ 7 ans
Cacher le <h2> me semble hors de propos pour ces classes. (je peux bien sûr comprendre l'intérêt de le cache, mais via une classe différente)
Quand il y a des bordures arrondiers, ça s'empile assez mal (essayer avec l'ancien thème Fontenay par exemple).
Et concernant les noms des classes, je me dis qu'on peut mieux faire, genre no-bottom-margin me semble plus facile que bottom-glued.
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a environ 7 ans
- Fichier 0001-cells-add-styles-to-allow-no-top-or-bottom-margins-1.patch 0001-cells-add-styles-to-allow-no-top-or-bottom-margins-1.patch ajouté
- Fichier fontenay.png fontenay.png ajouté
Sur l'ancien thème Fontenay c'est l'effet de l'ombre (box-shadow) qui donne l'impression d'une bordure, sinon l'arrondi viré avec ce patch.
Mis à jour par Frédéric Péters il y a environ 7 ans
Avoir deux classes ça me pose déjà question et j'imagine que ça en posera encore plus tard; idéalement pour moi on aurait uniquement no-margin-bottom, sans nécessité d'expliquer qu'il faut à la fois no-margin-bottom et no-margin-top, ou sans nécessité d'expliquer qu'il n'est pas nécessaire d'avoir les deux.
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a environ 7 ans
- Fichier 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch ajouté
Ok.
Mis à jour par Frédéric Péters il y a environ 7 ans
Cf ici (thème haute-goulaine avec le border-radius monté à 20px pour rendre très visible le soucis). (les no-bottom-margin sont appliqués sur les cellules tout à droite, Blcs, Téléformulaires, hello world, etc.).
Ça montre aussi que les mises à zéro des marges des <p> posent problème, si je comprends l'intention, la réduction devrait uniquement concerner la marge de bas du dernier <p>.
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a environ 7 ans
- Fichier 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch ajouté
- Fichier haute-goulaine.png haute-goulaine.png ajouté
Petit couac de ma part. C'est corrigé (exemple de haute-goulaine en pj).
Je réduis la marge à zéro du premier <p> de la cellule suivante pour les "coller" ensemble.
Mis à jour par Frédéric Péters il y a presque 7 ans
Ça montre aussi que les mises à zéro des marges des <p> posent problème, si je comprends l'intention, la réduction devrait uniquement concerner la marge de bas du dernier <p>.
Il me semble que ça reste d'application. On aurait par exemple une cellule de type texte, avec dedans plusieurs paragraphes, on n'a pas envie que les marges de tout ceux-ci soient altérées.
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a presque 7 ans
- Fichier 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch ajouté
En effet, juste le dernier paragraphe.
Mis à jour par Frédéric Péters il y a presque 7 ans
+ p:first-child { + margin-top: 0; + }
Là où ça vire le margin-top, et pareil pour le margin-bottom, le remplacer par un padding-top (resp. padding-bottom) pour que les textes ne se trouvent pas collés.
(et j'avais cru le noter mais il y a des espaces mal placés dans ce patch, après une première tabulation, git am le signale et git show les affiche).
Mis à jour par Frédéric Péters il y a presque 7 ans
- Fichier Capture d_écran de 2017-05-23 16-15-01.png Capture d_écran de 2017-05-23 16-15-01.png ajouté
- Fichier Capture d_écran de 2017-05-23 16-14-58.png Capture d_écran de 2017-05-23 16-14-58.png ajouté
Ça ne fonctionne pas, le padding-top: 1ex ajouté sur le + div se retrouve pris en compte dans de mauvaises situations. Cf deux captures, cellule de la colonne de droite, de l'espace se trouve ajouté au-dessus du lien "Téléformulaires".
Mis à jour par Frédéric Péters il y a presque 7 ans
(sur mon exemple, appliquer le padding-top sur le p:first-child fonctionne; je n'ai pas testé toutes les situations possibles)
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a presque 7 ans
les paragraphes de 2 cellules texte côte à côté sont trop écartés.
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a presque 7 ans
- Fichier 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch ajouté
- Fichier 3.png 3.png ajouté
Sans le padding sur le premier paragraphe de la cellule suivant la no-bottom-margin
ça m'a l'air ok.
Mis à jour par Frédéric Péters il y a presque 7 ans
Dans ma situation, cellule avec no-bottom-margin puis cellule texte avec deux paragraphes, le premier se trouve pris :first-child et donc margin-top: 0 et donc il est collé à la séparation horizontale de la cellule précédente.
Et donc à nouveau, sur mon exemple, appliquer le padding-top sur le p:first-child fonctionne; je n'ai pas testé toutes les situations possibles.
Le contre-exemple que tu donnes, c'est l'enchainement de deux cellules textes, les margin-bottom/top y étant remplacé par des padding-bottom/top, ceux-ci s'additionnent et il y a donc le double d'espace. Je serais à dire que cette situation d'ajout de deux cellules textes l'une sous l'autre est moins importante (après tout, il suffit de taper le tout dans une seule cellule) (le cas qui justifierait deux cellules serait des permissions différentes).
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a presque 7 ans
- Fichier 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch ajouté
Ok, passons l'exemple pas trop utile des 2 cellules text.
Et je propose qu'on s'arrêter là et si dans d'autres situations ça foire, on corrige.
Mis à jour par Frédéric Péters il y a presque 7 ans
- Fichier 0001-help-start-documentation-on-reusable-CSS-classes-161.patch 0001-help-start-documentation-on-reusable-CSS-classes-161.patch ajouté
Mon idée est de définir des noms de classes (documentées) [...]
Restait la partie "documentées" en souffrance, voici proposition d'une page, qu'on verra ensuite à intégrer sur le site de la documentation.
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a presque 7 ans
- Fichier 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch 0001-cells-add-styles-to-allow-no-bottom-margin-16147.patch ajouté
Ok, merci. Ton patch rajouté.
Mis à jour par Frédéric Péters il y a presque 7 ans
- Statut changé de Nouveau à Résolu (à déployer)
commit 46c9240c43f746590714bafdf450e68f4b311318 Author: Frédéric Péters <fpeters@entrouvert.com> Date: Wed May 24 20:24:00 2017 +0200 help: start documentation on reusable CSS classes (#16147) commit 721ff62f1b8374ed53d9108470936497d326c4fc Author: Serghei Mihai <smihai@entrouvert.com> Date: Wed May 3 17:47:18 2017 +0200 cells: add styles to allow no bottom margin (#16147)
Mis à jour par Serghei Mihai (congés, retour 15/05) il y a presque 7 ans
- Statut changé de Résolu (à déployer) à Fermé
cells: add styles to allow no bottom margin (#16147)