Projet

Général

Profil

Development #52336

nouveau system de grille en flexbox

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

Statut:
Fermé
Priorité:
Normal
Version cible:
-
Début:
24 mars 2021
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:
Non

Description

Développer un nouveau système de grille en flexbox, compatible IE11.

Ce système de grille pourra être utilisé
  • dans les composants/environnements où la grille "flaot" n'est pas utilisée (pas de remplacement iso fonctionnel possible, ni de possibilité de faire fonctionner les 2 en superpositions).
  • aussi bien par gadjo, wcs, que combo.
  • Dans un premier temps par la cellule fiche, puis par les cellules wysiwyg.

Fichiers

0001-CSS-new-grid-system-with-flexbox-52336.patch (3,26 ko) 0001-CSS-new-grid-system-with-flexbox-52336.patch Thomas Jund (congés, retour le 29/04), 25 mars 2021 12:54
0001-CSS-new-grid-system-with-flexbox-52336.patch (3,8 ko) 0001-CSS-new-grid-system-with-flexbox-52336.patch Thomas Jund (congés, retour le 29/04), 19 mai 2021 10:31
0001-scss-new-grid-system-with-flexbox-52336.patch (4,05 ko) 0001-scss-new-grid-system-with-flexbox-52336.patch Thomas Jund (congés, retour le 29/04), 01 juin 2021 15:40
0001-scss-new-grid-system-with-flexbox-52336.patch (3,65 ko) 0001-scss-new-grid-system-with-flexbox-52336.patch Thomas Jund (congés, retour le 29/04), 29 juin 2021 16:06
0001-scss-new-grid-system-with-flexbox-52336.patch (3,7 ko) 0001-scss-new-grid-system-with-flexbox-52336.patch Thomas Jund (congés, retour le 29/04), 29 juin 2021 16:11

Demandes liées

Lié à Combo - Development #52073: composition graphique grille ficheFermé16 mars 2021

Actions
Lié à Gadjo - Development #54488: CSS: Ajouter la grille flexboxFermé01 juin 2021

Actions
Lié à Intégrations graphiques Publik - Bug #54904: conflit selecteur entre .grid-* et fx-grid--*Fermé15 juin 2021

Actions

Révisions associées

Révision 74d2f137 (diff)
Ajouté par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans

scss: new grid system with flexbox (#52336)

Historique

#1

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

#2

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

  • Projet changé de Intégrations graphiques Publik à Publik
  • Club mis à Non
#3

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

Première proposition.

Différence par rapport à la grille en flaot :

  • La grille demande un wrapper (contrairement à la grille float actuelle)
  • Ajout d'un principe de grille auto basé sur la déclaration d'une taille minimal des cellules.
  • Ajout de la possibilité de déclarer la nombre de colonnes sur le container (plutôt que sur toutes les cellules)
  • Possible de déclarer la taille des cellules précisément pour chaque viewport

J'ai fait une vidéo de demo pour présenter l'idée.
https://perso.entrouvert.org/~tjund/fx-grid.mp4

Le code de demo est disponible : https://codepen.io/Sacripant/pen/mdRJqqX

Feedbacks welcome.

#4

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

  • Projet changé de Publik à Intégrations graphiques Publik
  • Club Non supprimé
#5

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

Rebase avec comme modif notable l'ajout du system de grille à gadjo via gadjo-extra.scss

#6

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

via gadjo-extra.scss

Intégrons plutôt directement dans gadjo.

#7

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

Intégrons plutôt directement dans gadjo.

Ça veut dire cloner le code et doubler la maintenance ?

#8

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

Les applications dépendent de gadjo, pas de publik-base-theme, s'il faut une seule copie c'est dans gadjo qu'elle doit être (ça veut sans doute y dire générer plusieurs fichiers css, pour ne pas amener vers le front du style de backoffice, etc.). (dupliquer est plus simple).

#9

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

suppression de l'import vers Gadjo et un peu de nettoyage. J'ouvre un ticket dans Gadjo pour l'ajout côté BO.

#10

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

#11

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

  • Lié à Bug #54904: conflit selecteur entre .grid-* et fx-grid--* ajouté
#12

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

Il y a dans le patch une modification inutile à static/includes/gadjo-extra.scss (ton éditeur est visiblement mal configuré quant aux lignes de fin de fichier).

$grid-mobile-limit: $very-small-limit !default;
$grid-tablet-limit: $mobile-limit !default;

Les noms laissent penser que ça s'appliquerait au système de grille actuel.

// Publik vars
...
// Private vars

Vu le Private dessous, au-dessus c'est sans doute Public qui est souhaité, pas Publik. Si ça a vocation à être public, ça devrait être documenté. Plus généralement sans doute à intégrer dans l'existant misc-grid.page, une présentation générale de ce système de grille alternatif.

Ou on considère qu'en fait ce n'est pas public, juste à usage interne pour le moment ?

#13

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

Il y a dans le patch une modification inutile à static/includes/gadjo-extra.scss

Merci

Les noms laissent penser que ça s'appliquerait au système de grille actuel.

Vrai, je préfixe.

Si ça a vocation à être public, ça devrait être documenté

Par `Publi k c` j'entends ce qui permet de paramétrer la grille. Par `private` ce qui est calculé automatiquement et utilisé dans la code, qu'il ne faut pas toucher (par de valeur par défaut).

Je me trompe peut-être encore, mais pour moi la doc se limite à ce qui reste paramétrable dans une logique de thème "natifs".
La grille n'est exploitable pour le moment que côté custom HTML : en ajoutant les class dans les templates; ou en CSS avec `@extend .fx-grid`. Ça demande donc de pouvoir gérer les conflits avec les CSS existants quand on applique ces class. On est encore loin de "je change une valeur de variable et 'pouf' ça marche, j'ai le résultat souhaité".
Elles pourraient donc apparaitre dans la doc, mais je trouvais ça prématuré. Trop technique ?

#14

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

Je pense que le propos est ici :

Si ça a vocation à être public, ça devrait être documenté.

Et qu'on n'a pas la même définition de "public", dans la tienne c'est un terme technique pour s'opposer à une variable calculée automatiquement, si je comprends bien. Je serais pour ne pas clasher ainsi les terminologies et que dans ton cas on ait alors quelque chose de cet ordre :

-// Public vars
+// Internal parameters variables
...
-// Private vars
+// Computed variables, they should not be redefined.
#15

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

patch avec

  • prefix `fx-grid` sur les vars `grid-*-limit`
  • sans modif inutile sur gadjo-extra.scss
#16

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

Et avec la modification des commentaires de variables proposé par Fred.

#17

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

(tu pourrais pousser ça vers la branche ?)

#19

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

  • Statut changé de Solution proposée à Solution validée
\ No newline at end of file

(il y a vraiment un truc d'éditeur à configurer, mais passons).

#21

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

Nécessite la validation de #54904 pour être fonctionnel.

#22

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

  • Statut changé de Solution validée à Résolu (à déployer)
commit 74d2f13747a2cae2764a88be1da1616e7402cfac
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Tue Jun 29 15:59:29 2021 +0200

    scss: new grid system with flexbox (#52336)
#23

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

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

Formats disponibles : Atom PDF