Project

General

Profile

Bug #36765

Affichage des étapes d'une démarche

Added by Frédéric Péters 8 months ago. Updated 6 months ago.

Status:
Solution déployée
Priority:
Normal
Assignee:
Target version:
-
Start date:
08 Oct 2019
Due date:
% Done:

0%

Patch proposed:
Yes
Planning:
No

Description

Ticket général pour différentes directions,

  • côté code, le fonctionnement date d'un temps où les media queries n'étaient pas prises en charge partout, la conséquence a été que le rendu mobile doit poser quantités de propriétés pour défaire le rendu desktop; faire évoluer ça permettrait de combiner des options de rendu;
  • côté rendu, ça peut varier assez d'intégration en intégration mais il n'y presque pas de paramétrage global, il y a juste $form-sidebar-position (left/right/top) et $responsive-steps (horizontal, ou none/whatever, horizontal est le seul rendu "mobile" existant);
    • mon idée serait décomposer et standardiser les variations, pour obtenir par exemple :
      • $form-steps-direction: horizontal / vertical;
      • $form-steps-mode: blocks / discs / metro / whatever; // #14143 est un ticket qui demande des disques
      • $form-steps-collapse: false / true; // l'idée ici c'est de ne plus afficher toutes les étapes mais à la place un compteur et le nom de l'étape courante (c'est quelque chose qui se trouve aujourd'hui à Toulouse/Lille, avec actuellement un balisage différent, voir ce qui pourrait être adapté).
      • $form-steps-hide-when-single: false / true; // l'idée ici étant #26730.
    • et pareille granularité pour le mobile, $mobile-form-steps-direction, etc.

Le gabarit par défaut est wcs/templates/wcs/formdata_steps.html (dans le dépôt w.c.s.), il y a moyen de l'adapter dans une version dans publik-base-theme, qui serait templates/wcs/front/formdata_steps.html ("front" pour toucher uniquement le rendu frontoffice).

0001-core-refactorisation-of-wcs-steps-component-36765.patch View (37.8 KB) Thomas Jund, 16 Nov 2019 06:55 PM

0004-alpes-maritimes-2018-updates-steps-36765.patch View (3.16 KB) Thomas Jund, 16 Nov 2019 06:55 PM

0005-blois-2018-updates-steps-36765.patch View (1.34 KB) Thomas Jund, 16 Nov 2019 06:55 PM

0006-arles-updates-steps-36765.patch View (1.59 KB) Thomas Jund, 16 Nov 2019 06:55 PM

0007-amiens-metropole-update-steps-36765.patch View (5.83 KB) Thomas Jund, 16 Nov 2019 06:55 PM

0008-arpagon-update-steps-36765.patch View (730 Bytes) Thomas Jund, 16 Nov 2019 06:55 PM

0009-auch-update-steps-36765.patch View (601 Bytes) Thomas Jund, 16 Nov 2019 06:55 PM

0010-cnil-update-steps-36765.patch View (3.13 KB) Thomas Jund, 16 Nov 2019 06:55 PM

0050-help-write-steps-doc-36765.patch View (7.22 KB) Thomas Jund, 16 Nov 2019 06:59 PM

0001-core-refactorisation-of-wcs-steps-component-36765.patch View (14.6 KB) Thomas Jund, 18 Nov 2019 03:08 PM

0001-help-write-steps-doc-36765.patch View (7.23 KB) Thomas Jund, 18 Nov 2019 03:49 PM

0001-grand-chambery-update-steps-36765.patch View (3.07 KB) Thomas Jund, 18 Nov 2019 05:24 PM

0001-core-refactorisation-of-wcs-steps-component-36765.patch View (21.7 KB) Thomas Jund, 18 Nov 2019 05:37 PM

gorges-mobile.png View (89.6 KB) Frédéric Péters, 19 Nov 2019 11:48 AM

gorges-steps-modified.png View (69.7 KB) Thomas Jund, 19 Nov 2019 12:44 PM

0001-villeurbanne-2018-reduce-margins-around-steps.patch View (814 Bytes) Serghei Mihai, 19 Nov 2019 02:35 PM

0001-grenoble-metropole-2019-center-form-steps-in-mobile.patch View (1.03 KB) Serghei Mihai, 19 Nov 2019 03:18 PM

0001-arles-keep-active-step-text-color.patch View (679 Bytes) Serghei Mihai, 19 Nov 2019 03:54 PM

0001-publik-base-theme-update-steps-36765.patch View (4.29 KB) Thomas Jund, 19 Nov 2019 04:05 PM

0001-arles-updates-steps-36765.patch View (1.67 KB) Thomas Jund, 20 Nov 2019 11:14 AM

0001-core-refactorisation-of-wcs-steps-component-36765.patch View (21.9 KB) Thomas Jund, 20 Nov 2019 11:14 AM

0001-grenoble-metropole-2019-update-steps-36765.patch View (4.09 KB) Thomas Jund, 20 Nov 2019 11:14 AM

0001-villeurbanne-2018-update-steps-36765.patch View (2.63 KB) Thomas Jund, 20 Nov 2019 11:14 AM

0001-avray-update-steps-36765.patch View (1.96 KB) Thomas Jund, 21 Nov 2019 04:13 PM

0002-coprec-update-steps-36765.patch View (1.46 KB) Thomas Jund, 21 Nov 2019 04:13 PM

0003-malakoff-update-steps-36765.patch View (1.42 KB) Thomas Jund, 21 Nov 2019 04:13 PM

0004-concarneau-update-steps-36765.patch View (5.22 KB) Thomas Jund, 21 Nov 2019 04:13 PM

0001-alpes-maritimes-2018-updates-steps-36765.patch View (3.19 KB) Thomas Jund, 21 Nov 2019 06:11 PM

