UI Tips for Flash messages in Rails

 *= require_self
 *= require_tree .

<% 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 %>

.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;
        }
}

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