From 6c73766e0dd82c117832d6512a418d19bc02c580 Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Mon, 4 Dec 2017 11:29:22 +0100 Subject: [PATCH 1/2] [fix #1013] fix logo on ie11 --- app/assets/stylesheets/new_design/_mixins.scss | 13 +++++++++++++ app/assets/stylesheets/new_design/new_footer.scss | 6 ++++++ .../stylesheets/new_design/procedure-logo.scss | 15 ++++++--------- .../stylesheets/new_design/procedure_list.scss | 6 ++---- .../stylesheets/new_design/procedures_show.scss | 5 ----- app/views/layouts/_new_footer.html.haml | 12 ++++++------ .../new_gestionnaire/procedures/show.html.haml | 4 +--- 7 files changed, 34 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/new_design/_mixins.scss b/app/assets/stylesheets/new_design/_mixins.scss index 6e40c4a78..52d5594a6 100644 --- a/app/assets/stylesheets/new_design/_mixins.scss +++ b/app/assets/stylesheets/new_design/_mixins.scss @@ -7,3 +7,16 @@ padding-top: $value; padding-bottom: $value; } + +// due to issues that won't be fixed in ie11 regarding images and flex +// https://connect.microsoft.com/IE/Feedback/Details/1218984 +// we are obliged to use a background-image +@mixin ie-compatible-background-image($image-url: false) { + display: block; + background-size: contain; + background-repeat: no-repeat; + + @if $image-url { + background-image: image-url($image-url); + } +} diff --git a/app/assets/stylesheets/new_design/new_footer.scss b/app/assets/stylesheets/new_design/new_footer.scss index 2c414559b..21e7a9185 100644 --- a/app/assets/stylesheets/new_design/new_footer.scss +++ b/app/assets/stylesheets/new_design/new_footer.scss @@ -55,12 +55,18 @@ footer { } .footer-logo-rf { + @include ie-compatible-background-image("footer/logo-rf.svg"); + width: 75px; + height: 44px; margin-bottom: 14px; } .footer-logo-beta-gouv-fr { + @include ie-compatible-background-image("footer/logo-beta-gouv-fr.svg"); + width: 190px; + height: 32px; } .footer-link a { diff --git a/app/assets/stylesheets/new_design/procedure-logo.scss b/app/assets/stylesheets/new_design/procedure-logo.scss index e6de617d9..3f5ba0cc3 100644 --- a/app/assets/stylesheets/new_design/procedure-logo.scss +++ b/app/assets/stylesheets/new_design/procedure-logo.scss @@ -1,17 +1,14 @@ @import "colors"; @import "constants"; +@import "mixins"; .procedure-logo { - display: flex; - background: #FFFFFF; + @include ie-compatible-background-image(); + + background-color: #FFFFFF; + background-position: 95% 50%; border: 1px solid $border-grey; height: 84px; width: 84px; - margin-right: 2 * $default-spacer; - - img { - margin: auto; - max-width: 80%; - max-height: 80%; - } + margin-right: $default-padding; } diff --git a/app/assets/stylesheets/new_design/procedure_list.scss b/app/assets/stylesheets/new_design/procedure_list.scss index a4fe579f2..b025e0889 100644 --- a/app/assets/stylesheets/new_design/procedure_list.scss +++ b/app/assets/stylesheets/new_design/procedure_list.scss @@ -26,13 +26,11 @@ } .procedure-logo { + @include ie-compatible-background-image(); + height: 93px; width: 93px; margin-right: 3 * $default-spacer; - flex-shrink: 0; - background-image: url("your/url/here"); - background-size: contain; - background-repeat: no-repeat; background-position: 95% 50%; } diff --git a/app/assets/stylesheets/new_design/procedures_show.scss b/app/assets/stylesheets/new_design/procedures_show.scss index bff98120b..52798b0d5 100644 --- a/app/assets/stylesheets/new_design/procedures_show.scss +++ b/app/assets/stylesheets/new_design/procedures_show.scss @@ -3,11 +3,6 @@ @import "constants"; #procedure-show { - .procedure-logo { - margin-right: $default-padding; - flex-shrink: 0; - } - h1 { color: $black; font-size: 22px; diff --git a/app/views/layouts/_new_footer.html.haml b/app/views/layouts/_new_footer.html.haml index 7d928a5ce..a43c4f0ab 100644 --- a/app/views/layouts/_new_footer.html.haml +++ b/app/views/layouts/_new_footer.html.haml @@ -4,13 +4,13 @@ %li.footer-column %ul.footer-logos %li - = link_to image_tag("footer/logo-rf.svg", - :class => "footer-logo footer-logo-rf"), - "http://www.gouvernement.fr/" + = link_to "http://www.gouvernement.fr/" do + %span.footer-logo.footer-logo-rf + %li - = link_to image_tag("footer/logo-beta-gouv-fr.svg", - :class => "footer-logo footer-logo-beta-gouv-fr"), - "https://beta.gouv.fr/" + = link_to "https://beta.gouv.fr/" do + %span.footer-logo.footer-logo-beta-gouv-fr + %li.footer-column %ul.footer-links diff --git a/app/views/new_gestionnaire/procedures/show.html.haml b/app/views/new_gestionnaire/procedures/show.html.haml index 90f9104d1..fbf19c2a3 100644 --- a/app/views/new_gestionnaire/procedures/show.html.haml +++ b/app/views/new_gestionnaire/procedures/show.html.haml @@ -4,9 +4,7 @@ .accompagnateur-header .container.flex - .procedure-logo - - if @procedure.logo.present? - = image_tag @procedure.logo, alt: "Logo de la procédure" + .procedure-logo{ style: @procedure.logo.present? ? "background-image: url(#{@procedure.logo.url})" : nil } .procedure-header %h1= @procedure.libelle From e709b773b1200cf23827b3e178c2faa4442be8c3 Mon Sep 17 00:00:00 2001 From: Simon Lehericey Date: Tue, 5 Dec 2017 11:16:16 +0100 Subject: [PATCH 2/2] Logo: add a11y --- app/views/layouts/_new_footer.html.haml | 4 ++-- app/views/new_gestionnaire/procedures/show.html.haml | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/views/layouts/_new_footer.html.haml b/app/views/layouts/_new_footer.html.haml index a43c4f0ab..a01e536e5 100644 --- a/app/views/layouts/_new_footer.html.haml +++ b/app/views/layouts/_new_footer.html.haml @@ -5,11 +5,11 @@ %ul.footer-logos %li = link_to "http://www.gouvernement.fr/" do - %span.footer-logo.footer-logo-rf + %span.footer-logo.footer-logo-rf{ role: 'img', 'aria-label': 'Logo du gouvernement' } %li = link_to "https://beta.gouv.fr/" do - %span.footer-logo.footer-logo-beta-gouv-fr + %span.footer-logo.footer-logo-beta-gouv-fr{ role: 'img', 'aria-label': 'Logo de beta.gouv.fr' } %li.footer-column diff --git a/app/views/new_gestionnaire/procedures/show.html.haml b/app/views/new_gestionnaire/procedures/show.html.haml index fbf19c2a3..194e67137 100644 --- a/app/views/new_gestionnaire/procedures/show.html.haml +++ b/app/views/new_gestionnaire/procedures/show.html.haml @@ -4,7 +4,8 @@ .accompagnateur-header .container.flex - .procedure-logo{ style: @procedure.logo.present? ? "background-image: url(#{@procedure.logo.url})" : nil } + .procedure-logo{ style: @procedure.logo.present? ? "background-image: url(#{@procedure.logo.url})" : nil, + role: 'img', 'aria-label': "logo de la procédure #{@procedure.libelle}" } .procedure-header %h1= @procedure.libelle