Project

General

Profile

Project management #36765

Affichage des étapes d'une démarche

Added by Frédéric Péters 14 days ago. Updated about 24 hours ago.

Status:
Nouveau
Priority:
Normal
Assignee:
Target version:
-
Start date:
08 Oct 2019
Due date:
% Done:

0%

Patch proposed:
No
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).

History

#1 Updated by Thomas Jund 8 days 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 days 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 4 days 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 1 day 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 about 24 hours 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.

Also available in: Atom PDF