Display flash messages with Semantic-UI in Rails
This is inspired in James Brook's proTip.
So, you have the helper:
#app/helpers/application_helper.rb
def flash_class(level)
case level
when :success then "ui green message"
when :error then "ui red message"
when :notice then "ui blue message"
end
endThen in the view
<% flash.each do |key, value| %>
<div class="<%= flash_class(key) %> closable">
<i class="close icon"></i>
<%= value %>
</div>
<% end %>A little bit of style for the message
.message.closable {
margin-left: 20%;
margin-right: 20%;
}And finally the javascript for the fadeOut action
$ ->
$(".message.closable .close.icon").on "click", ->
$('.message.closable').fadeOut("slow")
falseWritten by Sebastián González
Related protips
5 Responses
Hey! thanks for the tip. Did this work for devise messages too? doesn't seem to work for me. Cheers!
EDIT: not just devise messages, it doesn't inject the classes in any message :(
What is exactly not working? Are the messages being displayed without additional classes or no messages at all?
level is being passed to flash_class as a string, not a symbol. Styles didn't work properly until I changed them, as in:
when "success" then "ui green message"
That's weird...Thank you for the feedback!
I know these posts are all from a year ago however I found this post to be pretty helpful and was able to make the modifications i needed for it to work with devise and the latest version of Semantic-UI.
https://gist.github.com/WolfpackGaming-SavSin/d5d347d078558c54851d254dfc35476b
Have a fresh tip? Share with Coderwall community!
