app: improve the browser deprecation banner appearance

This commit is contained in:
Pierre de La Morinerie 2019-11-28 14:29:31 +00:00
parent 2ee8cab067
commit 2b934610a0
3 changed files with 34 additions and 20 deletions

View file

@ -7,11 +7,12 @@
left: 0; left: 0;
margin: 0; margin: 0;
padding: $default-padding; padding: $default-padding;
color: #FFFFFF; color: $black;
background-color: $medium-red; background-color: $yellow;
}
a {
color: $lighter-blue; .outdater-browser-icon {
text-decoration: underline; margin-right: $default-padding;
} font-size: 30px;
opacity: 0.7;
} }

View file

@ -1,16 +1,23 @@
#outdated-browser-banner { #outdated-browser-banner {
position: fixed;
text-align: center;
line-height: 2em;
color: #FFFFFF;
background-color: #990000;
width: 100%; width: 100%;
margin: 0; margin: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1000; z-index: 1000;
a { color: #333333;
color: #C3D9FF; background-color: #FEF3B8;
.container {
display: flex;
width: auto;
align-items: center;
padding: 8px 16px;
} }
} }
.outdater-browser-icon {
margin-right: 16px;
font-size: 30px;
opacity: 0.7;
}

View file

@ -1,8 +1,14 @@
/ See config/browser.rb -# See config/browser.rb
- if !browser.modern? - if !browser.modern?
#outdated-browser-banner #outdated-browser-banner
.container .container.flex.align-center
Attention, votre navigateur (#{browser.name} #{browser.version}) est trop ancien pour utiliser demarches-simplifiees.fr : certaines parties du site ne fonctionneront pas correctement. Nous vous recommandons fortement de .outdater-browser-icon
%a{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }mettre à jour votre navigateur ⚠️
%span<> .outdated-browser-test
\. %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{ style: 'margin-left: auto' }
%a.button.primary{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }
Mettre à jour mon navigateur