DISIC / observatoire

🕵️‍♀️ Observatoire de la qualité des démarches en ligne
https://observatoire.numerique.gouv.fr/
GNU Lesser General Public License v3.0
10 stars 4 forks source link

Refonte de la mise en page du footer et re-agencement des élements #1006

Closed lucaa closed 2 years ago

lucaa commented 2 years ago

L'objectif est d'obtenir les footers suivants:

Formulaire d'avis: Desktop: Selection_183

Mobile: Selection_185

Observatoire: Selection_184

Note: par rapport à l'image, pour l'observatoire un lien supplémentaire "Connexion" sera à mettre en place à la fin de la liste des liens, après Contact.

Aujourd'hui le footer est déjà différentié entre le formulaire d'avis et l'observatoire, il s'agit uniquement de déplacer les elements et changer les logos.

L'implémentation doit se rapprocher du footer defini par https://www.systeme-de-design.gouv.fr/, les tailles & breakpoints doivent être reprises de l'element 'footer' du système de design, avec comme base une conversion de 1em = 16px.

lucaa commented 2 years ago

Note: pour l'instant, pour la largeur maximale du footer nous gardons les tailles bootstrap qui sont déjà en place, qui sont assez proches des tailles dsfr, et pour faciliter une implémentation incrémentale.

Aussi, aucun breakpoint ne sera rajouté, l'objectif est d'utiliser ceux de bootstrap qui se rapproche le plus possible de ceux du design system.

lucaa commented 2 years ago

Note: La mention « Je donne mon avis » dans le texte en pied de page du formulaire (en italique sur la maquette) doit être dans une balise .

lucaa commented 2 years ago

Voir aussi #1011 pour les destinations des différents liens du footer.

clemdee commented 2 years ago

Le footer de la page a été mis à jour afin d'obtenir un rendu le plus proche possible de la maquette tout en gardant les styles bootstrap.

Il reste un problème de duplication d'id au niveau du logo du header et du footer, qui sera traité dans la tache #1019.

AnthonyBrunelli commented 2 years ago

Je ne sais pas s'il y a un lien avec la note précédente mais, dans le doute: il manque le logo "SP+" qui doit être à la place de "L'observatoire" dans le footer.

clemdee commented 2 years ago

Le logo "SP+" a été mis à jour dans le header et le footer en même temps lors de la tâche #1008.

AnthonyBrunelli commented 2 years ago

Vu et ça me semble ok, en dehors des directions des liens et du logo SP+ dont je ne traite pas ici mais qui sont traités dans d'autres tickets.

AnthonyBrunelli commented 2 years ago

(à contrôler par @ugodtn à son retour pour plus de rigueur)

ugodtn commented 2 years ago

On y est presque, j'ai juste une remarque: il y a une certaine largueur d'écran ou le logo Observatoire passe sous le logo RF, c'est gênant, est-ce que l'on peut empêcher ce comportement, par exemple en réduisant alors légèrement le logo Observatoire ?

ugodtn commented 2 years ago

On y est presque, j'ai juste une remarque: il y a une certaine largueur d'écran ou le logo Observatoire passe sous le logo RF, c'est gênant, est-ce que l'on peut empêcher ce comportement, par exemple en réduisant alors légèrement le logo Observatoire ?

En fait, je me rends compte que ça ne concerne pas directement cette carte car dans le footer il y aura le logo SP+, mais la remarque est tout de même valide pour le footer du site de l'Observatoire. On fait une autre carte : #1022.