Produits Entr'ouvert » Intégrations graphiques Publik

Amiens et Strasbourg.

j'ai inclus un fichier _circle-steps.scss dans le thème hautes-alpes-2018 qui peut servir de base de travail à ce ticket

Perso je préfère les petits cercles comme sur https://demarches.guichet-recette.grandlyon.com/signalements/voirie-et-signalisation/ (en pièce jointe).

Une version avec variables extraite d'amiens-metropole

• échéance posée pour essayer d'utiliser ça à rouen

Voilà $circle-steps: true; et 14 variables (avec une valeur défaut).

• appliqué à rouen, avec le fichier _vars.scss en PJ.
• les captures aussi pour vérifier que c'est ce qui est attendu.

Emmanuel Cazenave a écrit :

Je ne suis pas très fan du rendu des barres de liaison :

• en mode horizontal, elles ne touchent pas la rond de gauche et sont un peu trop basses
• en mode vertical, leur interruption rend le truc vraiment bizarre je trouve (peut être pas d'interruption avec le texte qui passe par dessus ?)

Voilà une seconde mouture.

• J'ai trouvé un code pour que les traits touchent les cercles, mais à condition que le texte ne dépasse pas 5 lignes (voir la 3e capture qui le montre)
• J'ai ajouté la documentation, il ne reste que 5 variables de paramétrage, donc une pour afficher ou non les lignes entre les cercles.

• basculé les labels à côté des numéros pour ne pas avoir d'éléments qui se chevauchent.
• donné plus de largeur aux étapes parce que le précédent réglage serrait trop les labels.

Frédéric Péters a écrit :

Ça ne fait pas curieux d'avoir le texte centré ? (moi je trouve)

Si

Ici et ailleurs, le calcul me semble pouvoir être assuré totalement côté sass.

Ok

Frédéric Péters a écrit :

Comme les cercles/disques ont une largeur paire (56px), la ligne qui fait un pixel n'apparait pas centrée.

OK, bien vu !

(patch avec ces modifs, + modif pour ne pas jouer avec de la marge négative).

Frédéric Péters a écrit :

(patch avec ces modifs, + modif pour ne pas jouer avec de la marge négative).

Merci.

En mobile (clapotis-les-canards) les ronds sont trop larges et deviennent des ellipses. Et la hauteur est paire et du coup nécessairement pas aligné (même si ça me choque moins ici) Aussi toutes les étapes centrées mais du coup on peut ne pas voir l'étape courante. (à Strasbourg sur une apparence similaire l'espace entre les blocs s'ajuste selon la largeur et on arrive à en faire tenir 6). (on peut aussi se dire que de tels formulaires multi-pages n'ont pas vocation à être saisis via mobile).

Frédéric Péters a écrit :

En mobile (clapotis-les-canards) les ronds sont trop larges et deviennent des ellipses. Et la hauteur est paire et du coup nécessairement pas aligné (même si ça me choque moins ici)

Corrigé, mais à noter qu'en responsive au-delà de 10 étapes, les ronds ne sont plus des cercles.

Aussi toutes les étapes centrées mais du coup on peut ne pas voir l'étape courante. (à Strasbourg sur une apparence similaire l'espace entre les blocs s'ajuste selon la largeur et on arrive à en faire tenir 6). (on peut aussi se dire que de tels formulaires multi-pages n'ont pas vocation à être saisis via mobile).

J'ai choisi de laissé centré, mais avec un flex-wrap actif.

Frédéric Péters a écrit :

l'étape courante est affichée en blanc sur fond blanc,

c'est toujours le cas.

Désolé pour l'oubli

Frédéric Péters a écrit :

Pour assurer que ça soit utile, tu modifierais hautes-alpes-2018 pour passer par ce fichier ? Et sans doute aussi vérifier le rendu dans l'une ou l'autre intégration native.

OK pour cotes-darmor, et hautes-alpes-2018 dans le ticket lié.
J'ai fait quelques modifications pour que l'option "sans-traits" permette de revenir à des labels centrés sous les numéros, comme c'est le cas par pour le thèmes des H-A.
Nouveau message de commit pour plus de clarté.

Côtes d'Armor avec les traits on voit que ce n'est pas centré, cf zoom

Frédéric Péters a écrit :

Côtes d'Armor avec les traits on voit que ce n'est pas centré, cf zoom

