11 Form and Flash Styles

The basics of our app are starting to take shape. Let's take another moment to make it look a little better.

To make our form look a little nicer (and to make better use of the space on the page), add the following to the end of the stylesheet:

app/assets/stylesheets/style.scss

main form {
  margin-bottom: 20px;
  fieldset {
    width: 514px;
    padding: 7px 5px;
    font-size: large;
    background-color: #cee3f8;
    margin-bottom: 10px;
    input[type="text"], textarea, select {
      width: 100%;
      font-size: 14px;
      line-height: 14px;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    textarea {
      height: 100px;
    }
  }
}

In our markup, we can also throw a couple of CSS classes on our submit button to take advantage of some Bootstrap styles.

app/views/posts/new.html.erb

  <%= f.submit class: 'btn btn-default' %>

One other thing stands out at the moment: Flash messages. Let's give those some style. Once again, Bootstrap can provide some help, but we'll have to use Bootstrap's CSS classes.

First we'll add an "alert" class to all flash messages. Don't forget to add it when the message is an Array and when it isn't.

app/views/layouts/application.html.erb

          <% flash.each do |name, msg| -%>
            <% if msg.is_a? Array -%>
              <div class="alert <%= name %>">
                <ul>
                  <% msg.each do |message| -%>
                    <li><%= message %></li>
                  <% end -%>
                </ul>
              </div>
            <% else -%>
              <%= content_tag :div, msg, class: "alert #{name}" %>
            <% end -%>
          <% end -%>

That won't have any immediate effect. We also need to use specialized class names that correspond to our name values, rather than using the name values themselves. Bootstrap defines styles for .alert-danger, but not for .error.

Let's write a helper to make the translations we need. Edit the ApplicationHelper.

app/helpers/application_helper.rb

module ApplicationHelper
  def flash_class(name)
    bootstrap_class = case name.to_s
      when 'notice'  then 'alert-success'
      when 'error'   then 'alert-danger'
      when 'alert'   then 'alert-danger'
      when 'info'    then 'alert-info'
      when 'warning' then 'alert-warning'
      else "alert-#{name}"
    end
    bootstrap_class
  end
end

Back in the view, let's call our helper when setting the class for our messages.

app/views/layouts/application.html.erb

          <% flash.each do |name, msg| -%>
            <% if msg.is_a? Array -%>
              <div class="alert <%= flash_class name %>">
                <ul>
                  <% msg.each do |message| -%>
                    <li><%= message %></li>
                  <% end -%>
                </ul>
              </div>
            <% else -%>
              <%= content_tag :div, msg, class: "alert #{flash_class name}" %>
            <% end -%>
          <% end -%>

Go ahead and trigger some validation errors and submit a new post or two. Your flash messages should now be nice and colorful.

Let's commit our changes. Don't forget to check your git status, and maybe even git diff, to make sure you're committing what you expect. (Are you ready for me to stop saying that yet?)

$ git add .
$ git commit -m "Add styles for forms and flash messages."

Next: Posts Show