Updated flash message styles and js

rycz · rycz · commit 18e9276f4238 · 2017-07-24T20:24:16.000Z
diff --git a/saasapp/app/assets/javascripts/pages.js b/saasapp/app/assets/javascripts/pages.js
@@ -0,0 +1,3 @@
+$(document).on('turbolinks:load', function() {
+  $('.alert').delay(1000).fadeOut(4000);
+});
diff --git a/saasapp/app/assets/stylesheets/application.css.scss b/saasapp/app/assets/stylesheets/application.css.scss
@@ -73,8 +73,16 @@ h1, h2, h3 {
   padding-bottom: 100px;
 }
 
-.alert-notice {
-  display: none;
+.flash-container {
+  position: absolute;
+  width: 100%;
+}
+
+.alert-notice, .alert-alert {
+  text-align: center;
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.5);
+  margin-top :-14px;
 }
 
 .home-signup-links {
diff --git a/saasapp/app/views/layouts/application.html.erb b/saasapp/app/views/layouts/application.html.erb
@@ -42,7 +42,7 @@
       </div>
     </nav>
 
-    <div class="container">
+    <div class="container flash-container">
       <% flash.each do |type, msg| %>
         <%= content_tag :div, msg, class: "alert alert-#{type}" %>
       <% end %>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+$(document).on('turbolinks:load', function() {`
	`2`	`+ $('.alert').delay(1000).fadeOut(4000);`
	`3`	`+});`