diff options
author | Phil Hughes <me@iamphill.com> | 2018-10-24 13:22:46 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-10-24 13:22:46 +0000 |
commit | a1ee2072f1a7c197e13bd2d5f8ca59ad1deb1c49 (patch) | |
tree | bbf223eab4f07db1c6621256f2ec218285f52083 /app | |
parent | 83b4cab7e92f25339a9c991d9ca2340d4fb2a84c (diff) | |
parent | 90a494eed2f1da8227a7e2668524fd19fa76a7ad (diff) | |
download | gitlab-ce-a1ee2072f1a7c197e13bd2d5f8ca59ad1deb1c49.tar.gz |
Merge branch 'fix/limit-flash-notice-width' into 'master'
Limit flash notice width for fixed layout and improve spacing for fluid layout
Closes #32868
See merge request gitlab-org/gitlab-ce!16482
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/flash.js | 9 | ||||
-rw-r--r-- | app/views/layouts/_flash.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/_page.html.haml | 4 |
3 files changed, 8 insertions, 7 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 => ` </a> `; -const createFlashEl = (message, type, isInContentWrapper = false) => ` +const createFlashEl = (message, type, isFixedLayout = false) => ` <div class="flash-${type}" > <div - class="flash-text ${isInContentWrapper ? 'container-fluid container-limited' : ''}" + class="flash-text ${isFixedLayout ? 'container-fluid container-limited limit-container-width' : ''}" > ${_.escape(message)} </div> @@ -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" } |