Merge pull request #1032 from sgmap/fix_1013_logo_and_ie11

[fix #1013] fix logo on ie11

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);
+  }
+}

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 {

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;
 }

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%;
   }
 

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;

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{ role: 'img', 'aria-label': 'Logo du gouvernement' }
+
           %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{ role: 'img', 'aria-label': 'Logo de beta.gouv.fr' }
+
 
       %li.footer-column
         %ul.footer-links

app/views/new_gestionnaire/procedures/show.html.haml

@@ -4,9 +4,8 @@
   .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,
+        role: 'img', 'aria-label': "logo de la procédure #{@procedure.libelle}" }
 
       .procedure-header
         %h1= @procedure.libelle