Exercise1: Styling HTML components with Bootstrap:

* Change ul to dl in books#index
* Add classes to buttons
* Style the new/edit book form
* Style error messages
* Style flash messages

app/helpers/application_helper.rb

@@ -1,2 +1,13 @@
 module ApplicationHelper
+
+  def flash_class(name)
+    if name == :notice
+      "alert alert-success"
+    elsif name == :error
+      "alert alert-error"
+    else
+      "alert"
+    end
+  end
+
 end

app/views/books/_form.html.erb

@@ -1,29 +1,53 @@
-<%= form_for @book do |f| %>
+<%= form_for @book, html: { class: 'form-horizontal' } do |f| %>
   
   <% unless @book.errors.empty? %>
-    <h2>Failed to save book</h2>
-    <% @book.errors.full_messages.each do |msg| %>
-      <p><%= msg %></p>
-    <% end %>
+    <div class='alert alert-block alert-error'>
+      <h2 class='alert-heading'>Failed to save book</h2>
+      <% @book.errors.full_messages.each do |msg| %>
+        <p><%= msg %></p>
+      <% end %>
+    </div>
   <% end %>
 
-  <div>
-    Title:<br/>
-    <%= f.text_field :title %>
-  </div>
-  <div>
-    Authors:<br/>
-    <%= f.text_field :authors %>
-  </div>
-  <div>
-    ISBN:<br/>
-    <%= f.text_field :isbn %>
-  </div>
-  <div>
-    Description:<br/>
-    <%= f.text_area :description %>
-  </div>  
-  <%= f.submit "Save" %>
-  or
-  <%= link_to "Cancel", books_path %>
+  <fieldset>
+    <div class='control-group'>
+      <label class='control-label' for="title">Title</label>
+      <div class='controls'>
+        <%= f.text_field :title %>
+      </div>
+  </fieldset>
+
+  <fieldset>
+    <div class='control-group'>
+      <label class='control-label' for="authors">Authors</label>
+      <div class='controls'>
+        <%= f.text_field :authors %>
+      </div>
+  </fieldset>
+
+  <fieldset>
+    <div class='control-group'>
+      <label class='control-label' for="isbn">ISBN</label>
+      <div class='controls'>
+        <%= f.text_field :isbn %>
+      </div>
+  </fieldset>
+
+  <fieldset>
+    <div class='control-group'>
+      <label class='control-label' for="description">Description</label>
+      <div class='controls'>
+        <%= f.text_field :description %>
+      </div>
+  </fieldset>
+
+  <fieldset>
+    <div class='controls'>
+      <%= f.submit "Save", class: 'btn-primary' %>
+      or
+      <%= link_to "Cancel", books_path %>
+    </div>
+  </fieldset>
+
+
 <% end %>

app/views/books/index.html.erb

@@ -1,6 +1,6 @@
 <%= form_tag search_books_path, method: :get do %>
   <%= text_field_tag :query, params[:query] || 'Search by title' %>
-  <%= submit_tag 'Search' %>
+  <%= submit_tag 'Search', class: 'btn-primary' %>
   <div>
     <%= query_by_radio_tag :title %>
     <%= query_by_radio_tag :isbn %>
@@ -9,18 +9,16 @@
 <% end %>
 
 <p>
-  <%= link_to "Add a book", new_book_path %>
+  <%= link_to "Add a book", new_book_path, class: 'btn' %>
 </p>
 
 <% if @books.size > 0 %>
-  <ul>
+  <dl>
   <% @books.each do |book| %>
-    <li>
-      <strong><%= link_to book.title, book_path(book) %></strong>
-      by <%= book.authors %>
-    </li>
+    <dt><%= link_to book.title, book_path(book) %></dt>
+    <dd><%= book.authors %></dd>
   <% end %>
-  </ul>
+  </dl>
 <% else %>
   <h2>Sorry, we haven't found any books!</h2>
 <% end %>

app/views/books/show.html.erb

@@ -18,15 +18,16 @@
 	<%= @book.description %>
 </p>
 
-<%= link_to "Edit", edit_book_path(@book) %>
-<%= link_to "Delete", book_path, method: :delete %>
+<%= link_to "Edit", edit_book_path(@book), class: 'btn' %>
 
 <% if @book_reservation %>
-  <%= link_to "Free", free_book_reservation_path(@book, @book_reservation), method: :put %>
+  <%= link_to "Free", free_book_reservation_path(@book, @book_reservation), method: :put, class: 'btn' %>
 <% else %>
-  <%= link_to "Reserve", new_book_reservation_path(@book) %>
+  <%= link_to "Reserve", new_book_reservation_path(@book), class: 'btn' %>
 <% end %>
 
+<%= link_to "Delete", book_path, method: :delete, class: 'btn btn-danger' %>
+
 <p>
   <%= link_to "Back to list", books_path %>
 </p>

app/views/layouts/application.html.erb

@@ -22,7 +22,7 @@
     </div>
 
     <% flash.each do |name,msg| %>
-      <div class="flash_<%=name%>">
+      <div class="<%= flash_class(name)%>">
         <%= msg %>
       </div>
     <% end %>