From 1c50a75f423afc807adcf2142abc732a5bfa49d5 Mon Sep 17 00:00:00 2001
From: Vadim Costin <vadim.costin@yopeso.com>
Date: Wed, 1 Jul 2015 15:25:00 +0300
Subject: [PATCH 1/6] add stackable nodifications in LSG

---
 .../stylesheets/content/_notifications.lsg    | 56 +++++++++++++++++++
 .../stylesheets/content/_notifications.sass   |  7 +++
 2 files changed, 63 insertions(+)

diff --git a/app/assets/stylesheets/content/_notifications.lsg b/app/assets/stylesheets/content/_notifications.lsg
index 5aefdf30c3..2c10ae4622 100644
--- a/app/assets/stylesheets/content/_notifications.lsg
+++ b/app/assets/stylesheets/content/_notifications.lsg
@@ -46,3 +46,59 @@
   </div>
 </div>
 ```
+
+## Stackable
+
+
+```
+<div class="example" id="example-zx00x">
+  <div class="controls">
+    <button class="button stuck-message" id="test-notifier">click</button>
+  </div>
+  <div class="content" style="height: 200px;"></div>
+</div>
+
+<script type="text\template" id="warning-message-zx00x">
+  <div class="notification-box -warning -stack-top-center">
+    <a href="#" class="notification-box--close">&times;</a>
+    <div class="notification-box--content">
+      <p>This is a warning. You may ignore it, but bad things might happen. notificationNo {{number}}</p>
+    </div>
+  </div>
+</script>
+```
+
+```
+@javascript
+(function($){
+
+  var workArea = $('#example-zx00x');
+  var viewArea = workArea.find('.content');
+  var notificationMessageTemplate = {
+    notificationNumber: 0,
+    printNotification: function(){
+      this.notificationNumber++;
+      return $('#warning-message-zx00x').html()
+        .replace(/{{number}}/g, this.notificationNumber);
+    }
+  };
+
+  $('#test-notifier').on('click', function(e){
+    e.preventDefault();
+    viewArea.prepend(notificationMessageTemplate.printNotification());
+  });
+
+  $(document).on('click', '.notification-box--close', function(e){
+    e.preventDefault();
+    $(this).closest('.notification-box').animate({
+                'padding-top': 0,
+                'padding-bottom': 0,
+                'height': 0,
+                'opacity': 0
+            }, 300, function() {
+                $(this).remove();
+            });
+  });
+
+})(jQuery);
+```
diff --git a/app/assets/stylesheets/content/_notifications.sass b/app/assets/stylesheets/content/_notifications.sass
index 4c5409b192..4e07dae6a0 100644
--- a/app/assets/stylesheets/content/_notifications.sass
+++ b/app/assets/stylesheets/content/_notifications.sass
@@ -81,6 +81,13 @@ $nm-padding-default-box: rem-calc(10px)
   background-color: $nm-color-default-background
   color: $nm-font-color
 
+  &.-stack-top-center
+    margin-left: auto
+    margin-right: auto
+    left: 0
+    right: 0
+    z-index: 9999
+
   & .button
     margin: rem-calc(10px 10px 0 0)
 

From 32d6a02642bcb061a4d6375265039bcea7d6968a Mon Sep 17 00:00:00 2001
From: Vadim Costin <vadim.costin@yopeso.com>
Date: Thu, 2 Jul 2015 15:22:35 +0300
Subject: [PATCH 2/6] add bottom margin for stackable alert messages

---
 app/assets/stylesheets/content/_notifications.sass | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/content/_notifications.sass b/app/assets/stylesheets/content/_notifications.sass
index 4e07dae6a0..242b180d10 100644
--- a/app/assets/stylesheets/content/_notifications.sass
+++ b/app/assets/stylesheets/content/_notifications.sass
@@ -86,6 +86,7 @@ $nm-padding-default-box: rem-calc(10px)
     margin-right: auto
     left: 0
     right: 0
+    margin-bottom: rem-calc(3px)
     z-index: 9999
 
   & .button

From 591428e1a74911480dcc27250b097fe228acb384 Mon Sep 17 00:00:00 2001
From: Vadim Costin <vadim.costin@yopeso.com>
Date: Thu, 2 Jul 2015 16:12:52 +0300
Subject: [PATCH 3/6] change the holder of notiffication messages

---
 .../stylesheets/content/_notifications.lsg    | 17 +++++++--------
 .../stylesheets/content/_notifications.sass   | 21 ++++++++++++-------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/content/_notifications.lsg b/app/assets/stylesheets/content/_notifications.lsg
index 2c10ae4622..c39b93c73b 100644
--- a/app/assets/stylesheets/content/_notifications.lsg
+++ b/app/assets/stylesheets/content/_notifications.lsg
@@ -51,15 +51,15 @@
 
 
 ```
-<div class="example" id="example-zx00x">
-  <div class="controls">
-    <button class="button stuck-message" id="test-notifier">click</button>
-  </div>
-  <div class="content" style="height: 200px;"></div>
+<div class="controls">
+  <button class="button stuck-message" id="test-notifier">click</button>
+</div>
+<div class="op-message-container-holder">
+  <div class="op-message-container"></div>
 </div>
 
 <script type="text\template" id="warning-message-zx00x">
-  <div class="notification-box -warning -stack-top-center">
+  <div class="notification-box -warning">
     <a href="#" class="notification-box--close">&times;</a>
     <div class="notification-box--content">
       <p>This is a warning. You may ignore it, but bad things might happen. notificationNo {{number}}</p>
@@ -72,8 +72,7 @@
 @javascript
 (function($){
 
-  var workArea = $('#example-zx00x');
-  var viewArea = workArea.find('.content');
+  var viewArea = $('.op-message-container');
   var notificationMessageTemplate = {
     notificationNumber: 0,
     printNotification: function(){
@@ -95,7 +94,7 @@
                 'padding-bottom': 0,
                 'height': 0,
                 'opacity': 0
-            }, 300, function() {
+            }, 'fast', function() {
                 $(this).remove();
             });
   });
diff --git a/app/assets/stylesheets/content/_notifications.sass b/app/assets/stylesheets/content/_notifications.sass
index 242b180d10..f28b092d59 100644
--- a/app/assets/stylesheets/content/_notifications.sass
+++ b/app/assets/stylesheets/content/_notifications.sass
@@ -81,14 +81,6 @@ $nm-padding-default-box: rem-calc(10px)
   background-color: $nm-color-default-background
   color: $nm-font-color
 
-  &.-stack-top-center
-    margin-left: auto
-    margin-right: auto
-    left: 0
-    right: 0
-    margin-bottom: rem-calc(3px)
-    z-index: 9999
-
   & .button
     margin: rem-calc(10px 10px 0 0)
 
@@ -138,3 +130,16 @@ $nm-padding-default-box: rem-calc(10px)
     line-height: rem-calc(20px)
     &:hover
       text-decoration: none
+
+.op-message-container-holder
+  position: absolute
+  top: rem-calc(52px) //this value probably will change
+  .op-message-container
+    position: relative
+    .notification-box
+      min-width: rem-calc(250px)
+      max-width: rem-calc(550px)
+      margin-bottom: rem-calc(3px)
+      z-index: 9999
+
+

From 2bba34e9eda9c7e673fc414adeda18805e26db38 Mon Sep 17 00:00:00 2001
From: Vadim Costin <vadim.costin@yopeso.com>
Date: Mon, 13 Jul 2015 15:17:58 +0300
Subject: [PATCH 4/6] style notifications with zurb app

---
 app/assets/stylesheets/_settings.scss         |  2 +-
 .../stylesheets/content/_notifications.sass   | 74 +++++++++----------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
index ed6699a14b..1fbfd23c1c 100644
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -55,7 +55,7 @@ $include-css: (
   menu-bar: false,
   modal: false,
   motion: false,
-  notification: false,
+  notification: true,
   off-canvas: false,
   panel: false,
   popup: false,
diff --git a/app/assets/stylesheets/content/_notifications.sass b/app/assets/stylesheets/content/_notifications.sass
index f28b092d59..7707ae61ba 100644
--- a/app/assets/stylesheets/content/_notifications.sass
+++ b/app/assets/stylesheets/content/_notifications.sass
@@ -33,6 +33,7 @@ $nm-font-size: rem-calc(13px)
 $nm-border-radius: rem-calc(2px)
 $nm-box-padding: rem-calc(10px 35px 10px 35px)
 $nm-font-color: $body-font-color
+$nm-notification-width: rem-calc(550)
 
 $nm-color-error-border: #ca3f3f
 $nm-color-error-icon: #ca3f3f
@@ -46,9 +47,9 @@ $nm-color-warning-border: #b5b078
 $nm-color-warning-icon: #000
 $nm-color-warning-background: #f4f4aa
 
-$nm-color-default-border: #8fc0db
-$nm-color-default-background: #e3f5ff
-$nm-padding-default-box: rem-calc(10px)
+$nm-color-border: #8fc0db
+$nm-color-background: #e3f5ff
+$nm-padding-box: rem-calc(10px)
 
 %nm-icon-error
   @extend .icon-attention2:before
@@ -63,33 +64,41 @@ $nm-padding-default-box: rem-calc(10px)
   color: $nm-color-warning-icon
 
 
-@mixin messages-icon
+@mixin messages-icon($top:rem-calc(11), $left:rem-calc(10), $size:rem-calc(18))
   @include icon-common
   position: absolute
-  top: rem-calc(11px)
-  left: rem-calc(10px)
-  font-size: rem-calc(18px)
+  top: $top
+  left: $left
+  font-size: $size
 
 .notification-box
+  @extend %notification
+  +notification-layout($x: left, $y: top, $size: auto, $offset: rem-calc(0))
+  +notification-style($background: $nm-color-background, $color: $nm-font-color, $padding: $nm-padding-box, $radius: $nm-border-radius)
+  .notification-icon
+    +notification-icon($size: $notification-icon-size, $margin: $notification-icon-margin, $align: $notification-icon-align)
+  display: flex
   box-shadow: rem-calc(1px 2px 3px) #dddddd
-  border: rem-calc(1px) solid $nm-color-default-border
-  padding: $nm-padding-default-box
-  border-radius: $nm-border-radius
+  border: rem-calc(1px) solid $nm-color-border
   font-size: $nm-font-size
-  position: relative
   word-wrap: break-word
-  background-color: $nm-color-default-background
-  color: $nm-font-color
-
   & .button
     margin: rem-calc(10px 10px 0 0)
 
-  //@hack adapting to provided styles
-  //messy I dont have all the details for a magic resolve, this might change
-  & p, & ul
-    margin-bottom: 0
-  & p, & ul>li, & .button
-    font-size: $nm-font-size
+  .notification-box--close
+    position: absolute
+    top: rem-calc(10px)
+    right: rem-calc(10px)
+    color: #000000
+    background-color: rgba(0, 0, 0, 0.08)
+    border-radius: rem-calc(50px)
+    width: rem-calc(23px)
+    height: rem-calc(23px)
+    text-align: center
+    font-size: rem-calc(23px)
+    line-height: rem-calc(20px)
+    &:hover
+      text-decoration: none
 
   &.-error, &.-success, &.-warning
     padding: $nm-box-padding
@@ -115,21 +124,12 @@ $nm-padding-default-box: rem-calc(10px)
       @include messages-icon
       @extend %nm-icon-warning
 
-
-  .notification-box--close
-    position: absolute
-    top: rem-calc(10px)
-    right: rem-calc(10px)
-    color: #000000
-    background-color: rgba(0, 0, 0, 0.08)
-    border-radius: rem-calc(50px)
-    width: rem-calc(23px)
-    height: rem-calc(23px)
-    text-align: center
-    font-size: rem-calc(23px)
-    line-height: rem-calc(20px)
-    &:hover
-      text-decoration: none
+  //@hack adapting to provided styles
+  //messy I dont have all the details for a magic resolve, this might change
+  & p, & ul
+    margin-bottom: 0
+  & p, & ul>li, & .button
+    font-size: $nm-font-size
 
 .op-message-container-holder
   position: absolute
@@ -138,8 +138,6 @@ $nm-padding-default-box: rem-calc(10px)
     position: relative
     .notification-box
       min-width: rem-calc(250px)
-      max-width: rem-calc(550px)
+      max-width: $nm-notification-width
       margin-bottom: rem-calc(3px)
       z-index: 9999
-
-

From 376245612ee2b76462d1148fd7bdf47870d13bc3 Mon Sep 17 00:00:00 2001
From: Vadim Costin <vadim.costin@yopeso.com>
Date: Mon, 13 Jul 2015 18:27:11 +0300
Subject: [PATCH 5/6] centred the notification messages and change names of css
 classes

---
 app/assets/stylesheets/content/_notifications.lsg  | 6 +++---
 app/assets/stylesheets/content/_notifications.sass | 8 ++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/content/_notifications.lsg b/app/assets/stylesheets/content/_notifications.lsg
index c39b93c73b..15350cd709 100644
--- a/app/assets/stylesheets/content/_notifications.lsg
+++ b/app/assets/stylesheets/content/_notifications.lsg
@@ -54,8 +54,8 @@
 <div class="controls">
   <button class="button stuck-message" id="test-notifier">click</button>
 </div>
-<div class="op-message-container-holder">
-  <div class="op-message-container"></div>
+<div class="notification-box--wrapper">
+  <div class="notification-box--casing"></div>
 </div>
 
 <script type="text\template" id="warning-message-zx00x">
@@ -72,7 +72,7 @@
 @javascript
 (function($){
 
-  var viewArea = $('.op-message-container');
+  var viewArea = $('.notification-box--casing');
   var notificationMessageTemplate = {
     notificationNumber: 0,
     printNotification: function(){
diff --git a/app/assets/stylesheets/content/_notifications.sass b/app/assets/stylesheets/content/_notifications.sass
index 7707ae61ba..6fd5894c0c 100644
--- a/app/assets/stylesheets/content/_notifications.sass
+++ b/app/assets/stylesheets/content/_notifications.sass
@@ -131,10 +131,14 @@ $nm-padding-box: rem-calc(10px)
   & p, & ul>li, & .button
     font-size: $nm-font-size
 
-.op-message-container-holder
+.notification-box--wrapper
   position: absolute
   top: rem-calc(52px) //this value probably will change
-  .op-message-container
+  width: 100%
+  display: flex
+  align-items: center
+  justify-content: center
+  .notification-box--casing
     position: relative
     .notification-box
       min-width: rem-calc(250px)

From 299ef4cedab7169202b5157997eba959003fa64f Mon Sep 17 00:00:00 2001
From: Vadim Costin <vadim.costin@yopeso.com>
Date: Tue, 14 Jul 2015 15:33:33 +0300
Subject: [PATCH 6/6] remove  display flex for overlay issue overlay

---
 app/assets/stylesheets/content/_notifications.sass | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/content/_notifications.sass b/app/assets/stylesheets/content/_notifications.sass
index 6fd5894c0c..b4f3f17e4e 100644
--- a/app/assets/stylesheets/content/_notifications.sass
+++ b/app/assets/stylesheets/content/_notifications.sass
@@ -134,14 +134,10 @@ $nm-padding-box: rem-calc(10px)
 .notification-box--wrapper
   position: absolute
   top: rem-calc(52px) //this value probably will change
-  width: 100%
-  display: flex
-  align-items: center
-  justify-content: center
+  width: $nm-notification-width
+  margin-left: -($nm-notification-width / 2)
+  left: 50%
   .notification-box--casing
     position: relative
     .notification-box
-      min-width: rem-calc(250px)
-      max-width: $nm-notification-width
       margin-bottom: rem-calc(3px)
-      z-index: 9999