Migration des cards du parcours prise RDV usager au DSFR #4894
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| section.py-2.rdv-background-color-alt-blue-ecume | ||
| .fr-container | ||
| .fr-col-12.fr-col-lg-10.fr-col-offset-lg-1 | ||
| h1.fr-mb-3w.rdv-color-active-blue | ||
| = render(current_domain.search_banner_template_name, context: context) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,26 @@ | ||
| = render "search/selected_motif_recap", context: context | ||
| - if context.shown_lieux.empty? | ||
| = render "search/nothing_to_show", context: context | ||
| - else | ||
| h3 = t(".select_lieu") | ||
| p = t(".lieu_available", count: context.shown_lieux.count) | ||
| ul.fr-raw-list | ||
| - context.next_availability_by_lieux.each do |lieu, next_availability| | ||
| - motif = next_availability.motif | ||
| - if motif.restriction_for_rdv.blank? | ||
| - link = link_to "#{lieu.name} - #{lieu.address}", prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at)) | ||
| - else | ||
| - link = link_to "#{lieu.name} - #{lieu.address}", prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at)), "data-turbolinks": false, data: { toggle: "modal", target: "#js-rdv-restriction-motif#{lieu.id}" } | ||
| = render "/common/modal", id: "js-rdv-restriction-motif#{lieu.id}", title: "À lire avant de prendre un rendez-vous", confirm_path: prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at)) do | ||
| = restriction_for_rdv_to_html(motif) | ||
|
There was a problem hiding this comment. je ne suis pas sûr que ça soit une bonne idée de mettre la modale hors du j’aurais tendance à dire que ça me dérange pas trop de répéter la condition There was a problem hiding this comment. Intuitivement, j'aurais dit la même chose que toi Dans les faits :
À terme, j'aimerais bien refondre ce système, car ici, on répète x fois la même modale. Mais je pense que ça peut être fait dans une autre PR et ça peut attendre de savoir ce qu’on veut faire sur cette partie en terme produit. There was a problem hiding this comment. très clair, merci d’avoir pris le temps de répondre 🙇 |
||
| li.fr-card.fr-enlarge-link.fr-card--lg.fr-card--horizontal.fr-mb-3w | ||
| .fr-card__body | ||
|
There was a problem hiding this comment. J'ai des gros doutes sur comment on présente l'information dans cette card. D'un côté c'est très bien qu'on enlève le service, mais on a beauuuucoup fait descendre la date de prochaine dispo dans la hiérarchie de l'information, et on a cassé l'alignement qui permettait de comparer rapidement les adresses et les dates. En tant qu'usager, à cette étape, j'essaye d'identifier le lieux qui a la combinaison "Adresse / date de prochaine dispo" la plus partique pour moi. Dans l'implémentation précédente, ces deux infos étaient alignées entre deux lieux successifs, donc je pouvais les comparer facilement. Maintenant je perds cet alignement, donc c'est plus difficile à comparerr, et la date de prochaine dispo est beaucoup moins visible. There was a problem hiding this comment. Concernant cette carte, un travail de personnalisation de l'élément card avait été prévu au départ, pour faire ressortir la date dans un encadré bleu à l'intérieur de la card. Après une première investigation, il m'a semblé couteux que de continuer sur cette piste, et risqué quant à l'accessibilité du composant. Tu as raison quant au niveau de l'organisation des infos, mais le second parti pris a été de prioriser le rendu en mobile, en assumant que la majeure partie du traffic ce concentrait sur ce device. Du coup la question ne se pose pas étant donné que la disposition des info ne permet déjà pas ce type de comparaison en mobile. Toutefois, en épluchant la doc, il est spécifié qu'on peut changer la couleur du texte de détail par une couleur plus prononcée. Je vais en discuter avec le trio pour voir ce qu'on peut faire a ce niveau là |
||
| .fr-card__content | ||
| .fr-card__title = link | ||
| p.fr-card__desc = lieu.organisation.name | ||
| .fr-card__end | ||
| .fr-card__detail | ||
| p.fr-text.rdv-color-text-default-grey | ||
| span.fr-icon-calendar-2-fill.fr-mr-1w | ||
| = "#{t('.next_availability')} " | ||
| strong= l(next_availability.starts_at, format: :human) | ||
|
There was a problem hiding this comment. je crois que la syntaxe si tu souhaites un trailing space peut-être « simplifiée » en There was a problem hiding this comment. Justement non, ça ne fonctionne pas There was a problem hiding this comment. arg :/ je crois qu’il faut qu’on mette à jour slim. merci pour ta réponse. |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,35 @@ | ||
| .card | ||
| .card-body | ||
| = link_to path_to_service_selection(params), class: "d-block stretched-link", title: "Retour à la sélection du service" do | ||
| .row | ||
| .col-auto.align-self-center | ||
| i.fa.fa-chevron-left | ||
| .col | ||
| h2.fr-pb-0.fr-mb-0 = context.service.name | ||
| - if context.unique_motifs_by_name_and_location_type.empty? | ||
| = render "search/nothing_to_show", context: context | ||
| - else | ||
| h2 Sélectionnez le motif de votre RDV : | ||
| ul.fr-raw-list | ||
| - context.unique_motifs_by_name_and_location_type.each do |motif| | ||
| li.fr-card.fr-enlarge-link.fr-card--horizontal.fr-mb-2w | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. On a déjà fait une étude sur le sujet aujourd’hui avec Teo et Nessrine. There was a problem hiding this comment. @victormours voici une contre-proposition pour ne pas supprimer le bandeau, mais mieux son apparition : #4918 |
||
| .fr-card__body | ||
| .fr-card__content | ||
| .fr-card__title | ||
| = link_to motif.name, prendre_rdv_path(context.query_params.merge(motif_name_with_location_type: motif.name_with_location_type)) | ||
| .fr-card__start | ||
| ul.fr-badges-group | ||
| - case motif.location_type | ||
| - when "phone" | ||
| li.fr-badge.fr-badge--blue-cumulus.fr-icon-phone-fill.fr-badge--icon-left = motif.human_attribute_value(:location_type) | ||
| - when "home" | ||
| li.fr-badge.fr-badge--blue-cumulus.fr-icon-home-4-fill.fr-badge--icon-left = motif.human_attribute_value(:location_type) | ||
| - when "public_office" | ||
| li.fr-badge.fr-badge--blue-cumulus.fr-icon-building-fill.fr-badge--icon-left = motif.human_attribute_value(:location_type) | ||
| - when "visio" | ||
| li.fr-badge.fr-badge--blue-cumulus.fr-icon-mac-fill.fr-badge--icon-left = motif.human_attribute_value(:location_type) | ||
| - else | ||
| li.fr-badge.fr-badge--blue-cumulus = motif.human_attribute_value(:location_type) | ||
| - if motif.collectif? | ||
| li.fr-badge.fr-badge--purple-glycine.fr-icon-team-fill.fr-badge--icon-left = "RDV collectif" | ||
| = render "search/referent_booking_card", context: context | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| - if organisation.website? | ||
| .fr-card__detail.fr-text--sm | ||
| span.fr-icon-global-fill.fr-mr-1w | ||
| = organisation.website | ||
| - if organisation.phone_number? | ||
| .fr-card__detail.fr-text--sm | ||
| span.fr-icon-phone-fill.fr-mr-1w | ||
| = organisation.phone_number | ||
| - if organisation.email? | ||
| .fr-card__detail.fr-text--sm | ||
| span.fr-icon-mail-fill.fr-mr-1w | ||
| = organisation.email |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,19 @@ | ||
| = render "search/selected_motif_recap", context: context | ||
| - if context.next_availability_by_motifs_organisations.empty? | ||
| = render "search/nothing_to_show", context: context | ||
| - else | ||
| h3 Sélectionnez la structure avec laquelle prendre RDV : | ||
| ul.fr-raw-list | ||
| - context.next_availability_by_motifs_organisations.each do |organisation, next_availability| | ||
| li.fr-card.fr-enlarge-link.fr-card--horizontal.fr-mb-2w | ||
| .fr-card__body | ||
| .fr-card__content | ||
| .fr-card__title | ||
| = link_to organisation.name, prendre_rdv_path(context.query_params.merge(user_selected_organisation_id: organisation.id, date: next_availability.starts_at)) | ||
| .fr-card__end | ||
| = render "search/organisation_card_subtitles", organisation: organisation | ||
| .fr-card__detail | ||
| p.fr-text.fr-mt-3w.rdv-color-text-default-grey | ||
| span.fr-icon-calendar-2-fill.fr-mr-1w | ||
| ' Prochaine disponibilité le | ||
| strong= l(next_availability.starts_at, format: :human) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,11 @@ | ||
| - if context.unique_motifs_by_name_and_location_type.empty? | ||
| = render "search/nothing_to_show", context: context | ||
| - else | ||
| h2 Sélectionnez le service avec qui vous voulez prendre un RDV : | ||
| - context.services.each do |service| | ||
| .fr-card.fr-enlarge-link.fr-card--horizontal.fr-mb-2w | ||
| .fr-card__body | ||
| .fr-card__content | ||
| .fr-card__title | ||
| = link_to service.name, prendre_rdv_path(context.query_params.merge(service_id: service.id)) | ||
| = render "search/referent_booking_card", context: context |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,15 @@ | ||
| = render "prescription_banner" | ||
|
|
||
| / Adress selection partials have multiple sections | ||
| - if @context.current_step == :address_selection | ||
| // On fait du spécifique pour la bannière de la page de sélection d'adresse en attendant qu’on fasse la refonte au DSFR | ||
| section.py-2.rdv-background-color-flat-blue-ecume | ||
| .fr-container | ||
| h1.mb-3.rdv-color-white | ||
| = render(current_domain.search_banner_template_name, context: @context) | ||
| = render(current_domain.address_selection_template_name, context: @context) | ||
| - else | ||
| = render("banner", context: @context) | ||
| .fr-container | ||
| section.py-4.fr-col-12.fr-col-lg-10.fr-col-offset-lg-1 | ||
| = render @context, context: @context |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note pour moi-même : on n’affiche plus le nom du service dorénavant dans la card. J’imagine que c’est volontaire car le nom du service est déjà présent tout en haut 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes c’est volontaire et c’est exactement pour ça qu’on la retiré