0001-amiens-metropole-update-steps-36765.patch View (6.19 KB) Thomas Jund, 21 Nov 2019 06:11 PM

0001-castelnau-le-lez-update-steps-36765.patch View (1.18 KB) Thomas Jund, 21 Nov 2019 06:11 PM

0001-fondettes-update-steps-36765.patch View (785 Bytes) Thomas Jund, 22 Nov 2019 04:48 PM

0001-metz-metropole-2019-update-steps-36765.patch View (4.47 KB) Thomas Jund, 22 Nov 2019 04:48 PM

0001-meyzieu-2018-update-steps-36765.patch View (3.38 KB) Thomas Jund, 22 Nov 2019 04:48 PM

0001-montlouis-sur-loire-update-steps-36765.patch View (2 KB) Thomas Jund, 22 Nov 2019 04:48 PM

0002-meaux-update-steps-36765.patch View (752 Bytes) Thomas Jund, 22 Nov 2019 04:48 PM

0003-nanterre-update-steps-36765.patch View (1.09 KB) Thomas Jund, 22 Nov 2019 04:48 PM

0001-castries-update-steps-36765.patch View (637 Bytes) Thomas Jund, 26 Nov 2019 03:54 PM

0001-publik-update-steps-36765.patch View (2.98 KB) Thomas Jund, 26 Nov 2019 03:54 PM

0001-core-refactorisation-of-wcs-steps-component-36765.patch View (22.4 KB) Thomas Jund, 26 Nov 2019 03:54 PM

0001-quimper-update-steps-36765.patch View (3.56 KB) Thomas Jund, 26 Nov 2019 03:54 PM

0001-saint-lo-agglo-update-steps-36765.patch View (703 Bytes) Thomas Jund, 26 Nov 2019 03:54 PM

0001-seine-et-marne-apa-updates-steps-36765.patch View (1.92 KB) Thomas Jund, 26 Nov 2019 03:54 PM

0001-strasbourg-2018-update-steps-36765.patch View (3.08 KB) Thomas Jund, 26 Nov 2019 03:54 PM

0001-toodego-update-steps-36765.patch View (3.26 KB) Thomas Jund, 26 Nov 2019 03:54 PM

0001-grand-chambery-update-steps-36765.patch View (3.14 KB) Thomas Jund, 27 Nov 2019 11:24 AM

0001-lille-metropole-update-steps-36765.patch View (1.16 KB) Thomas Jund, 27 Nov 2019 11:24 AM

0001-SCSS-All-custom-themes-header-is-now-.site-header-36.patch View (10.6 KB) Thomas Jund, 27 Nov 2019 11:24 AM

0001-core-refactorisation-of-wcs-steps-component-36765.patch View (22.5 KB) Thomas Jund, 27 Nov 2019 04:49 PM

0001-fontenay-sous-bois-update-steps-36765.patch View (4.13 KB) Thomas Jund, 27 Nov 2019 04:49 PM

0001-roannais-agglomeration-update-steps-36765.patch View (2.34 KB) Thomas Jund, 27 Nov 2019 04:49 PM

0001-saint-chamond-update-steps-36765.patch View (2.26 KB) Thomas Jund, 27 Nov 2019 04:49 PM

0001-strasbourg-2018-update-steps-36765.patch View (905 Bytes) Thomas Jund, 27 Nov 2019 04:49 PM

0001-toulouse-metropole-update-steps-36765.patch View (1.6 KB) Thomas Jund, 27 Nov 2019 04:49 PM

0001-toulouse-update-steps-36765.patch View (2.16 KB) Thomas Jund, 27 Nov 2019 04:49 PM

0001-fontenay-sous-bois-2018-update-steps-36765.patch View (4.4 KB) Thomas Jund, 29 Nov 2019 11:50 AM

0001-scss-use-.site-header-class-name-to-refer-to-site-he.patch View (11.2 KB) Thomas Jund, 29 Nov 2019 11:50 AM

0001-fontenay-sous-bois-2018-update-steps-36765.patch View (4.42 KB) Thomas Jund, 02 Dec 2019 02:09 PM

39070
39073

Related issues

Related to Intégrations graphiques Publik - Development #14143: Améliorer le graphisme des étapes sur les pages de formulaires Rejeté 29 Nov 2016
Related to Intégrations graphiques Publik - Development #26730: quand une seule étape serait affichée, ne pas afficher les étapes Fermé 25 Sep 2018

Associated revisions

Revision b144e00e (diff)
Added by Thomas Jund 6 months ago

