UI Tips for Flash messages in Rails
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
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
Latest Articles by Our Team
Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.
-
No app left behind: Upgrade your application to Ruby 3.0 and s...
-
A look forward from 2020
-
Testing Rails applications on real mobile devices (both design...
We Hire Only the Best
reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.
We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.
Free Community Workshops
We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.