Update employee layout and styles

app/controllers/employees_controller.rb

@@ -14,8 +14,8 @@ class EmployeesController < ApplicationController
   def create
     @employee = Employee.new(params[:employee])
     if @employee.save
-      flash[:notice] = "Successfully created employee."
-      redirect_to @employee
+      flash[:notice] = "Successfully created record."
+      redirect_to employees_url
     else
       render :action => 'new'
     end
@@ -28,8 +28,8 @@ class EmployeesController < ApplicationController
   def update
     @employee = Employee.find(params[:id])
     if @employee.update_attributes(params[:employee])
-      flash[:notice] = "Successfully updated employee."
-      redirect_to @employee
+      flash[:notice] = "Successfully updated record."
+      redirect_to employees_url
     else
       render :action => 'edit'
     end

app/views/employees/_form.html.erb

@@ -18,11 +18,11 @@
   </p>
   <p>
     <%= f.label :dob %><br />
-    <%= f.date_select :dob %>
+    <%= f.date_select :dob, :start_year => Time.now.year - 70, :end_year => Time.now.year - 17, :default => Time.now - 30.years %>
   </p>
   <p>
     <%= f.label :hired %><br />
-    <%= f.date_select :hired %>
+    <%= f.date_select :hired, :start_year => Time.now.year - 10, :end_year => Time.now.year + 1 %>
   </p>
   <p>
     <%= f.label :tax_status %><br />

app/views/employees/edit.html.erb

@@ -1,8 +1,8 @@
-<% title "Edit Employee" %>
+<% title "Driver Details" %>
 
 <%= render :partial => 'form' %>
 
-<p>
-  <%= link_to "Show", @employee %> |
-  <%= link_to "View All", employees_path %>
+<p class="nav">
+  <%= link_to "Delete", @employee, :confirm => 'Are you sure?', :method => :delete %> |
+  <%= link_to "View List", employees_path %>
 </p>

app/views/employees/index.html.erb

@@ -1,8 +1,7 @@
-<% title "Employees" %>
-
-<table>
+<% title "Driver List" -%>
+<table class="listing" cellspacing="0">
   <tr>
-    <th>Number</th>
+    <th>No.</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>SSN</th>
@@ -13,19 +12,18 @@
     <th>Payrate</th>
   </tr>
   <% for employee in @employees %>
-    <tr>
-      <td><%= link_to employee.number, employee %></td>
-      <td><%=h employee.firstname %></td>
-      <td><%=h employee.lastname %></td>
-      <td><%=h employee.ssn %></td>
-      <td><%= employee.dob %></td>
-      <td><%= employee.hired %></td>
-      <td><%=h employee.tax_status %></td>
-      <td><%= employee.dependents %></td>
-      <td><%= employee.payrate %></td>
-      <td><%= link_to "Edit", edit_employee_path(employee) %></td>
+  <tr class="<%= cycle("light", "dark") -%>" onclick="location.href='<%= edit_employee_path(employee) %>'">
+    <td class="number"><%= employee.number %></td>
+    <td class="firstname"><%= employee.firstname %></td>
+    <td class="lastname"><%= employee.lastname %></td>
+    <td class="ssn"><%= employee.ssn %></td>
+    <td class="dob"><%= employee.dob %></td>
+    <td class="hired"><%= employee.hired %></td>
+    <td class="tax_status"><%= employee.tax_status %></td>
+    <td class="dependents"><%= employee.dependents %></td>
+    <td class="payrate"><%= employee.payrate %></td>
   </tr>
   <% end %>
 </table>
 
-<p><%= link_to "New Employee", new_employee_path %></p>
+<p class="nav"><%= link_to "New Driver", new_employee_path %></p>

app/views/employees/new.html.erb

@@ -1,5 +1,5 @@
-<% title "New Employee" %>
+<% title "New Driver" %>
 
 <%= render :partial => 'form' %>
 
-<p><%= link_to "Back to List", employees_path %></p>
+<p class="nav"><%= link_to "Back to List", employees_path %></p>

app/views/employees/show.html.erb

@@ -37,7 +37,7 @@
   <%=h @employee.payrate %>
 </p>
 
-<p>
+<p class="nav">
   <%= link_to "Edit", edit_employee_path(@employee) %> |
   <%= link_to "Destroy", @employee, :confirm => 'Are you sure?', :method => :delete %> |
   <%= link_to "View All", employees_path %>

public/stylesheets/application.css

@@ -2,7 +2,7 @@ html {
   overflow-y: scroll;
 }
 body {
-  background-color: #33FF66;
+  background-color: #ffc;
   font-family: Verdana, sans-serif;
   padding: 0.75em;
   line-height: 1.333;
@@ -33,13 +33,17 @@ h5, h6 {
   font-size: 100%;
 }
 
+th, td {
+  font-size: 70%;
+}
+
 a {
-  color: #003399;
+  color: #039;
   text-decoration: none;
 }
 
 a:hover {
-  color: #0000FF;
+  color: #00f;
   text-decoration: underline;
 }
 
@@ -56,6 +60,12 @@ em {
   font-style: italic;
 }
 
+p.nav {
+  margin-top: 1.5em;
+  font-size: 55%;
+  text-transform: uppercase;
+}
+
 .clear {
   clear: both;
   height: 0;
@@ -65,9 +75,9 @@ em {
 #container {
   width: 44em;
   margin: 0.5em auto;
-  background-color: #FFFFFF;
+  background-color: #fff;
   padding: 0.75em 1.75em;
-  border: solid 1px black;
+  border: outset 1px;
 }
 
 #flash_notice, #flash_error {
@@ -77,13 +87,13 @@ em {
 }
 
 #flash_notice {
-  background-color: #CCFFCC;
-  border: solid 1px #66CC66;
+  background-color: #cfc;
+  border: solid 1px #6c6;
 }
 
 #flash_error {
-  background-color: #FFCCCC;
-  border: solid 1px #CC6666;
+  background-color: #fcc;
+  border: solid 1px #c66;
 }
 
 .fieldWithErrors {
@@ -92,11 +102,11 @@ em {
 
 #errorExplanation {
   width: 25em;
-  border: 2px solid #CF0000;
+  border: 2px solid #cf0000;
   padding: 0;
   padding-bottom: 0.75em;
   margin-bottom: 1.25em;
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
 }
 
 #errorExplanation h2 {
@@ -105,12 +115,12 @@ em {
   padding: 0.375em 0.375em 0.375em 1.0em;
   font-size: 75%;
   margin: 0;
-  background-color: #CC0000;
-  color: #FFFFFF;
+  background-color: #c00;
+  color: #fff;
 }
 
 #errorExplanation p {
-  color: #333333;
+  color: #333;
   margin-bottom: 0;
   padding: 0.5em;
 }
@@ -123,3 +133,34 @@ em {
   font-size: 75%;
   list-style: disc;
 }
+
+.light {
+  background-color: #e3e3e3;
+}
+
+.dark {
+  background-color: #dcdcdc;
+}
+
+.listing {
+  width: 100%;
+}
+
+.listing tr:hover {
+  background-color: #fc9;
+  cursor: pointer;
+}
+
+.listing th,
+.listing td {
+  border: 1px solid #fff;
+  padding: 0.125em 0.375em;
+}
+
+.listing th {
+  background-color: #d3d3d3;
+}
+
+.listing td.number {
+  width: 2.5em;
+}