Project

General

Profile

Development #62072

disposition en grille du contenu d'un placeholder

Added by Frédéric Péters (de retour le 27 mai) over 2 years ago. Updated about 2 years ago.

Status:
Fermé
Priority:
Normal
Target version:
-
Start date:
22 February 2022
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

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

0001-general-add-possibily-to-layout-placeholder-cells-in.patch (14.9 KB) 0001-general-add-possibily-to-layout-placeholder-cells-in.patch Frédéric Péters (de retour le 27 mai), 22 February 2022 04:15 PM
cell-size.png (25.6 KB) cell-size.png Frédéric Péters (de retour le 27 mai), 25 February 2022 09:46 AM
0003-misc-extend-cell-size-options-use-a-dedicated-widget.patch (5.83 KB) 0003-misc-extend-cell-size-options-use-a-dedicated-widget.patch Frédéric Péters (de retour le 27 mai), 25 February 2022 09:50 AM
0001-general-add-possibily-to-layout-placeholder-cells-in.patch (14.9 KB) 0001-general-add-possibily-to-layout-placeholder-cells-in.patch Frédéric Péters (de retour le 27 mai), 25 February 2022 09:50 AM
0002-switch-manager-to-scss.patch (1.31 KB) 0002-switch-manager-to-scss.patch Frédéric Péters (de retour le 27 mai), 25 February 2022 09:50 AM
0001-general-add-possibily-to-layout-placeholder-cells-in.patch (14.8 KB) 0001-general-add-possibily-to-layout-placeholder-cells-in.patch Frédéric Péters (de retour le 27 mai), 15 March 2022 09:43 AM
0002-misc-extend-cell-size-options-use-a-dedicated-widget.patch (5.83 KB) 0002-misc-extend-cell-size-options-use-a-dedicated-widget.patch Frédéric Péters (de retour le 27 mai), 15 March 2022 09:43 AM

Related issues

Related to Gadjo - Development #62142: barre de défilement horizontal quand la grille flex est utilisée sur le contenuFermé24 February 2022

Actions

Associated revisions

Revision 5b19cf11 (diff)
Added by Frédéric Péters (de retour le 27 mai) about 2 years ago

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

Revision 9da25d0f (diff)
Added by Frédéric Péters (de retour le 27 mai) about 2 years ago

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

History

#1

Updated by Frédéric Péters (de retour le 27 mai) over 2 years ago

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

Updated by Thomas Jund about 2 years 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.

#3

Updated by Frédéric Péters (de retour le 27 mai) about 2 years ago

  • Related to Development #62142: barre de défilement horizontal quand la grille flex est utilisée sur le contenu added
#4

Updated by Frédéric Péters (de retour le 27 mai) about 2 years ago

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

Updated by Pierre Cros about 2 years 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".

#6

Updated by Pierre Cros about 2 years 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).

#7

Updated by Pierre Cros about 2 years ago

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

Updated by Frédéric Péters (de retour le 27 mai) about 2 years 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)

#9

Updated by Pierre Cros about 2 years 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).

#10

Updated by Frédéric Péters (de retour le 27 mai) about 2 years 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".

#11

Updated by Pierre Cros about 2 years 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".

#12

Updated by Frédéric Péters (de retour le 27 mai) about 2 years 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".

#13

Updated by Pierre Cros about 2 years 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.

#14

Updated by Frédéric Péters (de retour le 27 mai) about 2 years 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.
#15

Updated by Pierre Cros about 2 years 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.

#16

Updated by Frédéric Péters (de retour le 27 mai) about 2 years 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).

#17

Updated by Thomas Jund about 2 years 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é.

#18

Updated by Thomas Jund about 2 years ago

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

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

#19

Updated by Thomas Jund about 2 years 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-*"

#20

Updated by Thomas Jund about 2 years 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.

#21

Updated by Frédéric Péters (de retour le 27 mai) about 2 years 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.

#22

Updated by Frédéric Péters (de retour le 27 mai) about 2 years ago

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

Updated by Frédéric Péters (de retour le 27 mai) about 2 years 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 ?

#24

Updated by Frédéric Péters (de retour le 27 mai) about 2 years ago

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

#25

Updated by Frédéric Péters (de retour le 27 mai) about 2 years 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.

#26

Updated by Lauréline Guérin about 2 years ago

  • Status changed from Solution proposée to Solution validée

ok pour la relecture technique

#27

Updated by Frédéric Péters (de retour le 27 mai) about 2 years 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)
#28

Updated by Transition automatique about 2 years ago

  • Status changed from Résolu (à déployer) to Solution déployée
#29

Updated by Transition automatique almost 2 years ago

Automatic expiration

Also available in: Atom PDF