core: refactorisation of wcs steps component (#36765)

Revision ecccf980 (diff)
Added by Thomas Jund 6 months ago

scss: use '.site-header' class name to refer to site header (#36765)

Commit messages are not applicable!
(╯°□°)╯︵ ┻━┻

Revision 190bd35d (diff)
Added by Thomas Jund 6 months ago

alfortville: update steps (#36765)

Revision e34d8e62 (diff)
Added by Thomas Jund 6 months ago

alpes-maritimes-2018: updates steps (#36765)

Revision e6031742 (diff)
Added by Thomas Jund 6 months ago

blois-2018: updates steps (#36765)

Revision 1bc705e7 (diff)
Added by Thomas Jund 6 months ago

arles: updates steps (#36765)

Revision e41fce8f (diff)
Added by Thomas Jund 6 months ago

amiens-metropole: update steps (#36765)

Revision 664f9a47 (diff)
Added by Thomas Jund 6 months ago

arpagon: update steps (#36765)

Revision 501a874b (diff)
Added by Thomas Jund 6 months ago

auch: update steps (#36765)

Revision f89b1091 (diff)
Added by Thomas Jund 6 months ago

cnil: update steps (#36765)

Revision 099d929c (diff)
Added by Thomas Jund 6 months ago

chateauroux: update steps (#36765)

Revision eb70183c (diff)
Added by Thomas Jund 6 months ago

clapiers: update steps (#36765)

Revision 840f5117 (diff)
Added by Thomas Jund 6 months ago

clermont-metropole: update steps (#36765)

Revision 871589bb (diff)
Added by Thomas Jund 6 months ago

clisson: update steps (#36765)

Revision 48aeb1b1 (diff)
Added by Thomas Jund 6 months ago

clisson-agglo: update steps (#36765)

Revision 3070c526 (diff)
Added by Thomas Jund 6 months ago

gorges: update steps (#36765)

Revision c3c26289 (diff)
Added by Thomas Jund 6 months ago

haute-goulaine: update steps (#36765)

Revision f9dfca69 (diff)
Added by Thomas Jund 6 months ago

cotes-d-armor: updates steps (#36765)

Revision 12f6fadc (diff)
Added by Thomas Jund 6 months ago

dauphine: update steps (#36765)

Revision c8a6da6b (diff)
Added by Thomas Jund 6 months ago

fontenay-sous-bois-2018: update steps (#36765)

Revision b7341419 (diff)
Added by Thomas Jund 6 months ago

grenoble-metropole-2019: update steps (#36765)

Revision f17ecaeb (diff)
Added by Thomas Jund 6 months ago

groupe-up: update steps (#36765)

Revision 927ab208 (diff)
Added by Thomas Jund 6 months ago

haute-garonne-cd31: update steps (#36765)

Revision c2952f82 (diff)
Added by Thomas Jund 6 months ago

lille: update steps (#36765)

Revision 489e4470 (diff)
Added by Thomas Jund 6 months ago

metz-metropole-2019: update steps (#36765)

Revision d356c6f0 (diff)
Added by Thomas Jund 6 months ago

meyzieu-2018: update steps (#36765)

Revision 88106a2c (diff)
Added by Thomas Jund 6 months ago

montlouis-sur-loire: update steps (#36765)

Revision a90fca21 (diff)
Added by Thomas Jund 6 months ago

montpellier: update steps (#36765)

Revision 52e2f169 (diff)
Added by Thomas Jund 6 months ago

montreuil: update steps (#36765)

Revision 126aed5f (diff)
Added by Thomas Jund 6 months ago

nancy-en-direct: update steps (#36765)

Revision 732d55c3 (diff)
Added by Thomas Jund 6 months ago

pre-saint-gervais: updates steps (#36765)

Revision 8b1d4d80 (diff)
Added by Thomas Jund 6 months ago

quimper: update steps (#36765)

Revision c5119305 (diff)
Added by Thomas Jund 6 months ago

roannais-agglomeration: update steps (#36765)

Revision 76893edd (diff)
Added by Thomas Jund 6 months ago

saint-chamond: update steps (#36765)

Revision 525529bb (diff)
Added by Thomas Jund 6 months ago

saone-et-loire-cd71-2019: update steps (#36765)

Revision fb325ef0 (diff)
Added by Thomas Jund 6 months ago

saone-et-loire-cd71: update steps (#36765)

Revision 5a470ec6 (diff)
Added by Thomas Jund 6 months ago

seine-et-marne-apa: updates steps (#36765)

Revision 3412d29b (diff)
Added by Thomas Jund 6 months ago

signal-publik: update steps (#36765)

Revision eff129da (diff)
Added by Thomas Jund 6 months ago

strasbourg-2018: update steps (#36765)

Revision e815d0bd (diff)
Added by Thomas Jund 6 months ago

signal-publik: update steps (#36765)

Revision f25225ad (diff)
Added by Thomas Jund 6 months ago

publik: update steps (#36765)

Revision 58b34df4 (diff)
Added by Thomas Jund 6 months ago

thonon-agglomeration: update steps (#36765)

Revision 59e98363 (diff)
Added by Thomas Jund 6 months ago

omonville-la-rogue: update steps (#36765)

Revision acfd6fab (diff)
Added by Thomas Jund 6 months ago

toodego: update steps (#36765)

Revision c912e553 (diff)
Added by Thomas Jund 6 months ago

toulouse: update steps (#36765)

Revision b012b584 (diff)
Added by Thomas Jund 6 months ago

toulouse-metropole: update steps (#36765)

Revision 989bd2de (diff)
Added by Thomas Jund 6 months ago

tournai: update steps (#36765)

Revision ca8fd514 (diff)
Added by Thomas Jund 6 months ago

venissieux: update steps (#36765)

Revision 9e5d7b32 (diff)
Added by Thomas Jund 6 months ago

villeurbanne-2018: update steps (#36765)

Revision 44f5c669 (diff)
Added by Thomas Jund 6 months ago

grand-chambery: update steps (#36765)

Revision 81481db7 (diff)
Added by Thomas Jund 6 months ago

castelnau-le-lez: update steps (#36765)

Revision 722440d9 (diff)
Added by Thomas Jund 6 months ago

fondettes: update steps (#36765)

Revision 54f635a1 (diff)
Added by Thomas Jund 6 months ago

meaux: update steps (#36765)

Revision 699000c5 (diff)
Added by Thomas Jund 6 months ago

nanterre: update steps (#36765)

Revision 16ea88d4 (diff)
Added by Thomas Jund 6 months ago

castries: update steps (#36765)

Revision 6862b82b (diff)
Added by Thomas Jund 6 months ago

saint-lo-agglo: update steps (#36765)

Revision 13c7c4dc (diff)
Added by Thomas Jund 6 months ago

seine-et-marne-apa: update steps (#36765)

Revision 580b9db3 (diff)
Added by Thomas Jund 6 months ago

lille-metropole: update steps (#36765)

History

#1 Updated by Thomas Jund 8 months ago

Est-ce qu'on ne peut pas aussi commencer à isoler le code de ce module dans un fichier scss propre. L'idée étant:
1 module/template html = 1 fichier scss ?

_publik.scss
_wcs.scss
wcs/
 |_ _steps.scss
 |_ _bulk.scss

et dans _wcs.scss

@import 'wcs/steps';
@import 'wcs/bulk'

#2 Updated by Frédéric Péters 8 months ago

1 module/template html = 1 fichier scss ?

Pas bien sûr que cette règle puisse s'appliquer aussi simplement mais tout à fait ok pour découper les fichiers et créer des répertoires.

#3 Updated by Thomas Jund 8 months ago

Branche wip/36765_new-form-steps

Première Proposition

modes RWD

  • max very small: Affichage uniqumement de la step en current, avec marker composé du numéro de la step et du nombre total de steps + label
  • min-width small: Affichage des markers côte à côte avec uniquement label de la step current
  • min-width desktop & sidebar left or right: affichage vertical des steps avec marker et label pour chaque step. Disposition des labels à côté des markers, pour gagner de la place. Important dans le cas d'un nombre important de steps (jusqu'à 21 !)

Obsolète var :

  • $responsive-steps: L'affichage ds steps est conditionné à la position de la sidebar. If sidebar top: steps horizontal. If sidebar left or right : steps vertical.

New vars :

$wcs-steps_background: transparent !default;
$wcs-steps_spacing: 0.35rem; // half of default 0.7rem used in publik

$wcs-step_color: #868686 !default;
$wcs-step_background: transparent !default;

$wcs-step_marker-color: $wcs-step_color !default;
$wcs-step_marker-background: $wcs-step_background !default;
$wcs-step_marker-background-type: solid !default; // solid || gradient

$wcs-step_current-marker-color: $title-color !default;
$wcs-step_current-marker-background: $title-background !default;

$wcs-step_current-label-color: $title-color !default;

Sémantique HTML & accessibilité

  • utilisation <header>
  • <abbr> pour le marker av attr title & aria-label
  • attr aria-hidden pour les steps non current

CSS naming convention

Première tentative d'ajout d'une convention de nommage type BEM


Si ok, il reste à ajouter
  • @$wcs-step_marker-type: square !default; ∕∕ square || circle
  • les préfixes navigateurs

Avertissement
le nouveau markup HTML ainsi que les nouveau styles dégomment les thèmes qui ont customisé les steps. Chercher à conserver leur fonctionnement m'a paru vraiment compliqué. Une mise à jour de ces thèmes seront probablement nécessaires (37 thèmes). La cause est essentiellement dût au changement du markup HTML. Les surcouches custom incluant systématiquement des selecteurs CSS par tag.

#4 Updated by Serghei Mihai 7 months ago

Thomas Jund a écrit :

Avertissement
le nouveau markup HTML ainsi que les nouveau styles dégomment les thèmes qui ont customisé les steps. Chercher à conserver leur fonctionnement m'a paru vraiment compliqué. Une mise à jour de ces thèmes seront probablement nécessaires (37 thèmes). La cause est essentiellement dût au changement du markup HTML. Les surcouches custom incluant systématiquement des selecteurs CSS par tag.

IMO, on devrait adapter ces 37 thèmes à ce nouveau markup. Il y en a qui sont relativement simples.

#5 Updated by Frédéric Péters 7 months ago

IMO, on devrait adapter ces 37 thèmes à ce nouveau markup. Il y en a qui sont relativement simples.

C'est bien sûr prévu.

#6 Updated by Frédéric Péters 7 months ago

Par contre on avait zappé les intégrations graphiques réalisées côté imio, un git grep #steps en affiche 27 autres... Ça me fait dire que les modifications au balisage (div→header, span→abbr) seraient peut-être à laisser de côté (je ne mesure pas le temps à passer dessus).

#7 Updated by Thomas Jund 7 months ago

J'ai tiré le dépôt et regardé.
J'ai 21 réponses pour `#steps` au sein de fichiers `_custom.scss`

Seul les thèmes liege et liege-spirit ont surchargés le design standard des steps.
Les 19 autres se limitent juste à 3 déclarations (toujours les même) sur le selecteur `div#steps ol li.current`.
Donc on pourrait appliquer le même patch sur les 19 et juste s'occuper de manière plus attentive des 2 autres.

J'ai quand même l'impression que le bloc Steps est l'un des bloc qui a été le plus surchargé en custom. Pour la refactorisation des suivants je me dis que ça devrait être plus simple.
Et virer les sélecteurs de balises est une chose à faire.
On peut pas se dire « On a des selecteurs css pourris, qui nous empêchent de faire évoluer le markup HTML ». Virons ces sélecteurs et avançons.

#8 Updated by Thomas Jund 7 months ago

Quelques nouveautés:

// Step
// Step border Bottom: pour retro compatibilité avec l'ancienne version
$wcs-step-border-bottom: 1px solid lighten($wcs-step_color, 15%) !default;
$wcs-step-current-border-bottom: 3px solid lighten($title-color, 15%) !default;
// Faire se superposer les steps-before pour gros gain de place en mode vertical
$wsc-step-before-piled: false !default;

// Step marker
$wcs-step-marker-type: square !default; // square || tied || disc || disc tied || square tied
// taille du marker
$wcs-step-marker-size: 2.1em !default;
// Possibilité de générer un léger dégradé basé sur le background color du marker
$wcs-step-marker-background-type: solid !default; // solid || gradient
// if marker_type = tied: couleur et épaisseur de la ligne
$wcs-step-marker-tie-color: $wcs-step_color !default;
$wcs-step-marker-tie-width: 5px !default;

#10 Updated by Thomas Jund 7 months ago

#11 Updated by Thomas Jund 7 months ago

  • File deleted (0003-alfortville-update-steps-36765.patch)

#12 Updated by Thomas Jund 7 months ago

  • File deleted (0002-SCSS-All-custom-themes-header-is-now-.site-header-36.patch)

#13 Updated by Thomas Jund 7 months ago

J'ai modifié 48 themes. Je ne pense pas qu'il soit nécessaire de pousser les 48 patches. Ils sont visible dans la branche pour ceux qui veulent les inspecter.

J'ajoute pas contre le patch qui met à jour la documentation pour relecture

#14 Updated by Frédéric Péters 7 months ago

La modification à la documentation produit un fichier qui ne passe pas, 1/ il n'y a pas de balise <br>, 2/ il manque la troisième colonne sur la ligne $wcs-step-current-label-color.

#15 Updated by Thomas Jund 7 months ago

Patch bien plus lisible :)

#16 Updated by Thomas Jund 7 months ago

Patch misc.scss help file

#17 Updated by Serghei Mihai 7 months ago

Plutôt un seul patch, non?

#18 Updated by Thomas Jund 7 months ago

Patch pour grand-Chambery

#19 Updated by Thomas Jund 7 months ago

Update:
  • fusion de la doc dans le patch
  • masquer les h2 par défaut

#20 Updated by Frédéric Péters 7 months ago

(pour suivi review collective du rendu : https://pad.libre-entreprise.org/p/eo-wcs-steps)

En plus de l'affichage de Étapes, déjà mentionné/traité, j'y note deux points qui reviennent :

  • On a 4 étapes plutôt que le 1/4 (et je vais arrêter de l'écrire partout, je me ferai expliquer quand on a plutot 1/4 que les 4 étapes).

"(tjund: par défaut on bascule entre le mode mobile (1/4) et le mode horizontale à partir d'un viewport 480px) La capture est donc prise au delà de 480."

Là-dessus je pense quand même préférer qu'on ait un unique mode mobile, pas ce mode hybride (je cite du pad : « Ça rend pas terrible terrible »); mais je m'interroge un peu sur le rendu 1/4 quand même, est-ce suffisamment explicite ? (le problème étant je pense qu'il vient la plupart du temps avant le titre, qui doit sans doute être un truc modifié, plus tard)

"le bloc courant n'est plus sur fond <insérer ici une couleur>"

Je note que c'est un choix concernant le nouveau rendu par défaut, de plutôt taper une bordure plus épaisse et de couleur, moi ça me va.

#21 Updated by Thomas Jund 7 months ago

Là-dessus je pense quand même préférer qu'on ait un unique mode mobile, pas ce mode hybride (je cite du pad : « Ça rend pas terrible terrible »);

Dans le rendu par défaut je suis un peu compact en mode horizontal. J'ai vraiment pensé aux formulaires avec un grand nombre de Steps.
Quelques améliorations possibles à mon avis.
La point de bascule entre le mode mobile et horizontal est paramétrable via $bq-max--wcs-steps-small-layout (que je vais renommer $wcs-steps-small-layout-limit)
  • agrandir la valeur de $very-small-limit, que je trouve pertinent même pour la grille) cf #36765
  • aéré un peu le mode horizontal.

mais je m'interroge un peu sur le rendu 1/4 quand même, est-ce suffisamment explicite ? (le problème étant je pense qu'il vient la plupart du temps avant le titre, qui doit sans doute être un truc modifié, plus tard)

+1 On doit vraiment trouver une solution pour remonter le titre de la démarche au-dessus du bloc étape. J'ai vu que tu as déjà modifié certains thèmes dans sens

"le bloc courant n'est plus sur fond <insérer ici une couleur>"
Je note que c'est un choix concernant le nouveau rendu par défaut, de plutôt taper une bordure plus épaisse et de couleur, moi ça me va.

Oui, en mode mobile, 3 blocs successifs récupéraient le style `title`: étapes, code de suivi et titre de la démarche. Ce qui agrégeait 3 éléments visuellement identiques comme étant des titres de niveau 1. Je pensais important de créer une différenciation et de me baser sur $primary-color plutôt que sur $title-*

#22 Updated by Thomas Jund 7 months ago

je suis pour mobile/desktop, pas de mode intermédiaire (découvert par hasard parce que selenium ne voulait pas réduire davantage la largeur de fenêtre lors de mes premières captures).

Il y a 3 mode
  • mode vertical quand sidebar == left || right. Le mode vertical est dépendant de la position de la sidebar
  • mode horizontal
  • mode mobile

Le débat est à quel moment on bascule du mode mobile au mode horizontal par défaut

Pour Fred: basculer à partir de $mobile-limit qui est à 800px par défaut (le même point de rupture que la basculement de la sidebar)
Pour Thomas: le mode horizontal est plus pertinent que le mode mobile car il ajoute une information visuelle de progression, une information graphique informe l'utilisateur qu'il a bien changer de page et avancé (feedback textuel + graphique). En mode mobile l'utilisateur n'a cette information que par un processus de lecture (feedback textuel uniquement). Le basculement doit se faire à partir du moment où le mode horizontal n'est plus viable, et il peut être viable encore vers 600px.

#23 Updated by Frédéric Péters 7 months ago

39070

Pour Thomas: le mode horizontal est plus pertinent que le mode mobile car il ajoute une information visuelle de progression (...)

Oui mais je recite « Ça rend pas terrible terrible », et je pense que comme tu l'écris c'est parce que c'est très compact. (pour référence, capture attachée).

#24 Updated by Thomas Jund 7 months ago

39073

« Ça rend pas terrible terrible »

Je peut être assez d'accord sur certains thèmes.
Voici une version où je double l'espace. Et où le titre passe au dessus.
Je trouve ça minimaliste et relativement efficace sans être "pas terrible terrible".
Et puis avec juste quelques vars scss il est possible d'être encore plus efficace.

#26 Updated by Serghei Mihai 7 months ago

Je rajoute une correction au thème de Villeurbanne pour remettre au plus proche le rendu initial.

#27 Updated by Serghei Mihai 7 months ago

Centrage les étapes en mobile, comme avant.

#28 Updated by Serghei Mihai 7 months ago

Préservation la couleur du texte de l'étape active sur le thème d'Arles.

#29 Updated by Thomas Jund 7 months ago

Patch du thème de Rouen.

#30 Updated by Thomas Jund 6 months ago

scss: steps: change breakpoint var name
scss: steps: increase horizontal layout markers margin
scss: steps: hide step-1 by default on horizontal & small layout

update patch for
  • Arles
  • Grenoble metropole 2019
  • villeurbanne 2018
    Merci Serghei

#32 Updated by Thomas Jund 6 months ago

Patch pour les thèmes
  • amien-metropole
  • alpes-maritime-2018
  • castelnau-le-lez

#33 Updated by Thomas Jund 6 months ago

Patchs pour les thèmes

  • fondettes
  • meaux
  • metz-metropole-2019
  • meyzieu-2018
  • montlouis-sur-loire
  • nanterre

#34 Updated by Thomas Jund 6 months ago

  • scss: steps: add flexbox prefix for IE10
  • scss: steps: add condition to apply enlarge markup option
  • toodego: patch steps
    • Sauf "étendre sur la longeur" impossible sans générer des défauts de position de la ligne -- défauts déjà existant sur la version current.
  • strasbourg-2018: patch steps
  • seine-et-marne-apa: patch steps
  • saint-lo-agglo: patch steps
  • quimper: patch steps
  • publik: patch steps
  • castries: patch steps

#35 Updated by Thomas Jund 6 months ago

  • grand-chambery: patch Steps
  • Lille-metropole: patch Steps
  • Lille-metropole: header -> .site-header

#37 Updated by Serghei Mihai 6 months ago

Je relis.

#38 Updated by Frédéric Péters 6 months ago

J'ai remis des notes dans le pad mais c'est peut-être plus facile désormais de suivre ici ?

  • fontenay-sous-bois-2018, roannais, saint-chamond, les libellés des étapes ne sont plus centrés
  • nancy-en-direct, curieusement en ligne les étapes apparaissent à droite, https://demarches.nancy.fr/dechets-et-nettoiement/demande-d-enlevement-de-graffiti/ , pas en local
  • strasbourg-2018, en desktop les points ne se réduisent plus quand il y a beaucoup d'étapes, en mobile les nombres sont un peu moins bien centrés dans les pastilles
  • toulouse et toulouse-metropole, la ligne des étapes en desktop n'est plus correctement alignée
  • toulouse-metropole, le texte "Étapes" apparait

Captures dans https://perso.entrouvert.org/~fred/36765-steps/shots-20191127/

#39 Updated by Serghei Mihai 6 months ago

En rapport avec la remarque de Frédéric sur les thèmes fontenay-sous-bois-2018, roannais, saint-chamond, je pense qu'on devrait systèmatiquement center les libellés des étapes quant les étapes horizontale.

#40 Updated by Thomas Jund 6 months ago

C'est vrai que quand $form-sidebar-position == top, #gauche est forcé en text-align-center;
Je vais modifier dans ce sens pour centrer les markers et le label

#42 Updated by Thomas Jund 6 months ago

Pour Nancy, la sidebar est à droite en ligne et pas en local car Nancy utilise une page combo "demarches" et surcharge le layout avec le selecteur "body.page-demarches" (page qui n'existe pas en local).
Surcharge inutile car `$form-sidebar-position: right;` aurait suffit :/

#43 Updated by Thomas Jund 6 months ago

  • fontenay-sous-bois-2018: patch steps
  • roannais: patch steps
  • saint-chamond: patch steps
  • strasbourg-2018: patch steps (finalement retour au design actuel :/ )
  • toulouse: patch steps
  • toulouse-metropole: patch steps
  • Steps Core: alignement centré des markers et du label par défaut en "desktop horizontal layout".

#44 Updated by Frédéric Péters 6 months ago

Tu pourras mettre ça dans la branche ? (je viens de regénérer des captures avant de me rendre compte que la branche n'avait pas bougé…)

#45 Updated by Thomas Jund 6 months ago

push ok

#46 Updated by Serghei Mihai 6 months ago

Looks good pour moi.

#47 Updated by Frédéric Péters 6 months ago

Fontenay-sous-Bois, il y a un espace blanc sous les étapes excessif (2× margin-bottom 2em), en desktop. En tablette aussi, mais moindre.

#48 Updated by Frédéric Péters 6 months ago

Pour aller avec "SCSS: All custom themes: header is now .site-header (#36765)" :

--- a/static/includes/_header.scss
+++ b/static/includes/_header.scss
@@ -1,5 +1,5 @@
 body.has-header-background {
-       header {
+       .site-header {
                background: url(/assets/header:background) top center no-repeat;
                background-size: cover;
        }

(et idéalement le message de commit serait de la forme que les autres, par exemple "scss: use class name to refer to site header").

#49 Updated by Thomas Jund 6 months ago

  • Fontenay-sous-bois-2018: patch steps
  • use '.site-header' on includes/_header.scss and rename commmit message

#50 Updated by Serghei Mihai 6 months ago

Pour Fontenay, en desktop l'espace entre le numéro et le libellé de l'étape est trop étroit. Il manque un padding-top: 0.5rem.
Go pour le patch sur les header.

#51 Updated by Thomas Jund 6 months ago

fontenay-sous-bois: add padding-top on label

#52 Updated by Serghei Mihai 6 months ago

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

Go

#53 Updated by Thomas Jund 6 months ago

  • Status changed from Solution validée to Solution déployée
commit 580b9db318749d5fe847e7db9e789f5be6ed6b3a (HEAD -> master, tag: 4.98, origin/wip/36765_new-form-steps, origin/master, origin/HEAD)
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Nov 27 11:15:19 2019 +0100

    lille-metropole: update steps (#36765)

commit 13c7c4dc8642a06affe5b8c2f67dbd1035d1ece6
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Mon Nov 25 17:07:19 2019 +0100

    seine-et-marne-apa: update steps (#36765)

commit 6862b82b88c2b4cbdf31635d403afbf5887b6534
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Mon Nov 25 16:58:00 2019 +0100

    saint-lo-agglo: update steps (#36765)

commit 16ea88d4a17385595fa9d516384b1058d593257c
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Mon Nov 25 15:30:35 2019 +0100

    castries: update steps (#36765)

commit 699000c542882bfe83067679b8592e526d84b2e9
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Fri Nov 22 16:35:27 2019 +0100

    nanterre: update steps (#36765)

commit 54f635a1c30cc7235aee33e60fb32de8d62f364d
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Fri Nov 22 15:00:47 2019 +0100

    meaux: update steps (#36765)

commit 722440d91b49e57a27fe4938d3d680eaae6e0d41
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Fri Nov 22 14:41:47 2019 +0100

    fondettes: update steps (#36765)

commit 81481db7739891de61b602aaeffa0e6e10e3f501
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Nov 21 17:47:32 2019 +0100

    castelnau-le-lez: update steps (#36765)

commit 44f5c66903b09a0ce62dca297e4d523be2ab166d
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Mon Nov 18 17:22:45 2019 +0100

    grand-chambery: update steps  (#36765)

commit 9e5d7b32218227f94a40b263a8340091d396b233
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Fri Nov 15 11:56:25 2019 +0100

    villeurbanne-2018: update steps (#36765)

commit ca8fd514e380f9f4fd46dad255fb103d72d4dc2a
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Nov 14 14:20:48 2019 +0100

    venissieux: update steps (#36765)

commit 989bd2deb4fc08c6fba432ac94f8890db3f7517e
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Nov 14 12:19:20 2019 +0100

    tournai: update steps (#36765)

commit b012b584eca662e530b294e6188db568cd397598
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Nov 14 11:50:38 2019 +0100

    toulouse-metropole: update steps (#36765)

commit c912e5532ef7ae57d9ff542e2985cd4ef5ef83a7
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Nov 14 11:45:23 2019 +0100

    toulouse: update steps (#36765)

commit acfd6fab63589e724bcd211ed70589d76e806620
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Nov 13 17:45:43 2019 +0100

    toodego: update steps (#36765)

commit 59e983633260bc4e11c5d863881971b09735772a
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Nov 13 16:57:12 2019 +0100

    omonville-la-rogue: update steps (#36765)

commit 58b34df4c9655045a46278914265ea7d283fa218
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Nov 13 16:45:56 2019 +0100

    thonon-agglomeration: update steps (#36765)

commit f25225ad675b7e56122d4c088ae7cd33910df4cd
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Nov 13 16:28:21 2019 +0100

    publik: update steps (#36765)

commit e815d0bdee12075f5167d7a0dcbf969f2747e719
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Nov 13 15:52:26 2019 +0100

    signal-publik: update steps (#36765)

commit eff129da19de1b3b7f6b7da40964e1c82314541b
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Nov 13 13:06:29 2019 +0100

    strasbourg-2018: update steps (#36765)

commit 3412d29b76e75d059f253f4ba37b230973f0b07c
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Nov 13 11:35:08 2019 +0100

    signal-publik: update steps (#36765)

commit 5a470ec68bf0a51f7e28e3ffecd44c2893cf406a
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Tue Nov 12 15:39:54 2019 +0100

    seine-et-marne-apa: updates steps (#36765)

commit fb325ef067a71224db7273110f868cbb7c615637
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Tue Nov 12 15:14:48 2019 +0100

    saone-et-loire-cd71: update steps (#36765)

commit 525529bb154acf672607380044ebf6c6b12b6e1e
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 17:44:49 2019 +0100

    saone-et-loire-cd71-2019: update steps (#36765)

commit 76893edd313b3e2a898e1258c786ec520b8d765c
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 17:21:26 2019 +0100

    saint-chamond: update steps (#36765)

commit c51193053670aed00577711dd4ba85993aefc72d
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 17:11:50 2019 +0100

    roannais-agglomeration: update steps (#36765)

commit 8b1d4d80fe9ce5ddb7b52426868fac406317da73
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 16:41:31 2019 +0100

    quimper: update steps (#36765)

commit 732d55c3cf63f491ab71152f34aeb8e2ee37515b
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 16:05:22 2019 +0100

    pre-saint-gervais: updates steps (#36765)

commit 126aed5f80d04e53def9277939616d98b7e888a5
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 15:22:16 2019 +0100

    nancy-en-direct: update steps (#36765)

commit 52e2f1690b52f9d52c7a09a569ed06882af95a4b
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 14:34:20 2019 +0100

    montreuil: update steps (#36765)

commit a90fca217d6978d706d66f2f626b6f7d26382aae
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 13:05:08 2019 +0100

    montpellier: update steps (#36765)

commit 88106a2c0f0ff9603e70ba2dc7a45ddd5d899380
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 12:27:42 2019 +0100

    montlouis-sur-loire: update steps (#36765)

commit d356c6f01104df33dfb663253ccc23c56bb34354
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 11:58:37 2019 +0100

    meyzieu-2018: update steps (#36765)

commit 489e44703e282a7fb4b7399d8f9af11533a75f1a
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 11:05:06 2019 +0100

    metz-metropole-2019: update steps (#36765)

commit c2952f82da88d9c783371e48f3b0d13bd4444f69
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 31 10:13:23 2019 +0100

    lille: update steps (#36765)

commit 927ab208aa80ffde45317fc9a336492b4cceb09f
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 17:16:22 2019 +0100

    haute-garonne-cd31: update steps (#36765)

commit f17ecaebdb0cb04af78722aa81d2c77d59a6b8db
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 16:49:55 2019 +0100

    groupe-up: update steps (#36765)

commit b7341419d1225224c0938cb6829a9b327dad3b77
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 16:37:41 2019 +0100

    grenoble-metropole-2019: update steps (#36765)

commit c8a6da6b8c1cf5eb50ae0c2bce1c49ddeac80642
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 15:48:35 2019 +0100

    fontenay-sous-bois-2018: update steps (#36765)

commit 12f6fadca15be22e3553d275c3489d0277f1a069
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 13:14:33 2019 +0100

    dauphine: update steps (#36765)

commit f9dfca698fabfc5d5c8167e375309e8be704060a
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 13:01:44 2019 +0100

    cotes-d-armor: updates steps (#36765)

commit c3c262890c480d87c185cddaf2fe17b36823ff84
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 12:42:54 2019 +0100

    haute-goulaine: update steps (#36765)

commit 3070c52606cd4e1ad97d74ed2e4e7856bee0cef8
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 12:34:50 2019 +0100

    gorges: update steps (#36765)

commit 48aeb1b1c1a8bad05de64c0708cc6347faec2923
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 12:26:59 2019 +0100

    clisson-agglo: update steps (#36765)

commit 871589bbf5578c3dd57be225b14dc04f678c4786
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 12:15:53 2019 +0100

    clisson: update steps (#36765)

commit 840f5117472bfd470bb1fd43b5916c10e1bfe967
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 12:09:10 2019 +0100

    clermont-metropole: update steps (#36765)

commit eb70183c1bab0db0a969adc3bcd099868a23fb1d
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 12:02:35 2019 +0100

    clapiers: update steps (#36765)

commit 099d929cc758de39ef1aef5b44523b62c7673d83
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Wed Oct 30 11:55:50 2019 +0100

    chateauroux: update steps (#36765)

commit f89b1091e49b617e9ca3b1e4493b147cb36c42a4
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Mon Oct 28 17:47:11 2019 +0100

    cnil: update steps (#36765)

commit 501a874bdc1a0523cd58f795d5f1ed4c2336837e
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Mon Oct 28 15:05:21 2019 +0100

    auch: update steps (#36765)

commit 664f9a4770980886edaaba51bd1e87f5f8a95e86
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Mon Oct 28 14:58:14 2019 +0100

    arpagon: update steps (#36765)

commit e41fce8fd484846446e3a92881a59d6bc621fc62
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Fri Oct 25 17:49:53 2019 +0200

    amiens-metropole: update steps (#36765)

commit 1bc705e78fd4c50eefe9a1a5729f7274e7275abf
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Fri Oct 25 17:13:59 2019 +0200

    arles: updates steps (#36765)

commit e6031742841c47f3bae14d052cd1edf729ff3da1
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Fri Oct 25 15:18:27 2019 +0200

    blois-2018: updates steps (#36765)

commit e34d8e621373f182adb1e3d4da953d6912ace383
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Thu Oct 24 16:44:00 2019 +0200

    alpes-maritimes-2018: updates steps (#36765)

commit 190bd35d6513964059c241d3500499fb9ff71462
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Mon Oct 21 16:31:27 2019 +0200

    alfortville: update steps (#36765)

commit ecccf98018466c4b8b37b5297ae0b3b9e9818da1
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Fri Nov 29 11:39:51 2019 +0100

    scss: use '.site-header' class name to refer to site header (#36765)

commit b144e00e3119e80acc3e10d1872edfc3afac4ad6
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Mon Oct 14 13:05:20 2019 +0200

    core: refactorisation of wcs steps component (#36765)

#54 Updated by Thomas Jund 6 months ago

Sur dépôt rouen-publik-theme

commit 37b7a5296a1fa6d6d12a2c86c77f505d90152bad (HEAD -> master, tag: 0.12, origin/master, origin/HEAD)
Author: Thomas JUND <tjund@tj.entrouvert.lan>
Date:   Tue Nov 19 15:55:20 2019 +0100

    publik-base-theme: update steps (#36765)

#55 Updated by Thomas Jund 6 months ago

Sur dépôt atreal-publik-themes

commit 788a7270eb1dfb66ee6c52b3afa3649d299ba507 (HEAD -> master, origin/master, origin/HEAD, wip/36765_update-steps)
Author: Thomas JUND <tjund@tj.entrouvert.lan>
Date:   Thu Nov 21 16:06:55 2019 +0100

    concarneau: update steps (#36765)

commit ceff226c59e030a89de7dbe7aaa8310f4a1c6882
Author: Thomas JUND <tjund@tj.entrouvert.lan>
Date:   Thu Nov 21 15:29:37 2019 +0100

    malakoff: update steps (#36765)

commit bfe622146bd1488c15bb921e7e3c782500b5a3bf
Author: Thomas JUND <tjund@tj.entrouvert.lan>
Date:   Thu Nov 21 15:19:59 2019 +0100

    coprec: update steps (#36765)

commit b478594850bf4dd4250fcace0a2c809bdac2cb00
Author: Thomas JUND <tjund@tj.entrouvert.lan>
Date:   Thu Nov 21 15:12:11 2019 +0100

    avray: update steps (#36765)

#56 Updated by Thomas Jund 6 months ago

  • Related to Development #14143: Améliorer le graphisme des étapes sur les pages de formulaires added

#57 Updated by Thomas Jund 6 months ago

  • Related to Development #26730: quand une seule étape serait affichée, ne pas afficher les étapes added

Also available in: Atom PDF