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