From f3549a7a4d910e01c5f90cf53c38174d58501863 Mon Sep 17 00:00:00 2001 From: Kara Diaby Date: Thu, 8 Sep 2022 15:46:47 +0200 Subject: [PATCH 1/5] Modify CSS overide and import footer from DSFR --- app/assets/stylesheets/admin-procedures-list.scss | 6 ++++++ app/assets/stylesheets/commencer.scss | 4 ++++ app/assets/stylesheets/common.scss | 8 ++++---- app/assets/stylesheets/dsfr.scss | 5 ++++- app/assets/stylesheets/new_footer.scss | 7 ------- app/javascript/entrypoints/main.css | 1 + 6 files changed, 19 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/admin-procedures-list.scss b/app/assets/stylesheets/admin-procedures-list.scss index ece3f2726..16b41aff6 100644 --- a/app/assets/stylesheets/admin-procedures-list.scss +++ b/app/assets/stylesheets/admin-procedures-list.scss @@ -1,4 +1,6 @@ // Push the timestamps column to the right of the row +@import "colors"; + .admin-procedures-list-timestamps { margin-left: auto; } @@ -8,4 +10,8 @@ // See https://stackoverflow.com/questions/57516373/image-stretching-in-flexbox-in-safari .admin-procedures-list-row.infos { align-items: flex-start; + + a { + color: $blue-france-500; + } } diff --git a/app/assets/stylesheets/commencer.scss b/app/assets/stylesheets/commencer.scss index cb43fc95a..517a87f57 100644 --- a/app/assets/stylesheets/commencer.scss +++ b/app/assets/stylesheets/commencer.scss @@ -11,6 +11,10 @@ margin-bottom: 2 * $default-spacer; } + .optional-on-small-screens { + color: #FFFFFF; + } + @media (max-width: 450px) { .optional-on-small-screens { display: none; diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index db970ca7c..d3c4c3131 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -45,15 +45,15 @@ strong { font-weight: bold; } -a { - color: $blue-france-500; -} - a[target="_blank"]::after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); margin: 0 3px 0 5px; } +a { + color: $blue-france-500; +} + em { font-style: italic; } diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss index 7cf11996a..f05de18fa 100644 --- a/app/assets/stylesheets/dsfr.scss +++ b/app/assets/stylesheets/dsfr.scss @@ -1,6 +1,6 @@ @import "colors"; // override default text underline of dsfr -body [href] { +body [href]:not([class^="fr-"]):not(.fr-footer__bottom-copy *) { background-image: none; } @@ -11,6 +11,9 @@ select { background: $white; } +#footer a { + color: #333333; +} // with Marianne font, weight of font is less bolder, so bold it up .button.primary { font-weight: bold; diff --git a/app/assets/stylesheets/new_footer.scss b/app/assets/stylesheets/new_footer.scss index 659311e5a..8a036f332 100644 --- a/app/assets/stylesheets/new_footer.scss +++ b/app/assets/stylesheets/new_footer.scss @@ -3,13 +3,6 @@ @import "mixins"; @import "placeholders"; -footer { - background-color: $light-grey; - border-top: 1px solid $border-grey; - bottom: 0; - width: 100%; -} - .landing-footer { @include vertical-padding(72px); } diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css index f84c191f7..e350e2ebf 100644 --- a/app/javascript/entrypoints/main.css +++ b/app/javascript/entrypoints/main.css @@ -16,3 +16,4 @@ @import '@gouvfr/dsfr/dist/component/search/search.css'; @import '@gouvfr/dsfr/dist/component/translate/translate.css'; @import '@gouvfr/dsfr/dist/component/header/header.css'; +@import '@gouvfr/dsfr/dist/component/footer/footer.css'; From 2c4a8e81ba5017f3b55df7529eadcf475f801d86 Mon Sep 17 00:00:00 2001 From: Kara Diaby Date: Thu, 8 Sep 2022 15:47:05 +0200 Subject: [PATCH 2/5] footer layout --- app/views/users/_general_footer_row.html.haml | 26 +--- app/views/users/_procedure_footer.html.haml | 129 +++++++++++------- 2 files changed, 84 insertions(+), 71 deletions(-) diff --git a/app/views/users/_general_footer_row.html.haml b/app/views/users/_general_footer_row.html.haml index d78f2572a..d41ff961d 100644 --- a/app/views/users/_general_footer_row.html.haml +++ b/app/views/users/_general_footer_row.html.haml @@ -1,19 +1,7 @@ - -%nav{ 'aria-label': t('links.footer.nav_aria', application_name: APPLICATION_NAME) } - %ul.footer-row.footer-bottom-line.footer-site-links - %li.footer-link-accessibilite> - = link_to t("links.footer.accessibilite.label"), t("links.footer.accessibilite.url"), title: t("links.footer.accessibilite.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer" - %li.footer-link-cgu> - = link_to t("links.footer.cgu.label"), t("links.footer.cgu.url"), title: t("links.footer.cgu.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer" - %li.footer-link-mentions-legales> - = link_to t("links.footer.mentions_legales.label"), t("links.footer.mentions_legales.url"), title: t("links.footer.mentions_legales.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer" - %li.footer-link-doc> - = link_to t("links.footer.doc.label"), t("links.footer.doc.url"), title: t("links.footer.doc.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer" - %li.footer-link-code> - = link_to t("links.footer.code.label"), t("links.footer.code.url"), title: t("links.footer.code.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer" - %li.footer-link-contact> - = contact_link t("links.footer.contact_technique.label"), dossier_id: dossier&.id, title: t("links.footer.contact_technique.title"), class: "footer-link" - %li.footer-link-aide> - = link_to t("links.footer.aide.label"), t("links.footer.aide.url"), title: t("links.footer.aide.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer" - %li.footer-link-solidarite-numerique> - = link_to t("links.footer.solidarite_numerique.label"), t("links.footer.solidarite_numerique.url"), title: t("links.footer.solidarite_numerique.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer" +%ul.fr-footer__bottom-list + %li.fr-footer__bottom-item + = link_to t("links.footer.accessibilite.label"), t("links.footer.accessibilite.url"), title: t("links.footer.accessibilite.title"), class: "fr-footer__bottom-link", rel: "noopener noreferrer" + %li.fr-footer__bottom-item + = link_to t("links.footer.mentions_legales.label"), t("links.footer.mentions_legales.url"), title: t("links.footer.mentions_legales.title"), class: "fr-footer__bottom-link", rel: "noopener noreferrer" + %li.fr-footer__bottom-item + = link_to t("links.footer.cookies.title"), suivi_path, title: t("links.footer.aide.title"), class: "fr-footer__bottom-link" diff --git a/app/views/users/_procedure_footer.html.haml b/app/views/users/_procedure_footer.html.haml index a03b2cf56..aa3959976 100644 --- a/app/views/users/_procedure_footer.html.haml +++ b/app/views/users/_procedure_footer.html.haml @@ -1,63 +1,88 @@ -%footer.procedure-footer - .container - - service = procedure.service - - if service.present? - %nav{ 'aria-label': t('users.procedure_footer.aria_label', procedure_name: dossier.present? ? dossier.procedure.libelle : 'la procédure en ligne') } - .footer-row.footer-columns - .footer-column - %p.footer-header= I18n.t('users.procedure_footer.managed_by.header') - %ul +%footer.fr-footer#footer{ role: "contentinfo" } + - service = procedure.service + .fr-footer__top + .fr-container + .fr-grid-row.fr-grid-row--start.fr-grid-row--gutters + .fr-col-12.fr-col-sm-4.fr-col-md-4 + %h3.fr-footer__top-cat= I18n.t('users.procedure_footer.contact.header') + %ul.fr-footer__top-list + - if dossier.present? && dossier.messagerie_available? %li - = service.nom - %br - = service.organisme - %br - = string_to_html(service.adresse, wrapper_tag = 'span') - - .footer-column - %p.footer-header= I18n.t('users.procedure_footer.contact.header') - %ul + = link_to I18n.t('users.procedure_footer.contact.in_app_mail.link'), messagerie_dossier_path(dossier), class: 'fr-footer__top-link' + - elsif service.present? %li - - if dossier.present? && dossier.messagerie_available? - = I18n.t('users.procedure_footer.contact.in_app_mail.prefix') - = link_to I18n.t('users.procedure_footer.contact.in_app_mail.link'), messagerie_dossier_path(dossier) - - else - = I18n.t('users.procedure_footer.contact.email.prefix') - = link_to service.email, "mailto:#{service.email}" + = link_to I18n.t('users.procedure_footer.contact.email.link', service_email: service.email), "mailto:#{service.email}", class: 'fr-footer__top-link' + %li + - horaires = "#{I18n.t('users.procedure_footer.contact.schedule.prefix')}#{formatted_horaires(service.horaires)}" + = link_to service.telephone_url, class: 'fr-footer__top-link' do + = I18n.t('users.procedure_footer.contact.phone.link', service_telephone: service.telephone) + %br + = horaires + %li + = link_to I18n.t('users.procedure_footer.contact.stats.link'), statistiques_path(procedure.path), class: 'fr-footer__top-link', rel: 'noopener' - - if service.telephone.present? + + - politiques = politiques_conservation_de_donnees(procedure) + - if politiques.present? + .fr-col-12.fr-col-sm-4.fr-col-md-4 + %h3.fr-footer__top-cat= I18n.t('users.procedure_footer.legals.header') + %ul.fr-footer__top-list + - politiques.each do |politique| %li - = I18n.t('users.procedure_footer.contact.phone.prefix') - = link_to service.telephone, service.telephone_url - + = link_to t("users.procedure_footer.legals.data_retention_url"), class: "fr-footer__top-link" do + = politique + - if procedure.deliberation.attached? %li - - horaires = "#{I18n.t('users.procedure_footer.contact.schedule.prefix')}#{formatted_horaires(service.horaires)}" - = simple_format(horaires, {}, wrapper_tag: 'span') - + = link_to url_for(procedure.deliberation), rel: 'noopener', class: 'fr-footer__top-link' do + = I18n.t("users.procedure_footer.legals.terms") + - else %li - = I18n.t('users.procedure_footer.contact.stats.prefix') - = link_to I18n.t('users.procedure_footer.contact.stats.cta'), statistiques_path(procedure.path) + = link_to I18n.t("users.procedure_footer.legals.terms"), procedure.cadre_juridique, rel: 'noopener', class: 'fr-footer__top-link' + + - if procedure.lien_dpo.present? + %li + = link_to url_or_email_to_lien_dpo(procedure), rel: 'noopener', class: 'fr-footer__top-link' do + = I18n.t("users.procedure_footer.legals.dpo") - - politiques = politiques_conservation_de_donnees(procedure) - - if politiques.present? - .footer-column - %p.footer-header= I18n.t('users.procedure_footer.legals.header') - %ul - - politiques.each do |politique| - %li= politique - - if procedure.deliberation.attached? - %li - = link_to url_for(procedure.deliberation), target: '_blank', rel: 'noopener' do - = I18n.t("users.procedure_footer.legals.terms") - - else - %li - = link_to I18n.t("users.procedure_footer.legals.terms"), procedure.cadre_juridique, target: '_blank', rel: 'noopener' + .fr-col-12.fr-col-sm-4.fr-col-md-4 + %h3.fr-footer__top-cat= I18n.t('users.procedure_footer.dematerialisation.header') + %ul.fr-footer__top-list + %li + = link_to t('users.procedure_footer.dematerialisation.title_1'), commencer_dossier_vide_path(path: procedure.path), rel: 'noopener', class: 'fr-footer__top-link' + %li + = link_to t('users.procedure_footer.dematerialisation.title_2'),t('users.procedure_footer.dematerialisation.link'), rel: 'noopener', class: 'fr-footer__top-link' - - if procedure.lien_dpo.present? - %li - = link_to url_or_email_to_lien_dpo(procedure), target: '_blank', rel: 'noopener' do - = I18n.t("users.procedure_footer.legals.dpo") + .fr-container + .fr-footer__body + .fr-footer__brand.fr-enlarge-link + = link_to t("links.provider.url"), title: t("links.provider.title"), 'aria-label': t("links.provider.name") do + %p.fr-logo + premier + %br + ministre - = render partial: 'users/general_footer_row', locals: { dossier: dossier } + - if service.present? + .fr-footer__content + %p.fr-footer__content-desc + = I18n.t('users.procedure_footer.managed_by.header') + = "#{service.nom}," + = "#{service.organisme}," + = string_to_html(service.adresse, wrapper_tag = 'span') + %ul.fr-footer__content-list + %li.fr-footer__content-item + = link_to t('users.procedure_footer.official_links.legifrance.title'), t('users.procedure_footer.official_links.legifrance.url'), class: 'fr-footer__content-link', target: '_blank' + %li.fr-footer__content-item + = link_to t('users.procedure_footer.official_links.gouvernement.title'), t('users.procedure_footer.official_links.gouvernement.url'), class: 'fr-footer__content-link', target: '_blank' + %li.fr-footer__content-item + = link_to t('users.procedure_footer.official_links.service_public.title'), t('users.procedure_footer.official_links.service_public.url'), class: 'fr-footer__content-link', target: '_blank' + %li.fr-footer__content-item + = link_to t('users.procedure_footer.official_links.data_gouv.title'), t('users.procedure_footer.official_links.data_gouv.url'), class: 'fr-footer__content-link', target: '_blank' + .fr-footer__bottom + = render partial: 'users/general_footer_row', locals: { dossier: dossier } + .fr-footer__bottom-copy + %p + Sauf mention contraire, tous les contenus de ce site sont sous + %a{ href: "https://github.com/etalab/licence-ouverte/blob/master/LO.md", target:"_blank" } licence etalab-2.0 + %br From 12b66513ca3325d5f0625bba652515a4a47c289e Mon Sep 17 00:00:00 2001 From: Kara Diaby Date: Thu, 8 Sep 2022 15:47:23 +0200 Subject: [PATCH 3/5] locales --- config/locales/links.en.yml | 12 ------ config/locales/links.fr.yml | 4 ++ .../views/users/procedure_footer/en.yml | 13 +++--- .../views/users/procedure_footer/fr.yml | 40 +++++++++++++------ 4 files changed, 37 insertions(+), 32 deletions(-) diff --git a/config/locales/links.en.yml b/config/locales/links.en.yml index 0124503e9..cd60096b1 100644 --- a/config/locales/links.en.yml +++ b/config/locales/links.en.yml @@ -17,9 +17,7 @@ en: title: "Accessibility declaration" url: "https://doc.demarches-simplifiees.fr/declaration-daccessibilite" aide: - label: "Help" title: "Frequently Asked Questions" - url: "https://faq.demarches-simplifiees.fr" api_doc: label: "API Documentation" title: "API Documentation" @@ -39,9 +37,6 @@ en: contact: label: "Contact" title: "Contact us" - contact_technique: - label: "Technical contact" - title: "Technical contact for bug report or security feedback" doc: label: "Documentation" title: "Our Documentation" @@ -74,9 +69,6 @@ en: label: "Security" title: "Security policy" url: "https://github.com/betagouv/demarches-simplifiees.fr/blob/main/SECURITY.md" - stats: - label: "Statistics" - title: "Statistics about demarches-simplifiees" status_page: label: "Disponibility" title: "Disponibility and availability" @@ -88,7 +80,3 @@ en: label: "Online workshop registration" title: "Registration for our online workshop" url: "https://app.livestorm.co/demarches-simplifiees" - solidarite_numerique: - label: "Do you need assistance with your digital file?" - title: "Do you need assistance with your online process ?" - url: "https://www.solidarite-numerique.fr/cartographie/" diff --git a/config/locales/links.fr.yml b/config/locales/links.fr.yml index 5f7157431..49f7f8789 100644 --- a/config/locales/links.fr.yml +++ b/config/locales/links.fr.yml @@ -92,3 +92,7 @@ fr: label: "Besoin d'aide avec vos démarches en ligne ?" title: "Avez-vous besoin d'aide concernant vos démarchez informatisées, essayez solidarite-numerique.fr" url: "https://www.solidarite-numerique.fr/cartographie/" + cookies: + label: Gestion des cookies + title: Gestion des cookies + diff --git a/config/locales/views/users/procedure_footer/en.yml b/config/locales/views/users/procedure_footer/en.yml index 4935b55d5..755e7cb80 100644 --- a/config/locales/views/users/procedure_footer/en.yml +++ b/config/locales/views/users/procedure_footer/en.yml @@ -1,25 +1,22 @@ en: users: procedure_footer: - aria_label: "Know more about %{procedure_name}" managed_by: header: 'This procedure is managed by :' contact: header: 'Ask a question about your file :' in_app_mail: - prefix: 'Directly :' - link: "via the chat" + link: "Direclty via the chat" email: - prefix: 'By mail :' + link: "Direcly by email %{service_email}" phone: - prefix: 'By phone :' + link: 'By phone %{service_telephone}' schedule: prefix: 'Hours : ' stats: - prefix: 'Stats :' - cta: "see the procedure's stats" + link: "See the procedure's stats" legals: header: "Legals :" - data_retention: "Within %{application_name} : %{duree_conservation_dossiers_dans_ds} months" + data_retention: "%{application_name} : %{duree_conservation_dossiers_dans_ds} months" terms: "Laws regarding this data collection" dpo: "Contact the Data Protection Officer" diff --git a/config/locales/views/users/procedure_footer/fr.yml b/config/locales/views/users/procedure_footer/fr.yml index 6861308ae..c14a81a00 100644 --- a/config/locales/views/users/procedure_footer/fr.yml +++ b/config/locales/views/users/procedure_footer/fr.yml @@ -1,25 +1,41 @@ fr: users: procedure_footer: - aria_label: "En savoir plus sur %{procedure_name}" managed_by: - header: 'Cette démarche est gérée par :' + header: 'Cette démarche est gérée par' contact: - header: 'Poser une question sur votre dossier :' + header: 'Poser une question sur votre dossier' in_app_mail: - prefix: 'Directement :' - link: "par la messagerie" + link: "Directement par la messagerie" email: - prefix: 'Par email :' + link: "Directement par courriel : %{service_email}" phone: - prefix: 'Par téléphone :' + link: 'Par téléphone au %{service_telephone}' schedule: - prefix: 'Horaires : ' + prefix: "Horaires d'ouverture : " stats: - prefix: 'Statistiques :' - cta: "voir les statistiques de la démarche" + link: "Voir les statistiques de la démarche" legals: - header: "Cadre juridique :" - data_retention: "Dans %{application_name} : %{duree_conservation_dossiers_dans_ds} mois" + header: "Cadre juridique" + data_retention: "%{application_name} : %{duree_conservation_dossiers_dans_ds} mois" + data_retention_url: "https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/archivage-longue-duree-des-demarches" terms: "Texte cadrant la demande d'information" dpo: "Contacter le Délégué à la Protection des Données" + official_links: + legifrance: + title: legifrance.gouv.fr + url: "https://legifrance.gouv.fr" + gouvernement: + title: gouvernement.fr + url: "https://gouvernement.fr" + service_public: + title: service-public.fr + url: "https://service-public.fr" + data_gouv: + title: data.gouv.fr + url: "https://data.gouv.fr" + dematerialisation: + header: Dematérialisation + title_1: Accès au formulaire PDF à imprimer + title_2: Les démarches administratives en ligne + link: "https://www.solidarite-numerique.fr/cartographie/" From 3e43597440887b5e2859915ddd0ff128a1364229 Mon Sep 17 00:00:00 2001 From: Kara Diaby Date: Tue, 13 Sep 2022 11:25:42 +0200 Subject: [PATCH 4/5] tests --- spec/helpers/conservation_de_donnees_helper_spec.rb | 2 +- spec/views/users/_procedure_footer.html.haml_spec.rb | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/spec/helpers/conservation_de_donnees_helper_spec.rb b/spec/helpers/conservation_de_donnees_helper_spec.rb index 143f2f65b..6a4887cb4 100644 --- a/spec/helpers/conservation_de_donnees_helper_spec.rb +++ b/spec/helpers/conservation_de_donnees_helper_spec.rb @@ -8,7 +8,7 @@ RSpec.describe ConservationDeDonneesHelper, type: :helper do let(:dans_ds) { 3 } let(:hors_ds) { 6 } - it { is_expected.to eq(["Dans #{APPLICATION_NAME} : 3 mois"]) } + it { is_expected.to eq(["#{APPLICATION_NAME} : 3 mois"]) } end context "when the retention time is not set" do diff --git a/spec/views/users/_procedure_footer.html.haml_spec.rb b/spec/views/users/_procedure_footer.html.haml_spec.rb index 87605fd18..d74308dca 100644 --- a/spec/views/users/_procedure_footer.html.haml_spec.rb +++ b/spec/views/users/_procedure_footer.html.haml_spec.rb @@ -16,7 +16,6 @@ describe 'users/procedure_footer.html.haml', type: :view do it "affiche les liens usuels requis" do expect(subject).to have_link("Accessibilité") - expect(subject).to have_link("CGU") expect(subject).to have_link("Mentions légales") end From ba5855814663cf33450af7bbd0abdfa8caaee6f6 Mon Sep 17 00:00:00 2001 From: Kara Diaby Date: Tue, 13 Sep 2022 17:14:34 +0200 Subject: [PATCH 5/5] fix accessibiliy problems --- app/views/users/dossiers/_merci.html.haml | 2 +- app/views/users/dossiers/identite.html.haml | 2 +- app/views/users/dossiers/siret.html.haml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/users/dossiers/_merci.html.haml b/app/views/users/dossiers/_merci.html.haml index a6ba51366..cf978b6db 100644 --- a/app/views/users/dossiers/_merci.html.haml +++ b/app/views/users/dossiers/_merci.html.haml @@ -2,7 +2,7 @@ .container = image_tag('user/envoi-dossier.svg', alt: '', class: 'mt-8') %h1.mt-4.mb-3.mx-0= t('views.users.dossiers.merci.thanks') - %p.send.m-2.text-lg + %h2.send.m-2.text-lg = t('views.users.dossiers.merci.dossier_send_l1') %strong= procedure.libelle = t('views.users.dossiers.merci.dossier_send_l2') diff --git a/app/views/users/dossiers/identite.html.haml b/app/views/users/dossiers/identite.html.haml index b78da138f..a88f947ef 100644 --- a/app/views/users/dossiers/identite.html.haml +++ b/app/views/users/dossiers/identite.html.haml @@ -4,7 +4,7 @@ - if !dossier_submission_is_closed?(@dossier) = form_for @dossier.individual, url: update_identite_dossier_path(@dossier), html: { class: "form" } do |f| - %h1= t('views.users.dossiers.identite.identity_data') + %h2.huge-title= t('views.users.dossiers.identite.identity_data') %p.mb-1= t('views.users.dossiers.identite.complete_data') diff --git a/app/views/users/dossiers/siret.html.haml b/app/views/users/dossiers/siret.html.haml index 550c4518a..436e1076d 100644 --- a/app/views/users/dossiers/siret.html.haml +++ b/app/views/users/dossiers/siret.html.haml @@ -2,7 +2,7 @@ - if !dossier_submission_is_closed?(@dossier) = form_for current_user, url: siret_dossier_path(@dossier), html: { class: 'form', method: 'post' } do |f| - %h1 Identifier votre établissement + %h2.huge-title Identifier votre établissement %p.mb-1 Merci de remplir le numéro de SIRET de votre entreprise, administration ou association pour commencer la démarche.