un right: calc(50% - #{$la-bordure-du-cercle}); pour centrer au mieux, mais avec un diametre impair pour éviter les problèmes d'alignement précédents, on arrive sur un autre problème de demi-pixels, et ça peut placer le trait de 1px à cheval sur la grille de l'écran, et donc être affiché en 2px effectifs. J'assume cette "fausse" épaisseur, et on fixe un minimum de 2px réels.
Je pense qu'on ne pourra pas optimiser plus ce rendu.

Frédéric Péters a écrit :

(...) un diametre impair (...) on fixe un minimum de 2px réels.

Mais diamètre impair et trait de 2 pixels, c'est garantie de ne jamais être centré.

Je pense qu'on ne pourra pas optimiser plus ce rendu.

Heureusement il existe dans sass floor(), ceil() et round() pour te contredire.

Oui mais on ne peut pas faire floor(calc(...))
J'ai essayé de nombreuses combinaisons, et je n'ai rien trouvé de plus satisfaisant que ce dernier patch.
(L'affichage se fait parfois à cheval sur deux pixels, c'est ce que je voulais dire avant, même 1px de largeur peut donner un affichage sur 2 pixels réels)

Je suis allé sur un diamètre pair, et un positionnement du trait avec left:50%; plutôt qu'un calcul compliqué avec right. C'est le meilleur rendu pour ma part.

J'en ai profité pour un floor() sur la longueur du trait horizontal en responsive, pour éviter les demi-pixels.

Elias Showk a écrit :

Frédéric Péters a écrit :

(...) un diametre impair (...) on fixe un minimum de 2px réels.

Mais diamètre impair et trait de 2 pixels, c'est garantie de ne jamais être centré.

Je pense qu'on ne pourra pas optimiser plus ce rendu.

Heureusement il existe dans sass floor(), ceil() et round() pour te contredire.

Oui mais on ne peut pas faire floor(calc(...))
J'ai essayé de nombreuses combinaisons, et je n'ai rien trouvé de plus satisfaisant que ce dernier patch.
(L'affichage se fait parfois à cheval sur deux pixels, c'est ce que je voulais dire avant, même 1px de largeur peut donner un affichage sur 2 pixels réels)

Je suis allé sur un diamètre pair, et un positionnement du trait avec left:50%; plutôt qu'un calcul compliqué avec right. C'est le meilleur rendu pour ma part.

J'en ai profité pour un floor() sur la longueur du trait horizontal en responsive, pour éviter les demi-pixels.

Frédéric Péters a écrit :

Mais l'argumentation sur le calc() qui empêchait d'avoir quelque chose de correct ? Je ne sais pas trop ce qui reste vrai ou pas de ton dernier commentaire. (et reste persuadé qu'on peut aligner correctement une ligne d'1px).

Je trouve inutile d'utiliser le calc pour résoudre le prob du centrage qu'il ne résout finalement pas. Je reviens vers left: 50% pour ne pas rendre le truc compliqué pour rien.

Je trouve les dernières captures correctes. Je joins une copie une nouvelle fois, et je m'arrête là pour le moment car j'ai essayé bcp d'options sans succès, celle là est la plus satisfaisant.

Quand je trouverai une optimisation, j'en ferait un patch, mais si d'ici là il faut passer le patch en mon absence, servez-vous.

--- a/static/includes/_form-steps.scss
+++ b/static/includes/_form-steps.scss
@@ -1,6 +1,6 @@
 $circle-steps: false !default;
 $circle-steps-with-lines: true !default;
-$circle-steps-diameter: 56px !default;
+$circle-steps-diameter: 55px !default;
 $circle-steps-number-color: #868686 !default;
 $circle-steps-current-number-color: white !default;
 $circle-steps-current-marker-background: $primary-color !default;
@@ -105,7 +105,7 @@ $_steps-border: 1px !default;
                                        height: $_steps-height + $circle-steps-diameter - $_steps-border;
                                        width: $_circle-lines-thickness;
                                        bottom: $circle-steps-diameter - $_steps-border;
-                                       left: 50%;
+                                       left: floor($circle-steps-diameter / 2) - 1px;
                                        background-color: $circle-steps-number-color;
                                        padding: 0;
                                }

Frédéric Péters a écrit :

[...]

C'est corrigé

Aucun changement, juste pour remettre le dernier patch en haut...

Je pense que la possibilité reste pertinente mais ce ticket est devenu trop long pour être utile.