Implement better flash behavior

app/views/application/_flash.html.slim

@@ -1,3 +1,5 @@
-#flash.fixed_error_messages.clickthrough data-message-failure=t('shared.message_failure')
+#flash.fixed_error_messages data-message-failure=t('shared.message_failure')
   - %w[alert danger info notice success warning].each do |severity|
-    p.alert.flash class="alert-#{{'alert' => 'warning', 'notice' => 'success'}.fetch(severity, severity)}" id="flash-#{severity}" = flash[severity]
+    div.alert.flash class="alert-#{{'alert' => 'warning', 'notice' => 'success'}.fetch(severity, severity)}" id="flash-#{severity}"
+      p = flash[severity]
+      span.fa.fa-times

lib/assets/javascripts/flash.js

@@ -24,11 +24,25 @@
 
   var showFlashes = function() {
     $('.flash').each(function() {
-      if ($(this).html() !== '') {
+      var container = $(this);
-        $(this).slideDown().delay(DURATION).slideUp(function() {
+      var message = container.children().first();
-          $(this).html('');
+      var button = container.children().last();
+
+      var hide = function() {
+        container.slideUp(function () {
+          message.html('');
         });
+      };
+
+      if (message.html() !== '') {
+        container.slideDown();
+        container.animation = setTimeout(hide, DURATION);
       }
+
+      button.on('click', function () {
+        clearTimeout(container.animation);
+        hide();
+      });
     });
   };
 

lib/assets/stylesheets/flash.css.scss

@@ -1,5 +1,12 @@
 .flash {
   display: none;
+
+  span.fa-times {
+    position: relative;
+    top: -1.2em;
+    float: right;
+    cursor: pointer;
+  }
 }
 
 .fixed_error_messages {
@@ -13,14 +20,4 @@
   padding-top: 0;
 }
 
-.clickthrough {
-  pointer-events: none;
-
-  /* fixes for IE */
-  /*
-  background:white;
-  opacity:0;
-  filter:Alpha(opacity=0);
-  */
-}