From 4e846b5da22adb2fad99206886371a220a1efcea Mon Sep 17 00:00:00 2001 From: winniehell <git@winniehell.de> Date: Fri, 17 Jun 2016 18:04:47 +0200 Subject: [PATCH] Align text of flash messages to left side of page content --- CHANGELOG | 1 + app/assets/javascripts/flash.js.coffee | 30 +++++++++---- app/assets/stylesheets/framework/flash.scss | 43 ++++++++++++++++--- app/assets/stylesheets/framework/nav.scss | 2 +- .../stylesheets/framework/variables.scss | 1 + app/assets/stylesheets/pages/note_form.scss | 8 ++++ app/views/layouts/_flash.html.haml | 16 ++++--- app/views/layouts/_page.html.haml | 4 +- app/views/layouts/ci/_page.html.haml | 2 +- 9 files changed, 85 insertions(+), 22 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 1cf8730cda1..3fdce5c2d42 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -4,6 +4,7 @@ v 8.9.0 (unreleased) - Fix error when CI job variables key specified but not defined - Fix pipeline status when there are no builds in pipeline - Fix Error 500 when using closes_issues API with an external issue tracker + - Align text of flash messages to left side of page content !4755 (winniehell) - Add more information into RSS feed for issues (Alexander Matyushentsev) - Bulk assign/unassign labels to issues. - Ability to prioritize labels !4009 / !3205 (Thijs Wouters) diff --git a/app/assets/javascripts/flash.js.coffee b/app/assets/javascripts/flash.js.coffee index 4f73d215b85..2a5f183da44 100644 --- a/app/assets/javascripts/flash.js.coffee +++ b/app/assets/javascripts/flash.js.coffee @@ -1,16 +1,30 @@ class @Flash constructor: (message, type = 'alert')-> - @flash = $(".flash-container") - @flash.html("") + @flashContainer = $(".flash-container") + @flashContainer.html("") - innerDiv = $('<div/>', - class: "flash-#{type}", + @flashContainer.addClass('flash-container-stretched') + + flash = $('<div/>', + class: "flash-#{type}" + ) + + backgroundDiv = $('<div/>', + class: 'flash-background' + ) + backgroundDiv.appendTo(flash) + + textDiv = $('<div/>', + class: 'flash-text', text: message ) - innerDiv.appendTo(".flash-container") + textDiv.appendTo(flash) + + flash.click -> flash.fadeOut() - @flash.click -> $(@).fadeOut() - @flash.show() + flash.appendTo(@flashContainer) + @flashContainer.show() pinTo: (selector) -> - @flash.detach().appendTo(selector) + @flashContainer.removeClass('flash-container-stretched') + @flashContainer.detach().appendTo(selector) diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index 1bfd0213995..620199fbe27 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -5,15 +5,48 @@ width: 100%; z-index: 100; - .flash-notice { + .flash-background, .flash-text { @extend .alert; - @extend .alert-info; margin: 0; } .flash-alert { - @extend .alert; - @extend .alert-danger; - margin: 0; + .flash-background, .flash-text { + @extend .alert-danger; + } + } + + .flash-notice { + .flash-background, .flash-text { + @extend .alert-info; + } + } + + /* + * Only used for stretched container + */ + .flash-background { + display: none; } } + +.flash-container-stretched { + .flash-background { + display: block; + height: $flash-height; + left: 0; + position: fixed; + width: 100%; + z-index: 10; + } + + .flash-text { + background: none; + border: none; + padding-left: 0; + padding-right: 0; + position: relative; + z-index: 20; + } +} + diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 5c68f90e343..59ecb4d4a54 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -426,7 +426,7 @@ margin-top: $header-height + 2; .right-sidebar { - top: ($header-height * 2) + 2; + top: ($header-height * 2 + $flash-height) + 2; } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index c37574ca7a1..e5f46ca1c3c 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -85,6 +85,7 @@ $todo-alert-blue: #428bca; $btn-side-margin: 10px; $btn-sm-side-margin: 7px; $btn-xs-side-margin: 5px; +$flash-height: $header-height; /* * Color schema diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 3784010348a..269a2f69d55 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -37,6 +37,14 @@ img { max-width: 100%; } + + .flash-container { + margin-top: $gl-padding-top; + + .flash-text { + border-radius: $border-radius-base; + } + } } .note-textarea { diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml index cc8ea066cb9..1f3cc3de3fb 100644 --- a/app/views/layouts/_flash.html.haml +++ b/app/views/layouts/_flash.html.haml @@ -1,8 +1,14 @@ .flash-container - if alert - .flash-alert - = alert - + - flash_type = 'alert' + - flash_message = alert - elsif notice - .flash-notice - = notice + - flash_type = 'notice' + - flash_message = notice + + - if flash_type + %div{:class => "flash-#{flash_type}"} + .flash-background + .flash-text + = flash_message + diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 199ab3c38c3..60a358b5053 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -22,9 +22,9 @@ = render "layouts/nav/#{nav}" .content-wrapper{ class: "#{layout_nav_class}" } = render "layouts/broadcast" - = render "layouts/flash" - = yield :flash_message %div{ class: (container_class unless @no_container) } .content .clearfix + = render "layouts/flash" + = yield :flash_message = yield diff --git a/app/views/layouts/ci/_page.html.haml b/app/views/layouts/ci/_page.html.haml index 2e56d0ac6a3..d58bda4087c 100644 --- a/app/views/layouts/ci/_page.html.haml +++ b/app/views/layouts/ci/_page.html.haml @@ -14,9 +14,9 @@ .username = current_user.username .content-wrapper - = render "layouts/flash" = render 'layouts/ci/info' %div{ class: container_class } .content .clearfix + = render "layouts/flash" = yield -- GitLab