Development #45145
Nouveau composant : back-top
0%
Description
Suite à une demande de Villeneuve d'ascq, je me suis penché sur le développement d'un simple composant qui permet d'afficher un bouton de retour vers le haut de la page.
Bouton ergononique assez classique pour éviter sur mobile, entre autre, de faire défiler manuellement le site pour remonter au header.
Un lien de retour est déjà présent dans le code, mais non accessible depuis l'interface.
Je propose de le faire évoluer.
Fichiers
Demandes liées
Révisions associées
Revert "templates: add back-top component (#45145)"
This reverts commit 07e47a79033dce5f9703777c9b7d39a845e4272b.
templates: add back-top component (#45145)
Historique
Mis à jour par Thomas Jund il y a presque 4 ans
- Lié à Development #45040: JS: scrollY function ajouté
Mis à jour par Thomas Jund il y a presque 4 ans
- Fichier 0001-add-back-top-component-45145.patch 0001-add-back-top-component-45145.patch ajouté
- Statut changé de En cours à Solution proposée
- Patch proposed changé de Non à Oui
Proposition
- code HTML/JS du composant isolé dans un includes/
- localiser par défaut dans le block "footer-bottom" (pour l'inclure graphiquement au sein du footer)
- possède son propre block "back-top" pour facilement le déplacer
- un script JS activable depuis une variable hobo (intéressant uniquement si le composant est stické à l'écran)
Le JS nécessite une fonction globale (voir #45040).
Côté scss
$back-top-display: afficher le block, valeurs de la propriété display + `mobile-only`
$back-top-icon-character: modifier le caractère de l'icon
$back-top-icon-size: taille de l'icon
$back-top-layout-direction: aficher l'icon à côté ou au-dessus du label
$back-top-layout-position: static ou fixed avec les options de positionnement
$back-top-icon-label-space: espace entre icon et label (des ajustements sont souvent nécessaires en fonction de l'icon choisie.
Côté CSS
2 @keyframes disponibles (en rapport avec le toggle class JS) pour animer le back-link, modifiables depuis custom.css
vidéo démo : https://perso.entrouvert.org/~tjund/back-top.mp4
Mis à jour par Thomas Jund il y a presque 4 ans
Mise à jour du JS et CSS
Combo_scroll_y -> ComboScrollY
scroll-y -> scrollY
Mis à jour par Frédéric Péters il y a plus de 3 ans
$back-top-icon-character: "\f102" !default; // any content CSS property values
À côté des références unicode je trouve très pratique d'inclure le nom du caractère associé (ici, angle up ?).
$back-top-layout-position: [static (right)] !default;
Ça appelle sans doute explication sur le format.
Aussi, je pense que l'explication va être trop compliquée.
Trop compliquée particulièrement pour se retrouver documentée dans help/fr/misc-scss.page, alors que la position de ce bouton semble quand même quelque chose d'intéressant à paramétrer.
Côté documentation, faut les autres aussi, ou explicitement marquer que c'est juste du paramétrage interne à ne pas documenter publiquement.
static/includes/_publik.scss
Je crains des intégrations qui n'utilisent pas _publik.scss, je vois dans publik-base-theme static/montpellier/style.scss, dans imio-publik-theme site-liege et site-namur, mais ces deux dernières ne me semblent pas exploitées.
Mis à jour par Thomas Jund il y a plus de 3 ans
À côté des références unicode je trouve très pratique d'inclure le nom du caractère associé (ici, angle up ?).
Yep
Ça appelle sans doute explication sur le format.
Pour info, les crochets sont ici à cause de mot clé "!default". en déclaration simple, par de crochet (ça simplifie pas assez, ok)
Je vais déjà tenter de documenter dans le fichier CSS.
Côté documentation, faut les autres aussi, ou explicitement marquer que c'est juste du paramétrage interne à ne pas documenter publiquement.
Oui, j'attendais une validation globale du code et des nom de variables pour écrire la doc
Je crains des intégrations qui n'utilisent pas _publik.scss, je vois dans publik-base-theme static/montpellier/style.scss, dans imio-publik-theme site-liege et site-namur, mais ces deux dernières ne me semblent pas exploitées.
Je n'y avais pas pensé, c'est vrai que dans ce cas, le lien deviendra visible.
Mis à jour par Frédéric Péters il y a plus de 3 ans
Je n'y avais pas pensé, c'est vrai que dans ce cas, le lien deviendra visible.
(il y a juste à ajouter explictement l'import, faut juste pas l'oublier)
Mis à jour par Frédéric Péters il y a plus de 3 ans
Ah oui,
{% trans 'Back top of page' %}
ça ne va pas le faire, pas de gestion des traductions ici, tape en français direct.
Mis à jour par Thomas Jund il y a plus de 3 ans
- Fichier 0001-add-back-top-component-45145.patch 0001-add-back-top-component-45145.patch ajouté
- Fichier 0002-back-top-component-scss-documentation-45145.patch 0002-back-top-component-scss-documentation-45145.patch ajouté
- ajout de l'import du composant pour montpellier
- suppression des strings trans
- essaie d'écriture d'une documentation (dans un commit si pas assez compréhensif)
- amélioration des commentaires CSS
Mis à jour par Thomas Jund il y a plus de 3 ans
- Fichier 0001-back-top-component-scss-documentation-45145.patch 0001-back-top-component-scss-documentation-45145.patch ajouté
icone -> icône
Mis à jour par Frédéric Péters il y a plus de 3 ans
Je reste à douter de $back-top-layout-position,
Trop compliquée particulièrement pour se retrouver documentée dans help/fr/misc-scss.page, alors que la position de ce bouton semble quand même quelque chose d'intéressant à paramétrer.
Il n'y a pas moyen de diviser ça en variables simples ? (Quitte même à perdre certaines possibilités.)
Mis à jour par Frédéric Péters il y a plus de 3 ans
Je ne comprends pas l'arrivée de back_top_JS ? Ça serait posé dans le config.json pour dire de ne pas inclure le bloc back-top-script ? (pourquoi ?).
Mis à jour par Thomas Jund il y a plus de 3 ans
Il n'y a pas moyen de diviser ça en variables simples ? (Quitte même à perdre certaines possibilités.)
Je vais essayer.
Je ne comprends pas l'arrivée de back_top_JS ? Ça serait posé dans le config.json pour dire de ne pas inclure le bloc back-top-script ? (pourquoi ?).
Je ne suis pas sûr de comprendre ce que tu entends par "arrivée".
Le JS n'est utile que dans le cas où back-top est en position fixed, pour gérer son affichage.
Je cherchais donc un moyen de passer un booleen pour charger ou non le JS et j'ai opté pour une key dans config.json. Et ne pas charger le JS par défaut.
Mis à jour par Frédéric Péters il y a plus de 3 ans
Je ne suis pas sûr de comprendre ce que tu entends par "arrivée".
Pourquoi/comment il arrive (la supposition du config.json venant derrière).
Je cherchais donc un moyen de passer un booleen pour charger ou non le JS et j'ai opté pour une key dans config.json. Et ne pas charger le JS par défaut.
Je serais pour ne pas compliquer l'affaire avec des instructions "si vous tapez ça en scss il faut aussi taper ça dans config.json", que les 20 lignes de js soient tout le temps chargées, même si configurées pour ne rien faire.
Mis à jour par Thomas Jund il y a plus de 3 ans
Pas simple de simplifier :)
Si on découple le type de positionnement (static || fixed) des données de position, on ne simplifie pas grand chose.
Il faut conserver les parenthèses pour utiliser le type map de Sass.
$back-top-layout-position-type: static; $back-top-layout-position: (right: 1em); $back-top-layout-position-type: fixed; $back-top-layout-position: (bottom: 2rem, left: 2rem);
et c'est surtout bizarre avec l'option `static (center)`
$back-top-layout-position-type: static; $back-top-layout-position: (center);
Découpler en plus la variable de position (une pour l'horizontal, l'autre pour vertical), serait créer une variable `positionnement vertical` inutile en static (on commence à compliquer dans l'autre sens, trop de variables ?).
$back-top-layout-position-type: static; $back-top-layout-position-horizontal: right 1em; $back-top-layout-position-type: static; $back-top-layout-position-horizontal: center; $back-top-layout-position-type: fixed; $back-top-layout-position-horizontal: left 2rem; $back-top-layout-position: bottom 2rem;
De plus, on perd la possibilité d'utiliser le positionnement fixed avec plus de 2 valeurs de position comme `$back-top-layout-position: (bottom: 0, left: 0, right: 0, top: 0);`
Idées bienvenues.
Mis à jour par Frédéric Péters il y a plus de 3 ans
Il faut conserver les parenthèses pour utiliser le type map de Sass.
C'est là une part de mon problème, introduire des types de données compliqués va bloquer les possibilité de paramétrage via l'UI. (déjà "right 1em" me pose problème, je préférais avoir soit un choix de valeur, soit une valeur&unité).
J'en reviens à ce que j'écrivais, à défaut d'un truc qui puisse être ramené à des paramètres simples, "explicitement marquer que c'est juste du paramétrage interne à ne pas documenter publiquement".
Mis à jour par Thomas Jund il y a plus de 3 ans
introduire des types de données compliqués va bloquer les possibilité de paramétrage via l'UI
(Utiliser les variables CSS seraient bien plus pertinent amha pour une UI, sass pour ce qui demande des fonctions plus complexes)
Mis à jour par Frédéric Péters il y a plus de 3 ans
Je veux qu'une UI permette à un CPF de positionner le bouton "retour en haut de page", qu'in fine ça pose des variables CSS ou SASS, il reste que je n'ai pas envie de demander la saisie de "(bottom: 2rem, left: 2rem)".
Mais donc, comme j'écrivais, j'accepte que ça ne soit pas jugé possible, ou remis à plus tard, et que la variable soit notée comme interne et pas documentée.
Mis à jour par Thomas Jund il y a plus de 3 ans
- Fichier 0002-back-top-component-scss-documentation-45145.patch 0002-back-top-component-scss-documentation-45145.patch ajouté
- Fichier 0001-add-back-top-component-45145.patch 0001-add-back-top-component-45145.patch ajouté
- Suppression de la condition {% if back_top_JS %}
- test du positionnement du composant en JS
- Suppression de la documentation sur la variable $back-top-layout-position
Mis à jour par Frédéric Péters il y a plus de 3 ans
Réunir en un seul commit, préfixer son message. Il me semble aussi que ça demandera mise à jour des autres modules *-publik-themes sans quoi il va être affiché "Retour".
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Statut changé de Solution proposée à Solution validée
Mis à jour par Thomas Jund il y a plus de 3 ans
- Statut changé de Solution validée à Résolu (à déployer)
commit 07e47a79033dce5f9703777c9b7d39a845e4272b (HEAD -> master, origin/master, origin/HEAD) Author: Thomas JUND <tjund@entrouvert.com> Date: Thu Jun 25 18:41:18 2020 +0200 templates: add back-top component (#45145)
Mis à jour par Thomas Jund il y a plus de 3 ans
update publik-base-theme imio
tjund@tj:~/src/imio-publik-themes$ git log commit 39778504101ddd9b8d27220094e387479db261a9 (HEAD -> master, origin/master, origin/HEAD) Author: Thomas JUND <tjund@entrouvert.com> Date: Fri Aug 21 18:30:14 2020 +0200 update publik-base-theme submodule
update publik-base-theme Rouen
commit 7246107ef1e897ece9ed1173e08951d69f543f03 (HEAD -> master, origin/master, origin/HEAD) Author: Thomas JUND <tjund@entrouvert.com> Date: Fri Aug 21 18:33:01 2020 +0200 publik-base-theme submodule update
update publik-base-theme atreal
commit 155ed8126750cc37766fb0d2fee3bafcea07c803 (HEAD -> master, origin/master, origin/HEAD) Author: Thomas JUND <tjund@entrouvert.com> Date: Fri Aug 21 18:35:25 2020 +0200 publik-base-theme submodule update
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Statut changé de Résolu (à déployer) à En cours
Fail, cette valeur complexe ne passe pas jenkins, je revert partout.
Mis à jour par Thomas Jund il y a plus de 3 ans
En cause:
$back-top-layout-position: [static (right)] !default;
Sûrement les crochets. Syntaxe Sass tout à fait valide :(.
Mis à jour par Thomas Jund il y a plus de 3 ans
- Fichier 0001-templates-add-back-top-component-45145.patch 0001-templates-add-back-top-component-45145.patch ajouté
- Statut changé de En cours à Solution proposée
J'ai viré les crochets, la compilation sass fonctionne toujours.
Mis à jour par Frédéric Péters il y a plus de 3 ans
Et après directement ça faile :
Error: no mixin named sr-only Backtrace: static/includes/_back-top.scss:19 on line 19 of static/includes/_back-top.scss >> @include sr-only(); -----------^ Makefile:32 : la recette pour la cible « static/alpes-maritimes/style.css » a échouée make: *** [static/alpes-maritimes/style.css] Erreur 1
Mis à jour par Thomas Jund il y a plus de 3 ans
- Fichier 0001-templates-add-back-top-component-45145.patch 0001-templates-add-back-top-component-45145.patch ajouté
Patch rebasé
Et après directement ça faile :
En local `make css` fait le job sans broncher, je ne comprends pas :(.
Mis à jour par Frédéric Péters il y a plus de 3 ans
Ce n'est pas la même version de sass sur jenkins. C'est déjà ce qui avait fait le fail le coup d'avant. https://packages.debian.org/stretch/sassc
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Statut changé de Solution proposée à En cours
- Patch proposed changé de Oui à Non
(ou simplement attendre un jour)
Mis à jour par Thomas Jund il y a plus de 3 ans
Code poussé dans une branch wip. Jenkins ne bronche pas.
Mis à jour par Frédéric Péters il y a plus de 3 ans
Code poussé dans une branch wip. Jenkins ne bronche pas.
Oui parce que le build se fait uniquement lors du packaging.
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Statut changé de En cours à Solution validée
Je viens de taper dans la branche un commit qui modifie le Jenkinsfile pour constuire les css avant, et ça passe.
(et je viens de comprendre que le répertoire sur lequel j'ai lancé mon dernier test était sur fixé sur une vieille branche).
Go, donc. (mais sans mon commit de test, bien sûr).
Mis à jour par Thomas Jund il y a plus de 3 ans
- Statut changé de Solution validée à Résolu (à déployer)
Mis à jour par Thomas Jund il y a plus de 3 ans
commit 20f1175f875a4dc06afca0a4fddb54bd086ef904 (HEAD -> master, origin/master, origin/HEAD) Author: Thomas JUND <tjund@entrouvert.com> Date: Thu Jun 25 18:41:18 2020 +0200 templates: add back-top component (#45145)
Mis à jour par Thomas Jund il y a plus de 3 ans
Update publik-base-theme submodules
Rouen
commit 1156ea06c10c5befdfe81599eaad7f95e202804a (HEAD -> master, origin/master, origin/HEAD) Author: Thomas JUND <tjund@entrouvert.com> Date: Wed Sep 30 10:23:22 2020 +0200 update publik-base-theme submodule
Imio
commit 9a3e1610c9eab6b3a068e7a0d185c1b4a6dedc06 (HEAD -> master, origin/master, origin/HEAD) Author: Thomas JUND <tjund@entrouvert.com> Date: Wed Sep 30 10:27:05 2020 +0200 update publik-base-theme submodule
Atreal
commit 2f28820c6c2068504c4c265bdd4be71c6a469bfa (HEAD -> master, origin/master, origin/HEAD) Author: Thomas JUND <tjund@entrouvert.com> Date: Wed Sep 30 10:30:36 2020 +0200 update publik-base-theme submodule
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Statut changé de Résolu (à déployer) à Solution déployée
templates: add back-top component (#45145)