diff --git a/app/views/application/_flash.html.slim b/app/views/application/_flash.html.slim index a391ee23..cbb88634 100644 --- a/app/views/application/_flash.html.slim +++ b/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 \ No newline at end of file diff --git a/lib/assets/javascripts/flash.js b/lib/assets/javascripts/flash.js index cd5cb72d..fa79e71d 100644 --- a/lib/assets/javascripts/flash.js +++ b/lib/assets/javascripts/flash.js @@ -24,11 +24,25 @@ var showFlashes = function() { $('.flash').each(function() { - if ($(this).html() !== '') { - $(this).slideDown().delay(DURATION).slideUp(function() { - $(this).html(''); + var container = $(this); + var message = container.children().first(); + 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(); + }); }); }; diff --git a/lib/assets/stylesheets/flash.css.scss b/lib/assets/stylesheets/flash.css.scss index 661526e8..df52993a 100644 --- a/lib/assets/stylesheets/flash.css.scss +++ b/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); - */ -}