Amélioration des bannières affichées globalement sur le site (#4613)

Amélioration des bannières affichées globalement sur le site

app/assets/stylesheets/_maintenance.scss

@@ -1,15 +0,0 @@
-.maintenance {
-  width: 100%;
-  position: fixed;
-  top: 0;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  span {
-    margin: auto;
-    background: #FFD8A6;
-    padding: 0 4px;
-  }
-}

app/assets/stylesheets/application.scss

@@ -9,7 +9,6 @@
 // defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 // file per style scope.
 //
-// = require _maintenance
 // = require _card
 // = require _helpers
 // = require _turbolinks
@@ -28,7 +27,7 @@
 // = require print
 // = require procedure
 // = require search
-// = require outdated_browser_banner
+// = require site_banner
 // = require switch_menu
 // = require autocomplete
 // = require users

app/assets/stylesheets/new_design/_maintenance.scss

@@ -1,8 +0,0 @@
-@import "colors";
-
-.maintenance {
-  padding: 20px;
-  text-align: center;
-  width: 100%;
-  background: $orange-bg;
-}

app/assets/stylesheets/new_design/site_banner.scss

@@ -1,21 +1,31 @@
 @import "colors";
 @import "constants";
 
-#outdated-browser-banner {
+.site-banner {
   width: 100%;
   margin: 0;
   padding: $default-padding;
   color: $black;
   background-color: $yellow;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.6);
+
+  &.warning {
+    background-color: $orange-bg;
+  }
+
+  .container {
+    display: flex;
+    align-items: center;
+  }
 }
 
-.outdated-browser-icon {
+.site-banner-icon {
   margin-right: $default-padding;
   font-size: 30px;
   opacity: 0.7;
 }
 
-.outdated-browser-buttons {
+.site-banner-actions {
   display: flex;
   margin-left: auto;
 

app/assets/stylesheets/site_banner.scss

@@ -1,9 +1,14 @@
-#outdated-browser-banner {
+.site-banner {
   width: 100%;
   margin: 0;
 
   color: #333333;
   background-color: #FEF3B8;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.6);
+
+  &.warning {
+    background-color: #FFD8A6;
+  }
 
   .container {
     display: flex;
@@ -13,13 +18,13 @@
   }
 }
 
-.outdated-browser-icon {
+.site-banner-icon {
   margin-right: 16px;
   font-size: 30px;
   opacity: 0.7;
 }
 
-.outdated-browser-buttons {
+.site-banner-actions {
   display: flex;
   margin-left: auto;
 }

app/views/layouts/_main_container.html.haml

@@ -1,6 +1,7 @@
 #main-container{ class: "col-xs-#{main_container_size}" }
   .row
     = render partial: 'layouts/outdated_browser_banner'
+    = render partial: 'layouts/pre_maintenance'
   .row
     = render partial: 'layouts/flash_messages'
   .row

app/views/layouts/_outdated_browser_banner.html.haml

@@ -1,15 +1,14 @@
 -# See config/browser.rb
 - if !browser.modern? && !has_dismissed_outdated_browser_banner?
-  #outdated-browser-banner
-    .container.flex.align-center
-      .outdated-browser-icon
-        ⚠️
-      .outdated-browser-test
+  #outdated-browser-banner.site-banner
+    .container
+      .site-banner-icon ⚠️
+      .site-banner-text
         %strong
           #{browser.name} #{browser.version} est trop ancien pour utiliser demarches-simplifiees.fr.
         %br
         Certaines parties du site ne fonctionneront pas correctement.
-      .outdated-browser-buttons
+      .site-banner-actions
         = button_to 'Ignorer', dismiss_outdated_browser_path, method: :post, remote: true, class: 'button btn', title: 'Ne plus afficher cet avertissement pendant une semaine'
         %a.btn.button.primary{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }
           Mettre à jour mon navigateur

app/views/layouts/_pre_maintenance.html.haml

@@ -1,4 +1,9 @@
 - if feature_enabled?(:pre_maintenance_mode)
-  .maintenance
-    %span
-      Une opération de maintenance est prévue sur demarches-simplifiees.fr à 23 h 00. La plateforme sera inaccessible pendant une vingtaine de minutes.
+  .site-banner.warning
+    .container
+      .site-banner-icon 🕚
+      .site-banner-text
+        %strong
+          Une opération de maintenance est prévue sur demarches-simplifiees.fr à 23 h 00.
+        %br
+        La plateforme sera inaccessible pendant une vingtaine de minutes.

app/views/layouts/application_old.html.haml

@@ -19,7 +19,6 @@
     = Gon::Base.render_data(camel_case: true, init: true)
 
   %body{ class: browser.platform.ios? ? 'ios' : nil }
-    = render partial: 'layouts/pre_maintenance'
     - if staging?
       #beta
         Env Test