Project

General

Profile

Development #41741

valeur pour $cell-image-position pour positionner l'image à gauche du titre

Added by Frédéric Péters 3 months ago. Updated 2 months ago.

Status:
En cours
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
15 Apr 2020
Due date:
% Done:

0%

Patch proposed:
Yes
Planning:
No

Description

On peut avoir l'image au-dessus ou en-dessous mais pour une image qui relève plus de l'icône que de la photographie, on voudrait l'avoir à gauche du titre.

(exemple dans #41720)

(ça veut sans doute aussi dire une autre variable pour exprimer l'espace horizontal alloué).

0001-scss-allow-left-cell-image-position-41741.patch View (3.85 KB) Serghei Mihai, 16 Apr 2020 03:05 PM

left-of-title.png View (449 KB) Serghei Mihai, 16 Apr 2020 03:07 PM

43575

Related issues

Related to Intégrations graphiques Publik - Development #41720: thème pour le département de la Dordogne Solution déployée 14 Apr 2020
Related to Combo - Development #41994: Ajouter une class à la cellule si elle possède une image Fermé 22 Apr 2020
Related to Combo - Development #41995: inclure classe css pour indiquer qu'une cellule a des ressources associées Solution déployée 22 Apr 2020
Related to Intégrations graphiques Publik - Development #42842: Appliquer styles de position de l'image d'une cell seulement s'il y a une image Solution déployée 13 May 2020

History

#1 Updated by Frédéric Péters 3 months ago

#2 Updated by Serghei Mihai 3 months ago

43575

Proposition de nom left-of-title.

Et une autre variable qui définit la largeur de l'image et décale le titre pour afficher proprement l'image.
En capture ce que ça donne sur l'intégration de la Dordogne.

#3 Updated by Thomas Jund 3 months ago

position: absolute;
top: $cell-image-padding / 2;

Je n'ai pas testé mais le positionnement absolute est très limité. il fonctionne dans ton exemple où ton icon est sur fond transparent et ton titre sur 1 seule ligne

  • Si le titre de la cellule passe sur 2 lignes peux-tu positionner l'image centré verticalement par rapport au titre ?
  • Si l'icon est sur fond de couleur, sa hauteur peut-elle s'adapter automatiquement à la hauteur du titre (s'il est sur 1 ou 2 lignes) ‑ equivalent de stretch en flexbox ?
  • Je n'ai pas compris la valeur du positionnement top ?
padding-left: $cell-image-width + 5px;

5px ? pourquoi ?

Il faudrait voir le comportement de cette option avec une image (pas un svg sur fond transparent) et un titre sur fond de couleur.

#4 Updated by Serghei Mihai 3 months ago

Thomas Jund a écrit :

[...]

Je n'ai pas testé mais le positionnement absolute est très limité. il fonctionne dans ton exemple où ton icon est sur fond transparent et ton titre sur 1 seule ligne

cell-image-padding assure que l'image reste à l'intérieur du titre.

  • Si le titre de la cellule passe sur 2 lignes peux-tu positionner l'image centré verticalement par rapport au titre ?

Actuellement non, car position: absolute.

  • Si l'icon est sur fond de couleur, sa hauteur peut-elle s'adapter automatiquement à la hauteur du titre (s'il est sur 1 ou 2 lignes) ‑ equivalent de stretch en flexbox ?

Tu veux dire déformer l'image? L'agrandir proportionnellement fera augmenter la largeur on peut se trouver sur une page avec certains titres alignés et d'autres non.

  • Je n'ai pas compris la valeur du positionnement top ?

C'est une tentative d'aligner l'image verticalement au niveau du titre. Le top + le padding de l'image font qu'elle s'aligne "presque" au même niveau que le h2.

5px ? pourquoi ?

Car il faut avoir plus d'espace entre l'image et le titre, pas uniquement le padding de l'image. Mais le padding pourrait suffire.

Il faudrait voir le comportement de cette option avec une image (pas un svg sur fond transparent) et un titre sur fond de couleur.

Je fais des tests en local avec différentes variantes.

#5 Updated by Thomas Jund 3 months ago

Actuellement non, car position: absolute.

C'est pourquoi je suis septique sur l'utilisation de ce type de positionnement pour le core. Sur un thème, parce que l'on arrive à juger des cas d'utilisation et du type des images, pourquoi pas. Mais pas pour le core.

C'est une tentative d'aligner l'image verticalement au niveau du titre. Le top + le padding de l'image font qu'elle s'aligne "presque" au même niveau que le h2.

Trop imprecis, aléatoire, ça dépend du $font-size, line-height, padding du titre. Fixer une valeur dans le core est contre-productif à mon avis.

Car il faut avoir plus d'espace entre l'image et le titre, pas uniquement le padding de l'image. Mais le padding pourrait suffire.

Je questionnais par rapport au chiffre 5, Pourquoi pas 7 ou 3 ? Trop irrationnel pour le core.

Personnellement, je partirais sur un vrai system de layout (flexbox pour ne pas le nommer, le seul qu'on peut utiliser pour le moment). Un system qui offre de la souplesse pour des adaptations et divers besoins, et surtout ne pas proposer une option figée non ou peu adaptable.

Pour moi la solution la plus propre est d'ajouter une balise HTML 'cell header' qui possède la balise titre ET l'image.
Avec ce markup on a vraiment de la souplesse dans les layouts entre le titre et l'image puisqu'on a une boite englobante de référence.

Si pas possible de modifier le markup, les tests que j'ai fait avec flexbox en mode multi-lignes offrent déjà bien plus plus de souplesse que le positionnement absolute.

#6 Updated by Pierre Cros 3 months ago

En tout cas je sais pas qui il faut féliciter mais je trouve l'intégration très réussie (la capture quoi au moins).

#7 Updated by Serghei Mihai 3 months ago

  • Status changed from Solution proposée to En cours

Thomas Jund a écrit :

Je questionnais par rapport au chiffre 5, Pourquoi pas 7 ou 3 ? Trop irrationnel pour le core.

J'ai fait n'importe quoi.

Pour moi la solution la plus propre est d'ajouter une balise HTML 'cell header' qui possède la balise titre ET l'image.
Avec ce markup on a vraiment de la souplesse dans les layouts entre le titre et l'image puisqu'on a une boite englobante de référence.

Je te rejoins ici: le titre et l'image doivent être dans un bloc séparé de la liste des liens pour pouvoir agir sur le positionnement des éléments sans impacter la liste.
Mais cela ne sera pas sans impact sur l'existant, il faut le faire progressivement.

#9 Updated by Thomas Jund 3 months ago

Autre note pour alimenter ce débat:
Il n'y pour le moment aucun moyen de savoir côté CSS si une cellule possède une image ou pas. Aucune class n'est ajouté à la cellule.

Cela signifie déjà que lorsque l'option `$cell-image-position: top` est appliqué, les styles modificateurs sont appliqués dans tout les cas, même si la cellule n'a pas d'image. Sans grande conséquence pour le moment, mais conséquences possible avec cette nouvelle option.

Et pouvoir conditionner le design en fonction de la présence ou non d'une image serait un plus.

#10 Updated by Thomas Jund 3 months ago

  • Related to Development #41994: Ajouter une class à la cellule si elle possède une image added

#12 Updated by Frédéric Péters 3 months ago

  • Related to Development #41995: inclure classe css pour indiquer qu'une cellule a des ressources associées added

#13 Updated by Thomas Jund 2 months ago

Pour moi la solution la plus propre est d'ajouter une balise HTML 'cell header' qui possède la balise titre ET l'image.

Par rapport à cette idée, je viens de me rendre compte qu'avec une image en mode défaut (donc sous le titre), si une cellule a l'option 'foldable', l'image est masquée lorsque le contenu de la cellule est masquée.

Je ne comprends pas trop le pourquoi de ce fonctionnement, l'utilisation d'une image a pour objectif de facilité l'identification des catégories ou du moins d'illustrer le titre, si elle est masquée qu'elle est son intérêt ?

Néanmoins, s'il est important de conserver ce fonctionnement, l'idée d'ajouter une balise `cell_header` pour encadrer l'image et le titre devient caduque.

#14 Updated by Serghei Mihai 2 months ago

Thomas Jund a écrit :

Je ne comprends pas trop le pourquoi de ce fonctionnement, l'utilisation d'une image a pour objectif de facilité l'identification des catégories ou du moins d'illustrer le titre, si elle est masquée qu'elle est son intérêt ?

IMO, tu as raison. On devrait afficher l'image systèmatiquement.

#15 Updated by Thomas Jund about 2 months ago

  • Related to Development #42842: Appliquer styles de position de l'image d'une cell seulement s'il y a une image added

Also available in: Atom PDF