Merge branch 'left-align-flash-messages' into 'master'

Align flash messages with left side of page content ## What does this MR do? - align flash messages with left side of page content ## Are there points in the code the reviewer needs to double check? - flash messages in general ## Why was this MR needed? - flash messages didn't fit new design ## What are the relevant issue numbers? closes #18688 ## Screenshots # Before ![failed-login](/uploads/fb57d288fb7ae775cc0b8dbb0c7b6af2/failed-login.png) --- ![explore-blocked-account](/uploads/aa6d5ff74a4c9ed29ed361f2ffdf5c8e/explore-blocked-account.png) --- ![project-blocked-account](/uploads/4f36118f5438d661ea202b180bf9cb8d/project-blocked-account.png) --- ![issue-blocked-account](/uploads/68e87385ec30952797dc5c1f8f36216d/issue-blocked-account.png) --- ![inline-flash](/uploads/c0aba047f90d56001265e37ba9751e19/inline-flash.png) --- # After ![failed-login](/uploads/d45d2d832a16af8e1854f1832e7b87a4/failed-login.png) --- ![blocked-account](/uploads/ddcd3d23569ded403700c01934df61df/blocked-account.png) --- ![project-blocked-account](/uploads/9e286c3b95f70cae1819930a09cc1307/project-blocked-account.png) --- ![issue-blocked-account](/uploads/4fde8e770eab0dae03b25e1402f171a1/issue-blocked-account.png) --- The left padding will be fixed by !4854 ![inline-flash](/uploads/081b824b99d8ca65d67e9d15778a991d/inline-flash.png) --- ![flash-dismissed](/uploads/641e6227050de22e0df9a85ffca4ced1/flash-dismissed.png) See merge request !4959

Merge branch 'left-align-flash-messages' into 'master'
dbac53aa · Jacob Schatz · f7eceed6 · c8d66594 · dbac53aa · dbac53aa
Commit dbac53aa authored Jun 29, 2016 by Jacob Schatz
Hide whitespace changes
Inline Side-by-side

Showing with 18 additions and 2 deletions

CHANGELOG CHANGELOG +1 -0

flash.js.coffee app/assets/javascripts/flash.js.coffee +10 -2

flash.scss app/assets/stylesheets/framework/flash.scss +7 -0

No files found.
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -4,6 +4,7 @@ v 8.10.0 (unreleased)
  - Fix commit builds API, return all builds for all pipelines for given commit. !4849
  - Replace Haml with Hamlit to make view rendering faster. !3666
  - Wrap code blocks on Activies and Todos page. !4783 (winniehell)
+  - Align flash messages with left side of page content !4959 (winniehell)
  - Display last commit of deleted branch in push events !4699 (winniehell)
  - Add Sidekiq queue duration to transaction metrics.
  - Let Workhorse serve format-patch diffs

--- a/app/assets/javascripts/flash.js.coffee
+++ b/app/assets/javascripts/flash.js.coffee
@@ -4,11 +4,19 @@ class @Flash
    @flash.html("")

    innerDiv = $('<div/>',
-      class: "flash-#{type}",
-      text: message
+      class: "flash-#{type}"
    )
    innerDiv.appendTo(".flash-container")

+    textDiv = $("<div/>",
+      class: "flash-text",
+      text: message
+    )
+    textDiv.appendTo(innerDiv)
+
+    if @flash.parent().hasClass('content-wrapper')
+      textDiv.addClass('container-fluid container-limited')
+
    @flash.click -> $(@).fadeOut()
    @flash.show()


--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -16,4 +16,11 @@
    @extend .alert-danger;
    margin: 0;
  }
+
+  .flash-notice, .flash-alert {
+    .container-fluid.flash-text {
+      background: transparent;
+    }
+  }
 }
+