Mise en place de la page de présentation du produit JDMA

lucaa commented 2 years ago

non-connecté (version sans avis)

extrait du mockup sur figma: https://www.figma.com/file/kG2znZqEzySDPUxiWbrEme/JDMA?node-id=514%3A49335

Notes:

les composants dsfr doivent être inclus sur cette page, comme sur le formulaire d'avis, pour rendre facile la mise en place des différents éléments de la page (qui sont principalement des éléments dsfr mais pas uniquement)
Le lien "Commencer" pointe vers:
- le formulaire d'inscription pour l'utilisateur non-connecté (voir tâche #1056 )
- le formulaire d'ajout de nouvelle démarche pour les utilisateurs connectés - à valider par @ugodtn .
html pur à prévoir dans l'implémentation, pour rendre cette page facilement éditable.
la section de FAQ en bas de la page est un élément DSFR et devrait être, si possible, isolé dans une page séparée pour pouvoir facilement modifier les éléments du FAQ par les admins dinum. Il faut, néanmoins, considérer que tout élément de cette page pourrait être modifié par les admins dinum.
la section "Elles recommandent" visible sur Figma n'est pas encore prête à implémenter, une tâche séparée va être créé pour cela.

Les liens vers cette page seront mis en place sur la page d'accueil et dans le header, dans le cadre de cette tâche.

AnthonyBrunelli commented 2 years ago

"Le lien "Commencer" pointe vers le formulaire d'ajout de nouvelle démarche pour les utilisateurs connectés - à valider par @ugodtn " : non, on arrive vers la page d'accueil connectée de l'utilisateur.

Ok sur le reste. [note: vu avec Kale et Ugo]

kamalcon commented 2 years ago

Frame 25 Frame 26 Frame 27 Frame 28 @ClemDee voici les svgs, n'hésites pas si tu a besoin d'autres

clemdee commented 2 years ago

@ClemDee voici les svgs, n'hésites pas si tu a besoin d'autres

Super merci ! Justement j'ai mis un autre comentaire sur figma, j'aurais juste besoin en plus de la toute première image de la page :

kamalcon commented 2 years ago

Cela j'en ai pas en format vectoriel, c'est Ugo qui l’a créé dans Sketch. Mais je l’ai en PNG / SVG non-vectoriel :

clemdee commented 2 years ago

Cela j'en ai pas en format vectoriel, c'est Ugo qui l’a créé dans Sketch. Mais je l’ai en PNG / SVG non-vectoriel

Pas grave ça fera l'affaire merci :+1:

clemdee commented 2 years ago

Travail effectué :

Implémentation du design de la page de présentation du produit JDMA
Mise à jour des liens du header et de la page d'accueil
Mise à jour d'une image de l'accueil pour utiliser une pièce jointe de la page JDMA

La section FAQ a été implémentée dans une page à part : JDMA.FAQ, et contient une macro {{html}} permettant d'inserer du markup dsfr pour l'affichage des accordéons question/réponse.

Puisqu'il n'y avait pas de maquette sur figma pour l'affichage de cette page en format mobile, j'ai essayé de prendre des choix cohérents avec les autres layouts prévu pour cette taille d'affichage, mais il y aura peut-être des marges ou tailles d'éléments à revoir.

lucaa commented 2 years ago

Puisqu'il n'y avait pas de maquette sur figma pour l'affichage de cette page en format mobile, j'ai essayé de prendre des choix cohérents avec les autres layouts prévu pour cette taille d'affichage, mais il y aura peut-être des marges ou tailles d'éléments à revoir.

Je pense que j'ai enfin compris le principe des liens / permaliens des ressources de figma. :) La version mobile est présente sur figma, mais pas à l'endroit ou pointe le lien de la description de ce ticket, dans la zone "non-connectée" : https://www.figma.com/file/kG2znZqEzySDPUxiWbrEme/JDMA?node-id=577%3A50340 .

Je rouvre le ticket pour vérifier l'implémentation de la taille mobile (xs) par rapport aux mockups de figma. Pour les tailles intermédiaires on fait des choix cohérents .

lucaa commented 2 years ago

À re-vérifier aussi par rapport à la maquette figma: les tailles de polices des différentes sections de la page, avec le ratio 16px = 1em. Il y a au moins le texte explicatif de la première section qui ne correspond pas. D'ailleurs, pour la première section l'image est aussi placée différemment de la maquette.

lucaa commented 2 years ago

La section FAQ a été implémentée dans une page à part : JDMA.FAQ, et contient une macro {{html}} permettant d'inserer du markup dsfr pour l'affichage des accordéons question/réponse.

À faire aussi, pour la FAQ:

ajout dans la page FAQ les questions de la maquette (sans les réponses car on ne les a pas)
ajout de la page FAQ dans la liste de pages non-upgradable pour ne pas l'écraser lors d'une mise à jour
les textes dans la maquette figma sont affiches en capitalisation normale alors que dans l'implém courante elles sont all-caps - cc @ClemDee :

clemdee commented 2 years ago

Mise à jour de la taille de police
mise à jour du contenu de la page FAQ (et mise à jour en tant que page non-upgradable)
mise à jour de styles par rapport aux maquettes

kamalcon commented 2 years ago

On a changé les couleurs de ces deux images afin de les harmoniser avec les couleurs du design systeme Frame 23 Frame 88

lucaa commented 2 years ago

On a changé les couleurs de ces deux images afin de les harmoniser avec les couleurs du design systeme

J'ai créé un nouveau ticket pour cette modification #1125, pour ne pas rouvrir celui ci (pour ne pas risquer de le garder ouvert à l'infini car le travail a été fini).

DISIC / observatoire

Mise en place de la page de présentation du produit JDMA #1048