diff --git a/app/assets/stylesheets/new_design/outdated_browser_banner.scss b/app/assets/stylesheets/new_design/outdated_browser_banner.scss index f7658c3c8..7b94f8a79 100644 --- a/app/assets/stylesheets/new_design/outdated_browser_banner.scss +++ b/app/assets/stylesheets/new_design/outdated_browser_banner.scss @@ -3,16 +3,23 @@ #outdated-browser-banner { width: 100%; - bottom: 0; - left: 0; margin: 0; padding: $default-padding; color: $black; background-color: $yellow; } -.outdater-browser-icon { +.outdated-browser-icon { margin-right: $default-padding; font-size: 30px; opacity: 0.7; } + +.outdated-browser-buttons { + display: flex; + margin-left: auto; + + .button { + margin-left: $default-spacer; + } +} diff --git a/app/assets/stylesheets/outdated_browser_banner.scss b/app/assets/stylesheets/outdated_browser_banner.scss index dd4722494..c4b2eb089 100644 --- a/app/assets/stylesheets/outdated_browser_banner.scss +++ b/app/assets/stylesheets/outdated_browser_banner.scss @@ -1,9 +1,6 @@ #outdated-browser-banner { width: 100%; margin: 0; - bottom: 0; - left: 0; - z-index: 1000; color: #333333; background-color: #FEF3B8; @@ -16,8 +13,13 @@ } } -.outdater-browser-icon { +.outdated-browser-icon { margin-right: 16px; font-size: 30px; opacity: 0.7; } + +.outdated-browser-buttons { + display: flex; + margin-left: auto; +} diff --git a/app/controllers/root_controller.rb b/app/controllers/root_controller.rb index 0014c7766..bcf28f57d 100644 --- a/app/controllers/root_controller.rb +++ b/app/controllers/root_controller.rb @@ -1,4 +1,6 @@ class RootController < ApplicationController + include ApplicationHelper + def index if administrateur_signed_in? return redirect_to admin_procedures_path @@ -69,4 +71,13 @@ class RootController < ApplicationController def suivi end + + def dismiss_outdated_browser + dismiss_outdated_browser_banner + + respond_to do |format| + format.html { redirect_back(fallback_location: root_path) } + format.js { render js: helpers.remove_element('#outdated-browser-banner') } + end + end end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 0fd4c8bb2..9929ab7f6 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -120,4 +120,15 @@ module ApplicationHelper def try_format_datetime(datetime) datetime.present? ? I18n.l(datetime) : '' end + + def dismiss_outdated_browser_banner + cookies[:dismissed_outdated_browser_banner] = { + value: 'true', + expires: 1.week.from_now + } + end + + def has_dismissed_outdated_browser_banner? + cookies[:dismissed_outdated_browser_banner] == 'true' + end end diff --git a/app/views/layouts/_outdated_browser_banner.html.haml b/app/views/layouts/_outdated_browser_banner.html.haml index a00c7da4a..d60b38661 100644 --- a/app/views/layouts/_outdated_browser_banner.html.haml +++ b/app/views/layouts/_outdated_browser_banner.html.haml @@ -1,14 +1,15 @@ -# See config/browser.rb -- if !browser.modern? +- if !browser.modern? && !has_dismissed_outdated_browser_banner? #outdated-browser-banner .container.flex.align-center - .outdater-browser-icon + .outdated-browser-icon ⚠️ .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" } + .outdated-browser-buttons + = 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 diff --git a/config/routes.rb b/config/routes.rb index 47bca15b9..5d4908a9e 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -125,6 +125,7 @@ Rails.application.routes.draw do get "patron" => "root#patron" get "accessibilite" => "root#accessibilite" get "suivi" => "root#suivi" + post "dismiss_outdated_browser" => "root#dismiss_outdated_browser" get "contact", to: "support#index" post "contact", to: "support#create" diff --git a/spec/features/outdated_browser_spec.rb b/spec/features/outdated_browser_spec.rb new file mode 100644 index 000000000..e6cb28efb --- /dev/null +++ b/spec/features/outdated_browser_spec.rb @@ -0,0 +1,31 @@ +require 'spec_helper' + +feature 'Outdated browsers support:' do + context 'when the user browser is outdated' do + before(:each) do + ie_11_user_agent = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko' + Capybara.page.driver.header('user-agent', ie_11_user_agent) + end + + scenario 'a banner is displayed' do + visit new_user_session_path + expect(page).to have_content('Internet Explorer 11 est trop ancien') + end + + scenario 'the banner can be dismissed' do + visit new_user_session_path + expect(page).to have_content('Internet Explorer 11 est trop ancien') + + # The banner is hidden immediately + within '#outdated-browser-banner' do + click_on 'Ignorer' + end + expect(page).not_to have_content('Internet Explorer 11 est trop ancien') + expect(page).to have_current_path(new_user_session_path) + + # The banner is hidden after a refresh + page.refresh + expect(page).not_to have_content('Internet Explorer 11 est trop ancien') + end + end +end