Evolution graphique des questions des objectives en cards

yvalentin commented 3 months ago

En tant qu'utilisateur, je souhaite identifier facilement mon projet afin de trouver les aides disponibles pour m'aider à le mettre en place.

[ ] Remplacer "quel est votre objectif prioritaire"+"je souhaite" par "Choisissez la thématique de votre projet"
[ ] Faire évoluer les select thématiques pour un système de cartes intégrant :
l'illustration thématique sur un fond light (10%) cf correspondances ci-dessous : https://www.figma.com/design/tHgzORFkJYTVspsQgR2kg6/TEE-V5?node-id=6254%3A271572&t=3EVrubpJCj4sB8YY-1
2 à 3 tags "projets" cliquables dans chaque carte (nécessaire d'identifier dans les données les 2,3 projets exemples)+ état hover DSFR (possiblité de mettre les tags en dur dans un premiers temps)
suivi de points de suspension (pour laisser comprendre qu'il y a d'autres projets à découvrir derrière la carte) Comportement :
Au clic sur un tag > direction directement sur la fiche projet correspondante (précédé d'un loader)
Au clic sur une carte > direction sur la page "vos résultats" (précédé d'un loader)
[ ] Mettre à jour le fil d'ariane sur le bandeau gauche avec "🎯 mon projet"

hover carte / hover tag :

version mobile :

[ ] Enlever les illustrations
[ ] appliquer la couleur du fond sur la carte

### Tasks
- [ ] https://github.com/betagouv/mission-transition-ecologique/issues/797
- [ ] https://github.com/betagouv/mission-transition-ecologique/issues/798

oumeimaelisbihani commented 2 months ago

@jbledevehat @ColineLebaratoux version de test ici >> https://tee-preprod-pr856.osc-fr1.scalingo.io/

yvalentin commented 1 month ago

@ColineLebaratoux A nouveau dispo pour validation:

https://tee-preprod-pr856.osc-fr1.scalingo.io/

ColineLebaratoux commented 1 month ago

Mes retours pour @yvalentin

[x] Aligner "Choisissez la thématique de votre projet" sur la gauche

[x] Sur les cartes thématiques, aligner les tags d'exemple de projets

[x] Sur les cartes thématiques, diminuer la taille du traits de couleur

cible :

[x] Revoir l'ordre d'affichage des cartes thématiques, en suivant celui de la maquette :

[x] Pour les largeur de 768 à 1011 px, ajouter un espacement entre les tag d'exemples de projets

[x] Ajouter un état Hover aux cartes (DSFR)
[x] Ici, est-ce possible de ne pas contraindre l'utilisateur à cliquer sur suivant pour passer aux résultats > Le clic sur la carte thématique suffit.

oumeimaelisbihani commented 1 month ago

https://tee-preprod-pr856.osc-fr1.scalingo.io/ nouvelle version de test

ColineLebaratoux commented 1 month ago

Hello @oumeimaelisbihani ! Pourrais-tu me régénérer ce lien ?

oumeimaelisbihani commented 1 month ago

https://tee-preprod-pr856.osc-fr1.scalingo.io/

ColineLebaratoux commented 1 month ago

Merci ! voilà mes retours :

[x] Est-ce que tu pourrais corriger l'interlignage entre le titre "choisissez la thématique de votre projet" et les cartes (prendre le même que celui de la question précédente)
[x] Ajouter ":" "choisissez la thématique de votre projet : "
[ ] Mettre en bleu roi le tiret et le contour du tag de la thématique économies d'eau
[x] Revoir l'ordre d'affichage des cartes thématiques, en suivant celui de la maquette (c'est bizarre tu l'as coché dans la liste plus haut, mais ça n'a pas changé)
[x] Sur mobile (à partir du moment où la carte est sans l'image) Ajouter des couleurs de fond aux cartes cf maquette
[x] Sur mobile, augmenter la taille des titres des cartes thématiques "Énergie" "Économies d'eau"...cf maquette

oumeimaelisbihani commented 1 month ago

Je mets ici les remarques de @ttdm, si tu veux bien donner ton avis @ColineLebaratoux :

Je pense qu'il ne faut pas afficher les tags si aucune aide du projet n'est disponible (dans l'ex: construction&rénovation-> serres agricoles)
En cliquant sur un tag, je m'attend à ce qu'il m'ammène directement sur le projet en question.
J'avais fais une remarque un peu similaire sur l'autre parcours, mais je trouve ça vraiment étonnant d'afficher la thématique puis d'arriver sur une page "aucun projet éligible" (comme pour l'eau dans l'exemple). Peut être arriver directement sur les aides

ColineLebaratoux commented 1 month ago

oui en effet, il faut unqiuement afficher les tags des projets "éligibles" pour l'entreprise.
les tags projets sont cliquables et doivent mener directement sur la fiche projet. Je pense que cette évolution est prévue sur ce ticket #798
Je me charge d'ajouter des projets supplémentaires à la thématique eau ! La prochaine évolution consistera à ajouter un formulaire à la suite des actions/message "aucune aide" pour proposer une solution, de repli à l'utilisateur

oumeimaelisbihani commented 1 month ago

https://tee-preprod-pr856.osc-fr1.scalingo.io/ voila les modifications ! Pour le changement de couleur de l'eau ça se fera automatiquement au merge de l'autre branche spécifique

ColineLebaratoux commented 1 month ago

Merci Oumeima,

[ ] Revoir l'ordre d'affichage des cartes thématiques, en suivant celui de la maquette (encore une fois ça n'a pas changé : bug ?)
[ ] En augmentant la taille des titres sur les cartes, ça coupe le titre "analyses environnementales". Soit on baisse d'un point la taille du texte, on peut peut-être aussi diminuer l'espacement entre les cartes pour gagner en largeur ?

oumeimaelisbihani commented 1 month ago

c'est enfin bon : https://tee-preprod-pr856.osc-fr1.scalingo.io/

ColineLebaratoux commented 1 month ago

Top, merci ! Il reste juste un bug : Les tags sont passés vert sur les cartes jaunes

oumeimaelisbihani commented 1 month ago

https://tee-preprod-pr856.osc-fr1.scalingo.io/ c'est réglé !

betagouv / mission-transition-ecologique

Evolution graphique des questions des objectives en cards #797