Merge branch 'fix/award-emoji-alert-width' into 'master'

Fix award-emojis alert flash message

This adds a new feature to `Flash` that allows to pin it after a
specified selector. This removes a fixed position from such award-emoji
alert, and makes it responsive by design of selector that this alert is
pinned to.

Closes #3996

\cc @vsizov 

See merge request !2065

4 files changed, 4 insertions, 13 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 3ec005c58f6..61068d3efb1 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -44,6 +44,7 @@ v 8.3.0 (unreleased)
   - Upgraded Sidekiq to 4.x
   - Accept COPYING,COPYING.lesser, and licence as license file (Zeger-Jan van de Weg)
   - Fix emoji aliases problem
+  - Fix award-emojis Flash alert's width
 
 v 8.2.3
   - Fix application settings cache not expiring after changes (Stan Hu)
diff --git a/app/assets/javascripts/flash.js.coffee b/app/assets/javascripts/flash.js.coffee
index 9b59d4e57f7..5de012e409f 100644
--- a/app/assets/javascripts/flash.js.coffee
+++ b/app/assets/javascripts/flash.js.coffee
@@ -12,5 +12,5 @@ class @Flash
     @flash.click -> $(@).fadeOut()
     @flash.show()
 
-  pin: ->
-    @flash.addClass('flash-pinned flash-raised')
+  pinTo: (selector) ->
+    @flash.detach().appendTo(selector)
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index b1df56b24fe..a7d720fff4b 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -114,7 +114,7 @@ class @Notes
     unless note.valid
       if note.award
         flash = new Flash('You have already used this award emoji!', 'alert')
-        flash.pin()
+        flash.pinTo('.header-content')
       return
 
     # render note if it not present in loaded list
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 1b723021d76..82eb50ad4be 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -15,13 +15,3 @@
     @extend .alert-danger;
   }
 }
-
-.flash-pinned {
-  position: fixed;
-  top: 80px;
-  width: 80%;
-}
-
-.flash-raised {
-  z-index: 1000;
-}