From d4f256b7352a13ccd0ba9bd79a7502c83d6e9394 Mon Sep 17 00:00:00 2001 From: simon lehericey Date: Mon, 25 Nov 2019 15:59:58 +0100 Subject: [PATCH 1/6] Use text instead of image for logo - "it is good design practice to use actual text that is styled with CSS rather than image-based text presentation" (https://www.w3.org/WAI/tutorials/images/textual) - mm markup que https://www.gov.uk/ et que https://www.w3.org/WAI/tutorials/images/decorative/#decorative-image-as-part-of-a-text-link --- .../stylesheets/new_design/new_header.scss | 39 +++++++++---------- app/views/layouts/_new_header.haml | 5 ++- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/new_design/new_header.scss b/app/assets/stylesheets/new_design/new_header.scss index e22cffc73..5dd761b73 100644 --- a/app/assets/stylesheets/new_design/new_header.scss +++ b/app/assets/stylesheets/new_design/new_header.scss @@ -23,29 +23,28 @@ $header-mobile-breakpoint: 550px; } .header-logo { - display: inline-block; - height: 100%; - background-size: contain; - background-position: center; - background-repeat: no-repeat; + display: flex; + flex-wrap: wrap; - // Logo large - background-image: image-url("header/logo-ds-wide.svg"); - width: 360px; - margin-right: 4 * $default-spacer; - - // Logo normal - @media (max-width: $header-landing-breakpoint) { - background-image: image-url("header/logo-ds.svg"); - width: 132px; - margin-right: $default-spacer; + img { + margin-right: 10px; } - // Logo narrow - @media (max-width: $header-mobile-breakpoint) { - background-image: image-url("header/logo-ds-narrow.svg"); - width: 32px; - margin-right: 0; + .site-title { + font-size: 24px; + font-weight: bold; + + &.small { + @media (min-width: $header-mobile-breakpoint) { + display: none; + } + } + + &.big { + @media (max-width: $header-mobile-breakpoint) { + display: none; + } + } } } diff --git a/app/views/layouts/_new_header.haml b/app/views/layouts/_new_header.haml index 23abde450..adff751ed 100644 --- a/app/views/layouts/_new_header.haml +++ b/app/views/layouts/_new_header.haml @@ -10,7 +10,10 @@ - if params[:controller] == 'users/commencer' = link_to 'Revenir en arrière', url_for(:back), class: "button", title: "Revenir sur le site de mon administration" - else - = link_to '', root_path_for_profile(nav_bar_profile), class: "header-logo", title: "Revenir à l’accueil" + = link_to root_path_for_profile(nav_bar_profile), class: 'header-logo', title: "Aller à la page d'accueil de demarches-simplifiees.fr" do + = image_tag 'marianne.svg', alt: '', width: 65 + %span.big.site-title> demarches-simplifiees.fr + %span.small.site-title> d-s.fr - if nav_bar_profile == :instructeur && instructeur_signed_in? - current_url = request.path_info From 9296e244524d2b19aeaf5ff29cc59cf152b36aa3 Mon Sep 17 00:00:00 2001 From: simon lehericey Date: Mon, 25 Nov 2019 16:36:51 +0100 Subject: [PATCH 2/6] Reduce marianne image to 65px wide as ie11 cannot resize svg --- app/assets/images/marianne.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/images/marianne.svg b/app/assets/images/marianne.svg index 586b104f7..8ed835709 100644 --- a/app/assets/images/marianne.svg +++ b/app/assets/images/marianne.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From 2f4749517345207a5e28fe7b10b5d18d18fb50ea Mon Sep 17 00:00:00 2001 From: simon lehericey Date: Mon, 25 Nov 2019 16:01:59 +0100 Subject: [PATCH 3/6] Use h1 tag for .hero-tagline --- app/views/root/landing.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/root/landing.html.haml b/app/views/root/landing.html.haml index 3c72e717c..c3bd5de37 100644 --- a/app/views/root/landing.html.haml +++ b/app/views/root/landing.html.haml @@ -6,7 +6,7 @@ .container .hero-wrapper .hero-text - %p.hero-tagline + %h1.hero-tagline %em.hero-tagline-em Effectuer %br<> %em.hero-tagline-em une démarche administrative From 07112f2e15448ada9833d345c8f475d286914f6b Mon Sep 17 00:00:00 2001 From: simon lehericey Date: Mon, 25 Nov 2019 17:02:50 +0100 Subject: [PATCH 4/6] Remove alt on decorative image --- app/views/root/landing.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/root/landing.html.haml b/app/views/root/landing.html.haml index c3bd5de37..0ce2cc7de 100644 --- a/app/views/root/landing.html.haml +++ b/app/views/root/landing.html.haml @@ -14,13 +14,13 @@ %em.hero-tagline-em en ligne .hero-illustration - %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: "dématérialisez" } + %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: '' } .landing-panel.usagers-panel .container .role-panel-wrapper .role-panel-30.role-usagers-image - %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "usager" } + %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: '' } .role-panel-70 %h1.role-panel-title Vous souhaitez effectuer une demande auprès d'une administration ? From 38d433b53d3e1cb968c369acf5ca956101d3d087 Mon Sep 17 00:00:00 2001 From: simon lehericey Date: Mon, 25 Nov 2019 17:16:48 +0100 Subject: [PATCH 5/6] Add some role --- app/views/layouts/_new_header.haml | 6 +++--- app/views/root/_footer.html.haml | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/layouts/_new_header.haml b/app/views/layouts/_new_header.haml index adff751ed..fae04f47a 100644 --- a/app/views/layouts/_new_header.haml +++ b/app/views/layouts/_new_header.haml @@ -3,7 +3,7 @@ - dossier = controller.try(:dossier_for_help) - procedure = controller.try(:procedure_for_help) -%header.new-header{ class: current_page?(root_path) ? nil : "new-header-with-border" } +%header.new-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: 'banner' } .header-inner-content .flex.align-center @@ -37,7 +37,7 @@ %ul.header-right-content - if nav_bar_profile == :instructeur && instructeur_signed_in? %li - .header-search + .header-search{ role: 'search' } = form_tag instructeur_recherche_path, method: :get, class: "form" do = text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: "Rechercher un dossier" %button{ title: "Rechercher" } @@ -45,7 +45,7 @@ - if nav_bar_profile == :user && user_signed_in? && current_user.dossiers.count > 2 %li - .header-search + .header-search{ role: 'search' } = form_tag recherche_dossiers_path, method: :post, class: "form" do = text_field_tag :dossier_id, "", placeholder: "Numéro de dossier" %button{ title: "Rechercher" } diff --git a/app/views/root/_footer.html.haml b/app/views/root/_footer.html.haml index 7a49639b8..da808b1d1 100644 --- a/app/views/root/_footer.html.haml +++ b/app/views/root/_footer.html.haml @@ -1,4 +1,4 @@ -%footer.landing-footer +%footer.landing-footer{ role: 'contentinfo' } .container %ul.footer-columns From 71051441d63e28c7deb17b9825c36d0b4d3a9e3d Mon Sep 17 00:00:00 2001 From: simon lehericey Date: Mon, 25 Nov 2019 17:49:17 +0100 Subject: [PATCH 6/6] only one h1 --- app/views/root/landing.html.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/root/landing.html.haml b/app/views/root/landing.html.haml index 0ce2cc7de..9faada922 100644 --- a/app/views/root/landing.html.haml +++ b/app/views/root/landing.html.haml @@ -23,7 +23,7 @@ %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: '' } .role-panel-70 - %h1.role-panel-title Vous souhaitez effectuer une demande auprès d'une administration ? + %h2.role-panel-title Vous souhaitez effectuer une demande auprès d'une administration ? %p.role-panel-explanation Réalisez vos demandes en toute simplicité et retrouvez vos dossiers en ligne = link_to "Comment trouver ma démarche ?", @@ -67,7 +67,7 @@ .container .cta-panel-wrapper %div - %h1.cta-panel-title Une question, un problème ? + %h2.cta-panel-title Une question, un problème ? %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider %div = contact_link "Contactez-nous", @@ -80,7 +80,7 @@ .container .cta-panel-wrapper %div - %h1.cta-panel-title Administration : vous voulez dématerialiser ? + %h2.cta-panel-title Administration : vous voulez dématerialiser ? %p.cta-panel-explanation Proposez à vos usagers de remplir leurs dossiers en ligne %div = link_to "Découvrez notre outil",