Commit 90a494ee authored by George Tsiolis's avatar George Tsiolis

Limit flash notice width on fixed and fluid layout

parent d25a8ed0
...@@ -30,12 +30,12 @@ const createAction = config => ` ...@@ -30,12 +30,12 @@ const createAction = config => `
</a> </a>
`; `;
const createFlashEl = (message, type, isInContentWrapper = false) => ` const createFlashEl = (message, type, isFixedLayout = false) => `
<div <div
class="flash-${type}" class="flash-${type}"
> >
<div <div
class="flash-text ${isInContentWrapper ? 'container-fluid container-limited' : ''}" class="flash-text ${isFixedLayout ? 'container-fluid container-limited limit-container-width' : ''}"
> >
${_.escape(message)} ${_.escape(message)}
</div> </div>
...@@ -69,12 +69,13 @@ const createFlash = function createFlash( ...@@ -69,12 +69,13 @@ const createFlash = function createFlash(
addBodyClass = false, addBodyClass = false,
) { ) {
const flashContainer = parent.querySelector('.flash-container'); const flashContainer = parent.querySelector('.flash-container');
const navigation = parent.querySelector('.content');
if (!flashContainer) return null; 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}`); const flashEl = flashContainer.querySelector(`.flash-${type}`);
removeFlashClickListener(flashEl, fadeTransition); removeFlashClickListener(flashEl, fadeTransition);
......
...@@ -6,5 +6,5 @@ ...@@ -6,5 +6,5 @@
-# Don't show a flash message if the message is nil -# Don't show a flash message if the message is nil
- if value - if value
%div{ class: "flash-#{key}" } %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 %span= value
...@@ -6,12 +6,12 @@ ...@@ -6,12 +6,12 @@
.mobile-overlay .mobile-overlay
.alert-wrapper .alert-wrapper
= render "layouts/broadcast" = render "layouts/broadcast"
= render 'layouts/header/read_only_banner' = render "layouts/header/read_only_banner"
= yield :flash_message = yield :flash_message
= render "shared/ping_consent" = render "shared/ping_consent"
- unless @hide_breadcrumbs - unless @hide_breadcrumbs
= render "layouts/nav/breadcrumbs" = render "layouts/nav/breadcrumbs"
= render "layouts/flash" = render "layouts/flash", extra_flash_class: 'limit-container-width'
.d-flex .d-flex
%div{ class: "#{(container_class unless @no_container)} #{@content_class}" } %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
.content{ id: "content-body" } .content{ id: "content-body" }
......
...@@ -172,7 +172,7 @@ describe('Flash', () => { ...@@ -172,7 +172,7 @@ describe('Flash', () => {
flash('test'); flash('test');
expect(document.querySelector('.flash-text').className).toBe( 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', () => { ...@@ -180,7 +180,7 @@ describe('Flash', () => {
document.querySelector('.content-wrapper').className = 'js-content-wrapper'; document.querySelector('.content-wrapper').className = 'js-content-wrapper';
flash('test'); 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', () => { it('removes element after clicking', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment