Merge pull request #1119 from ZmagoD/zd_SCI_2142_v2

fixes flash message [fixes SCI-2142]

app/assets/javascripts/application.js.erb

@@ -199,10 +199,16 @@ var HelperModule = (function(){
         flash.fadeTo(500, 0).slideUp(500, function () {
           $(this).remove();
         });
-      }, 5000);
+      }, 3000);
     }
   }
 
+  helpers.dismissAlert = function() {
+    $('#alert-flash').on('click', function() {
+      $('#alert-flash').alert('close');
+    })
+  }
+
   helpers.flashAlertMsg = function(message, type) {
     var alertType;
     var glyphSign;
@@ -220,11 +226,11 @@ var HelperModule = (function(){
       alertType = ' alert-warning ';
       glyphSign = ' glyphicon-exclamation-sign ';
     }
-    var htmlSnippet = '<div class="alert alert' + alertType +
+    var htmlSnippet = '<div id="alert-flash" class="alert alert' + alertType +
                       'alert-dismissable alert-floating">' +
-                        '<div class="container">' +
+                        '<div>' +
-                          '<button type="button" class="close" ' +
+                        '<button type="button" class="close" ' +
-                          'data-dismiss="alert" aria-label="Close">' +
+                        'data-dismiss="alert" aria-label="Close">' +
                           '<span aria-hidden="true">×</span></button>' +
                             '<span class="glyphicon' + glyphSign + '"></span>&nbsp;' +
                             '<span>' + message + '</span>' +
@@ -232,11 +238,13 @@ var HelperModule = (function(){
                         '</div>';
     $('#notifications').html(htmlSnippet);
     helpers.hideFlashMsg();
+    helpers.dismissAlert();
   }
 
   $( document ).ready(function() {
     helpers.treeLinkTruncation();
     helpers.hideFlashMsg();
+    helpers.dismissAlert();
   });
 
   return helpers;

app/assets/stylesheets/themes/scinote.scss

@@ -1727,6 +1727,28 @@ th.custom-field .modal-tooltiptext {
   max-height: 200px;
 }
 
+#alert-flash {
+
+  button {
+    margin-right: 400px;
+  }
+
+  .glyphicon {
+    margin-left: 100px;
+  }
+
+  @media(max-width:768px) {
+
+    button {
+      display: none;
+    }
+
+    .glyphicon {
+      margin-left: 10px;
+    }
+  }
+}
+
 .linkedin-signin-button {
   margin: 15px 0;
 }

app/views/layouts/application.html.erb

@@ -36,35 +36,10 @@
     <%= render "shared/file_preview_modal.html.erb" %>
     <%= render "shared/navigation" %>
 
-    <div id="notifications">
+    <% unless user_signed_in? %>
-      <% if flash[:success] %>
+      <%= render partial: 'shared/flash_alerts',
-      <div id="alert-flash" class="alert alert-success alert-dismissable alert-floating">
+                 locals: { flash: flash, notice: notice, alert: alert } %>
-        <div class="container">
+    <% end %>
-          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
-          <span class="glyphicon glyphicon-ok-sign"></span>
-          <span><%= sanitize_input(flash[:success]) %></span>
-        </div>
-      </div>
-      <% end %>
-      <% if notice %>
-      <div id="alert-flash" class="alert alert-info alert-dismissable alert-floating">
-        <div class="container">
-          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
-          <span class="glyphicon glyphicon-info-sign"></span>
-          <span><%= notice %></span>
-        </div>
-      </div>
-      <% end %>
-      <% if alert and !alert.empty? or flash[:error]%>
-      <div id="alert-flash" class="alert alert-danger alert-dismissable alert-floating">
-        <div class="container">
-          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
-          <span class="glyphicon glyphicon-exclamation-sign"></span>
-          <span><%= alert || sanitize_input(flash[:error]) %></span>
-        </div>
-      </div>
-      <% end %>
-    </div>
 
     <%= render "shared/left_menu_bar" if user_signed_in? %>
     <div id="content-wrapper">

app/views/layouts/fluid.html.erb

@@ -1,5 +1,7 @@
 <% content_for :content do %>
     <div class="container-fluid" id="wrapper">
+      <%= render partial: 'shared/flash_alerts',
+                 locals: { flash: flash, notice: notice, alert: alert } %>
       <div id="sidebar-wrapper" class="<%= yield :sidebar_wrapper_class %>">
         <%= yield :sidebar %>
       </div>

app/views/shared/_flash_alerts.html.erb

@@ -0,0 +1,29 @@
+<div id="notifications">
+  <% if flash[:success] %>
+  <div id="alert-flash" class="alert alert-success alert-dismissable alert-floating">
+    <div>
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
+      <span class="glyphicon glyphicon-ok-sign"></span>
+      <span><%= sanitize_input(flash[:success]) %></span>
+    </div>
+  </div>
+  <% end %>
+  <% if notice %>
+  <div id="alert-flash" class="alert alert-info alert-dismissable alert-floating">
+    <div>
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
+      <span class="glyphicon glyphicon-info-sign"></span>
+      <span><%= notice %></span>
+    </div>
+  </div>
+  <% end %>
+  <% if alert and !alert.empty? or flash[:error]%>
+  <div id="alert-flash" class="alert alert-danger alert-dismissable alert-floating">
+    <div>
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
+      <span class="glyphicon glyphicon-exclamation-sign"></span>
+      <span><%= alert || sanitize_input(flash[:error]) %></span>
+    </div>
+  </div>
+  <% end %>
+</div>