Projet

Général

Profil

Development #62072

disposition en grille du contenu d'un placeholder

Ajouté par Frédéric Péters il y a environ 2 ans. Mis à jour il y a presque 2 ans.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Version cible:
-
Début:
22 février 2022
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:
Non

Description

Exploiter la grille "flex" et permettre de poser qu'un placeholder est en disposition grille (automatique ou autre) et quand c'est activé avoir la possibilité sur les cellules de donner la taille souhaitée.


Fichiers


Demandes liées

Lié à Gadjo - Development #62142: barre de défilement horizontal quand la grille flex est utilisée sur le contenuFermé24 février 2022

Actions

Révisions associées

Révision 5b19cf11 (diff)
Ajouté par Frédéric Péters il y a environ 2 ans

general: add possibily to layout placeholder cells in flex grid (#62072)

Révision 9da25d0f (diff)
Ajouté par Frédéric Péters il y a environ 2 ans

misc: extend cell size options, use a dedicated widget (#62072)

Historique

#1

Mis à jour par Frédéric Péters il y a environ 2 ans

Ajout d'un jsonfield "placeholder_options" sur les pages, et popup pour choisir d'activer le mode grille, avec les mêmes options que sur les cellules "contenu d'une fiche" (automatique, deux colonnes, trois colonnes).

Sur base de cette info, ajout d'un <div class="fx-..."> autour des cellules de placeholder. Quand il n'y a pas de mode grille activé, pas de <div> supplémentaire, pour assurer un max la compatibilité avec les sélecteurs existants (genre qui feraient #content > div.textcell).

Ensuite pour ajouter une info "taille" sur les cellules j'ai fait une première version qui ajoutait simplement un champ au modèle puis j'ai trouvé ça lourd d'avoir 50 migrations (1 par cellule) et le stockage se fait donc plutôt dans le champ extra_css_class. C'est là qu'est le code délicat de ce patch, modelform_factory avec une classe custom qui sépare/joint l'info du vrai champ du modèle (extra_css_class) et ajoute un champ qui n'est pas du modèle (fx_size).

Pour les tailles,

      ('size--1-1', '1/1'),
      ('size--t1-2', '1/2'),
      ('size--t1-3', '1/3'),

j'ai aussi repris ce qui était dans la cellule "contenu d'une fiche".

J'ai fait ça sans bien comprendre les subtilités dans fx-grid.scss.

Aussi, ça donne une barre de scroll horizontal, il y a quelque chose qui déborde, ticket à faire côté gadjo.

https://perso.entrouvert.org/~fred/tmp/62072-placeholder-grid.webm

#2

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

Pouvoir poser des options sur un placeholder est une superbe idée
Passer à la grille flex aussi.
Je vais tester pour cette histoire de scrollbar
Je pointe juste le fait que la grille float est incompatible avec la grille flex.
Si les cellules deviennent des flex-childs, alors les options de grille float via class posées dessus ne fonctionneront plus.

#3

Mis à jour par Frédéric Péters il y a environ 2 ans

  • Lié à Development #62142: barre de défilement horizontal quand la grille flex est utilisée sur le contenu ajouté
#4

Mis à jour par Frédéric Péters il y a environ 2 ans

Pour davantage d'options (j'aurais utilisé d'une largeur d'¼ pour boussu, et pour le portail famille il y a dans l'utilisation grille actuelle encore plus petit), j'ai voulu étendre la liste pour aller jusque ⅙ mais ça commençait à faire un long <select> et pas nécessairement super parlant.

Proposition d'affichage différent, cf capture.

(en passant ça fait un commit intermédiaire pour basculer de css à scss).

#5

Mis à jour par Pierre Cros il y a environ 2 ans

Quelle est la différence entre "aucun" et "automatique" ? Dans ta vidéo, on a l'impression qu'il faut positionner le "Grid Layout" du placeholder sur automatique pour pouvoir jouer avec la taille des cellules ensuite. Si c'est bien le cas, je ne vois pas à quoi sert "aucun".

#6

Mis à jour par Pierre Cros il y a environ 2 ans

J'ai re-regardé et compris.

Automatique va mettre les cellules côte à côte si rien n'est précisé niveau taille pour chaque cellule. On pourrait débattre du fait que ce soit le comportement par défaut, peut-être, pour simplifier l'usage (mais ce serait sans doute pas terrible pour l'existant, certainement à oublier).

#7

Mis à jour par Pierre Cros il y a environ 2 ans

Mais même en conservant le fonctionnement montré par la vidéo, je suis d'avis d'avoir dans le menu :
  • Une colonne
  • Deux colonnes
  • Trois colonnes
  • Automatique

C'est plus simple à comprendre qu'avec "Aucun".

#8

Mis à jour par Frédéric Péters il y a environ 2 ans

On ne pourra pas ne pas avoir "Aucun" (ça détruirait gentiment tous les sites où une classe grid- a été utilisée sur une cellule). On peut y mettre un libellé différent (type "legacy"). Il y a également de la place pour écrire quelques explications.

Très certainement on ne voudrait pas "Automatique" par défaut, mais "Une colonne".

(pour mémoire c'est le système de grille utilisé pour la cellule "contenu d'une fiche", #57459#note-3)

#9

Mis à jour par Pierre Cros il y a environ 2 ans

Pierre Cros (absent jusqu'au 25/02) a écrit :

Mais même en conservant le fonctionnement montré par la vidéo, je suis d'avis d'avoir dans le menu :
  • Une colonne
  • Deux colonnes
  • Trois colonnes
  • Automatique

J'ai écrit ça avec l'idée que "Une colonne" = "Aucun", c'est juste un changement de libellé et du coup il n'y a pas de soucis pour moi.

(et je vois que c'est exactement ce qu'il y a dans la cellule "contenu d'une fiche, si ce n'est que "automatique" est au début et qu'il devrait être à la fin si "une colonne" est le défaut).

#10

Mis à jour par Frédéric Péters il y a environ 2 ans

J'ai écrit ça avec l'idée que "Une colonne" = "Aucun", c'est juste un changement de libellé et du coup il n'y a pas de soucis pour moi.

"Une colonne" ce n'est pas "Ancun".

"Aucun" = "continuer à laisser les dispositions actuelles utilisant des classes grid- fonctionner"

"Une colonne", et les autres options = "leur éclater la gueule".

#11

Mis à jour par Pierre Cros il y a environ 2 ans

Dans ta vidéo, "une colonne" n'existe pas.

Ma proposition, comme tu l'as compris, c'est supprimer aucun et
"une colonne" = "continuer à laisser les dispositions actuelles utilisant des classes grid- fonctionner".

Ça heurte peut-être ta logique mais ça rend la chose bien plus facile à comprendre pour moi qu'avec "aucun".

#12

Mis à jour par Frédéric Péters il y a environ 2 ans

Dans ta vidéo, "une colonne" n'existe pas.

Ok déso ça manquait au moment de la vidéo, je m'en suis rendu compte après à l'usage et c'est dans le code depuis.

"une colonne" = "continuer à laisser les dispositions actuelles utilisant des classes grid- fonctionner".
Ça heurte peut-être ta logique mais ça rend la chose bien plus facile à comprendre pour moi qu'avec "aucun".

Mais j'ai donc compris maintenant que ta suggestion ne porte donc pas comme je l'entendais sur la suppression du choix "aucun" mais sur renommer "aucun" en "une colonne", ce que je ne captais pas vu que dans le code "1 colonne" existait déjà pour dire autre chose.

Pour moi on perd une option utile : le moment où dans une page linéaire on veut poser deux cellules côte à côte, devoir mettre "deux colonnes" (versus "une colonne grille mon option qui n'apparaissait pas dans la vidéo"), ça veut dire devoir passer sur toutes les cellules pour leur dire "non non toi tu prends toute la largeur".

#13

Mis à jour par Pierre Cros il y a environ 2 ans

Si tu juges l'option utile, j'imagine que c'est parce qu'elle t'as déjà été utile pour de vrai. Ta définition de "Une colonne" ça revient à mettre un grid-1-1 sur chaque cellule du placeholder (qui n'a pas déjà un grid), c'est bien ça ?

Mon sentiment c'est que si je veux, au sein d'un même placeholder, que certaines cellules occupent la moitié de la largeur et d'autres la totalité, je vais de toute façon être obligé d'intervenir sur certaines cellules, avec ou sans cette option.

#14

Mis à jour par Frédéric Péters il y a environ 2 ans

Ta définition de "Une colonne" ça revient à mettre un grid-1-1 sur chaque cellule du placeholder (qui n'a pas déjà un grid), c'est bien ça ?

En terme d'effet et en se référant au système grid, oui. (techniquement c'est tout différent).

~~

Mon sentiment c'est que si je veux, au sein d'un même placeholder, que certaines cellules occupent la moitié de la largeur et d'autres la totalité, je vais de toute façon être obligé d'intervenir sur certaines cellules, avec ou sans cette option.

Mettons une configuration avec déjà 4 cellules, elles viennent l'une sous l'autre, normal.

Je veux maintenant ajouter deux cellules côte à côte.

Si je peux choisir une option "une colonne", je fais ça, puis sur mes deux nouvelles cellules je choisis "largeur 50%".

Si je ne peux pas, je choisis l'option "deux colonnes", et je vais modifier les cellules qui étaient déjà là pour choisir "largeur 100%".

~~

Pour tenter un récap des options

  • Automatique : les cellules vont venir se mettre les unes à côte des autres en fonction de la largeur de leurs contenus (perso pas fan)
  • Trois colonnes : les cellules vont venir se mettre les unes à côté des autres chacune sur ⅓ de la largeur (par défaut)
  • Deux colonnes : la même mais ½ de la largeur
  • Une colonne : pareil mais sur toute la largeur ce qui fait en fait que ça se met les unes sous les autres plutôt que côte à côte
  • Manuel : le mode actuel qui n'active pas la disposition en grille, qui laisse les classes grid- actuellement posées fonctionner, et ne permet pas la nouvelle option de sélection de largeur de cellule.
#15

Mis à jour par Pierre Cros il y a environ 2 ans

Merci pour l'effort de clarification et on va arriver à un accord tous les deux déjà (avec ce "Manuel" qui est bien plus explicite que "aucun") : c'est "Automatique" qu'il faut gicler pour simplifier.

  • Manuel (en premier parce que c'est la valeur par défaut)
  • 1 colonne
  • 2 colonnes
  • 3 colonnes

C'est très bien. Mais j'ai conscience qu'il faudrait être cohérent avec ce que propose la cellule "contenu d'une fiche". Mon opinion serait d'y faire la même chose.

#16

Mis à jour par Frédéric Péters il y a environ 2 ans

J'ai écrit manuel sans faire exprès je voulais écrire "aucun"... mais ça s'entend quand même (manuel = aller écrire manuellement des classes grid sur les cellules). Je vais adapter le patch en ce sens.

~~~

Pour "contenu d'une fiche" on est sur une situation un peu différente quand même, surtout parce qu'on n'y a pas d'historique de classes "grid-". (reste "y enlever le «automatique»", c'est un peu mon #57459#note-3 je l'y laisse et reviendrai).

#17

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

Même si "aucun" et "1 colonne" parait revenir au même au niveau du placeholder, cela active 2 modes différents au niveau des cellules.
"1 colonne" active le mode "grille flex" et permet d'afficher le select de choix de taille sur les cellules individuellement (et donc de donner des tailles specifiques à chaques cellules.
"Aucun" ne permet pas d'avoir le choix des tailles de cellule via l'UI, mais permet de conserver la compatibilité avec la grille float existante.

Pour davantage d'options

Pourquoi pas mais attention, c'est pas évident de multiplier les options et être propre en responsive (surtout avec un $grid-mobile-limit à 601 et un $very-small-limit à 401).
4 colonnes par ex à 401px et + de viewport (avec une option *--t4, bof). (après, la grille flex forcera un passage à la ligne pour éviter un overflow, mais bof quand même).
Utiliser le mode "auto" pour cela, quit à optimiser la valeur de largeur minimum pour les cellules et qui peut être modifiée plus simplment que les breakpoints, me semble toujours plus approprié.

#18

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

c'est "Automatique" qu'il faut gicler pour simplifier

Non, c'est automatique qu'il faut toujourtds préconiser

#19

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

ET il ne plus écrire manuellement des class grid une fois ce patch en place. Donc plûtot un mode "legacy" pour décourager les class "grid-*"

#20

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

Automatique : les cellules vont venir se mettre les unes à côte des autres en fonction de la largeur de leurs contenus (perso pas fan)

Non , ce n'est pas en fonction de la largeur de leur contenu, mais d'une valeur "min-width", qui est à '10em' pour le moment parce que cellule de grille pour les fiches. Cette valeur doit être adapté pour des cellules de combo pour fonctionner correctement.
ET encore une fois, ce sera toujours ce qu'il y a des plus propre en responsive, quel que soit le viewport.

#21

Mis à jour par Frédéric Péters il y a environ 2 ans

Ma proposition est d'avancer en présentant des options intelligibles; aujourd'hui "automatique" peut être techniquement très utile mais en terme de charge explicative qu'elle amène, c'est vraiment pas top.

#22

Mis à jour par Frédéric Péters il y a environ 2 ans

Voilà avec #62072#note-15 (manuel (=legacy), 1 colonne, 2 colonnes, 3 colonnes).

Il n'y a aujourd'hui pas d'option "automatique" parce que ça n'est pas encore assez intelligible, je suis vraiment pour qu'on intègre sans, et qu'il soit réfléchi ailleurs à la manière de présenter ce que fait "automatique".

#23

Mis à jour par Frédéric Péters il y a environ 2 ans

J'écrivais :

Il n'y a aujourd'hui pas d'option "automatique" parce que ça n'est pas encore assez intelligible, je suis vraiment pour qu'on intègre sans, et qu'il soit réfléchi ailleurs à la manière de présenter ce que fait "automatique".

J'aimerais qu'on avance là-dessus; on est d'accord avec ça et la question est maintenant la relecture python ?

#24

Mis à jour par Frédéric Péters il y a environ 2 ans

Thomas, j'aimerais vraiment qu'on avance ici.

#25

Mis à jour par Frédéric Péters il y a environ 2 ans

J'ai actualisé la branche, nouveau numéro de migration, onglets sur l'édition des cellules, django 3.2; je souhaiterais que ça puisse intégrer le prochain cycle, relecture etc.

#26

Mis à jour par Lauréline Guérin il y a presque 2 ans

  • Statut changé de Solution proposée à Solution validée

ok pour la relecture technique

#27

Mis à jour par Frédéric Péters il y a presque 2 ans

  • Statut changé de Solution validée à Résolu (à déployer)
commit 9da25d0f8cf3f9b96a1793171de68e92b89384f7
Author: Frédéric Péters <fpeters@entrouvert.com>
Date:   Thu Feb 24 15:28:37 2022 +0100

    misc: extend cell size options, use a dedicated widget (#62072)

commit 5b19cf111316f028693e15d0fd1571196078c8a8
Author: Frédéric Péters <fpeters@entrouvert.com>
Date:   Tue Feb 22 14:20:35 2022 +0100

    general: add possibily to layout placeholder cells in flex grid (#62072)
#28

Mis à jour par Transition automatique il y a presque 2 ans

  • Statut changé de Résolu (à déployer) à Solution déployée
#29

Mis à jour par Transition automatique il y a presque 2 ans

Automatic expiration

Formats disponibles : Atom PDF