reInteractive: UI Tips for Flash messages in Rails | Sydney, Australia Ruby on Rails Developers

UI Tips for Flash messages in Rails

By Ben Wiseley

This is a quick how to to get nice pop-over, auto-fade, auto-hide-on-click flash notices on your site.

Assumptions

Using Rails 3.2 (Asset Pipeline), CoffeeScript, SCSS/SASS, and Twitter/Bootstrap

Tip You can use Twitter/Bootstrap (LESS based) in conjuction with SCSS.
Just use the standard:

 *= require_self
 *= require_tree .

in your app/assets/stylesheets/application.css.scss

Preview

error notice

How to

app/views/layouts/_flash.html.erb

<% if notice || alert %>
  <div class="flash-message <%= notice ? "notice" : ""%><%= alert ? "error" : ""%>">
    <div class="container container_12 clearfix">
      <div class="grid_12">
        <% if notice %>
          <p><%= notice %></p>
        <% elsif alert %>
          <p><%= alert %></p>
        <% end %>
      </div>
    </div>
  </div>
<% end %>

app/assets/stylesheets/applications.css.scss

.flash-message {
  &.error {
    border: solid 4px #900;
          background-color: #FF6565;
        }
  &.notice {
    border: solid 4px #26722D;
          background-color: #A4E7A0;
        }
  color: black;
  z-index: 999;
  position: fixed;
  font-weight: bold;
  width: 96%;
  margin: 20px;
        p {
                font-size: 110%;
                margin: 15px 0;
        }
}

app/assets/javascripts/application.js.coffee

$ ->
  flashCallback = ->
    $(".flash-message").fadeOut()
  $(".flash-message").bind 'click', (ev) =>
    $(".flash-message").fadeOut()
  setTimeout flashCallback, 3000