Development #62072
disposition en grille du contenu d'un placeholder
0%
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.
Files
Related issues
Associated revisions
misc: extend cell size options, use a dedicated widget (#62072)
History
Updated by Frédéric Péters over 1 year ago
- File 0001-general-add-possibily-to-layout-placeholder-cells-in.patch 0001-general-add-possibily-to-layout-placeholder-cells-in.patch added
- Status changed from Nouveau to Solution proposée
- Patch proposed changed from No to Yes
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
Updated by Thomas Jund over 1 year ago
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.
Updated by Frédéric Péters over 1 year ago
- Related to Development #62142: barre de défilement horizontal quand la grille flex est utilisée sur le contenu added
Updated by Frédéric Péters over 1 year ago
- File cell-size.png cell-size.png added
- File 0003-misc-extend-cell-size-options-use-a-dedicated-widget.patch 0003-misc-extend-cell-size-options-use-a-dedicated-widget.patch added
- File 0001-general-add-possibily-to-layout-placeholder-cells-in.patch 0001-general-add-possibily-to-layout-placeholder-cells-in.patch added
- File 0002-switch-manager-to-scss.patch 0002-switch-manager-to-scss.patch added
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).
Updated by Pierre Cros over 1 year ago
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".
Updated by Pierre Cros over 1 year ago
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).
Updated by Pierre Cros over 1 year ago
- Une colonne
- Deux colonnes
- Trois colonnes
- Automatique
C'est plus simple à comprendre qu'avec "Aucun".
Updated by Frédéric Péters over 1 year ago
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)
Updated by Pierre Cros over 1 year ago
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).
Updated by Frédéric Péters over 1 year ago
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".
Updated by Pierre Cros over 1 year ago
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".
Updated by Frédéric Péters over 1 year ago
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".
Updated by Pierre Cros over 1 year ago
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.
Updated by Frédéric Péters over 1 year ago
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.
Updated by Pierre Cros over 1 year ago
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.
Updated by Frédéric Péters over 1 year ago
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).
Updated by Thomas Jund over 1 year ago
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é.
Updated by Thomas Jund over 1 year ago
c'est "Automatique" qu'il faut gicler pour simplifier
Non, c'est automatique qu'il faut toujourtds préconiser
Updated by Thomas Jund over 1 year ago
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-*"
Updated by Thomas Jund over 1 year ago
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.
Updated by Frédéric Péters over 1 year ago
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.
Updated by Frédéric Péters about 1 year ago
- File 0001-general-add-possibily-to-layout-placeholder-cells-in.patch 0001-general-add-possibily-to-layout-placeholder-cells-in.patch added
- File 0002-misc-extend-cell-size-options-use-a-dedicated-widget.patch 0002-misc-extend-cell-size-options-use-a-dedicated-widget.patch added
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".
Updated by Frédéric Péters about 1 year ago
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 ?
Updated by Frédéric Péters about 1 year ago
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.
Updated by Lauréline Guérin about 1 year ago
- Status changed from Solution proposée to Solution validée
ok pour la relecture technique
Updated by Frédéric Péters about 1 year ago
- Status changed from Solution validée to 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)
Updated by Transition automatique about 1 year ago
- Status changed from Résolu (à déployer) to Solution déployée
general: add possibily to layout placeholder cells in flex grid (#62072)