From 90a494eed2f1da8227a7e2668524fd19fa76a7ad Mon Sep 17 00:00:00 2001 From: George Tsiolis Date: Fri, 19 Oct 2018 12:56:12 +0300 Subject: [PATCH] Limit flash notice width on fixed and fluid layout --- app/assets/javascripts/flash.js | 9 +++++---- app/views/layouts/_flash.html.haml | 2 +- app/views/layouts/_page.html.haml | 4 ++-- spec/javascripts/flash_spec.js | 4 ++-- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js index a29de9ae899..a6ab614df16 100644 --- a/app/assets/javascripts/flash.js +++ b/app/assets/javascripts/flash.js @@ -30,12 +30,12 @@ const createAction = config => ` `; -const createFlashEl = (message, type, isInContentWrapper = false) => ` +const createFlashEl = (message, type, isFixedLayout = false) => `
${_.escape(message)}
@@ -69,12 +69,13 @@ const createFlash = function createFlash( addBodyClass = false, ) { const flashContainer = parent.querySelector('.flash-container'); + const navigation = parent.querySelector('.content'); if (!flashContainer) return null; - const isInContentWrapper = flashContainer.parentNode.classList.contains('content-wrapper'); + const isFixedLayout = navigation ? navigation.parentNode.classList.contains('container-limited') : true; - flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper); + flashContainer.innerHTML = createFlashEl(message, type, isFixedLayout); const flashEl = flashContainer.querySelector(`.flash-${type}`); removeFlashClickListener(flashEl, fadeTransition); diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml index 8bd5708d490..2cdaa85bdaa 100644 --- a/app/views/layouts/_flash.html.haml +++ b/app/views/layouts/_flash.html.haml @@ -6,5 +6,5 @@ -# Don't show a flash message if the message is nil - if value %div{ class: "flash-#{key}" } - %div{ class: "#{container_class} #{extra_flash_class}" } + %div{ class: "#{(container_class unless fluid_layout)} #{(extra_flash_class unless @no_container)} #{@content_class}" } %span= value diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 1420b0a4973..1b2a4cd6780 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -6,12 +6,12 @@ .mobile-overlay .alert-wrapper = render "layouts/broadcast" - = render 'layouts/header/read_only_banner' + = render "layouts/header/read_only_banner" = yield :flash_message = render "shared/ping_consent" - unless @hide_breadcrumbs = render "layouts/nav/breadcrumbs" - = render "layouts/flash" + = render "layouts/flash", extra_flash_class: 'limit-container-width' .d-flex %div{ class: "#{(container_class unless @no_container)} #{@content_class}" } .content{ id: "content-body" } diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js index d7338ee0f66..aecab331ead 100644 --- a/spec/javascripts/flash_spec.js +++ b/spec/javascripts/flash_spec.js @@ -172,7 +172,7 @@ describe('Flash', () => { flash('test'); expect(document.querySelector('.flash-text').className).toBe( - 'flash-text container-fluid container-limited', + 'flash-text container-fluid container-limited limit-container-width', ); }); @@ -180,7 +180,7 @@ describe('Flash', () => { document.querySelector('.content-wrapper').className = 'js-content-wrapper'; flash('test'); - expect(document.querySelector('.flash-text').className.trim()).toBe('flash-text'); + expect(document.querySelector('.flash-text').className.trim()).toContain('flash-text'); }); it('removes element after clicking', () => {