Browse Source

Entry forms updates

Redesigned entry forms and listings w/
  { table-layout: fixed } and <col>
master
jimi 16 years ago
committed by jimi
parent
commit
ad2414f8d1
  1. 128
      app/views/employees/_form.html.erb
  2. 30
      app/views/employees/index.html.erb
  3. 37
      app/views/loads/_form.html.erb
  4. 6
      app/views/loads/index.html.erb
  5. 131
      public/stylesheets/application.css

128
app/views/employees/_form.html.erb

@ -1,71 +1,101 @@
<% form_for @employee do |f| %> <% form_for @employee do |f| %>
<%= f.error_messages %> <%= f.error_messages %>
<fieldset class="left">
<div id="employee_data">
<fieldset>
<legend>Personal Info</legend> <legend>Personal Info</legend>
<%# f.label :number %>
<%# f.text_field :number %>
<table cellpadding="0"> <table cellpadding="0">
<col /><col /><col /><col /><col /><col /><col /><col /><col /><col />
<tr> <tr>
<td class="name"><%= f.label :firstname, "First Name", :class => "label" %></td>
<td colspan="3" class="name">
<%= f.label :lastname, "Last Name", :class => "label" %></td>
</tr>
<td colspan="5"><%= f.label :firstname, "First Name" %></td>
<td colspan="5"><%= f.label :lastname, "Last Name" %></td>
<tr> <tr>
<td class="border"><%= f.text_field :firstname, :size => "12" %></td>
<td colspan="3" class="border"><%= f.text_field :lastname, :size => "12" %></td>
<td colspan="5" class="border">
<%= f.text_field :firstname, :size => "12", :maxsize => 30 %></td>
<td colspan="5" class="border">
<%= f.text_field :lastname, :size => "12" %></td>
</tr> </tr>
<tr> <tr>
<td colspan="4"><%= f.label :street, "Street", :class => "label" %></td>
<td colspan="10"><label>Street</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="4" class="border"><%= f.text_field :street %></td>
<td colspan="10" class="border">
<%= f.text_field :street, :size => "30" %></td>
</tr> </tr>
<tr> <tr>
<td class="city"><%= f.label :city, "City", :class => "label" %></td>
<td>&nbsp;</td>
<td class="state"><%= f.label :state, "St", :class => "label" %></td>
<td class="zip"><%= f.label :zip, "Zip", :class => "label" %></td>
<td colspan="6"><label>City</label></td>
<td><label>St</label></td>
<td colspan="3"><label>Zip</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="2" class="border"><%= f.text_field :city, :size => "20" %></td>
<td class="border"><%= f.text_field :state, :size => "2" %></td>
<td class="border"><%= f.text_field :zip, :size => "6" %></td>
<td colspan="6" class="border"><%= f.text_field :city, :size => "16" %></td>
<td class="border"><%= f.text_field :state, :size => "1" %></td>
<td colspan="3" class="border"><%= f.text_field :zip, :size => "6" %></td>
</tr> </tr>
<tr> <tr>
<td><%= f.label :dob, "Birth Date", :class => "label" %></td>
<td colspan="3"><%= f.label :hired, "Hire Date", :class => "label" %></td>
<td colspan="4"><label>Birth Date</label></td>
<td colspan="4"><label>Hire Date</label></td>
<td colspan="2"><label>Pay Rate</label></td>
</tr> </tr>
<tr> <tr>
<td class="border"><%= f.calendar_date_select :dob, :size => "10",
<td colspan="4" class="border"><%= f.calendar_date_select :dob, :size => "8",
:year_range => 70.years.ago..0.years.ago, :year_range => 70.years.ago..0.years.ago,
:buttons => false %></td> :buttons => false %></td>
<td colspan="3" class="border"><%= f.calendar_date_select :hired, :size => "10",
<td colspan="4" class="border"><%= f.calendar_date_select :hired, :size => "8",
:year_range => 20.years.ago..1.year.from_now, :year_range => 20.years.ago..1.year.from_now,
:buttons => false %></td> :buttons => false %></td>
<td colspan="2" class="border"><%= f.text_field :payrate, :size => "2" %></td>
</tr>
<tr>
<td colspan="10"><label>More Info</label></td>
</tr>
<tr>
<td colspan="10" class="border">&nbsp;</td>
</tr> </tr>
<tr> <tr>
<td class="ssn"><%= f.label :ssn, "Social", :class => "label" %></td>
<td colspan="3" class="phone"><%= f.label :phone, "Phone", :class => "label" %></td>
<td colspan="4"><label>Phone</label></td>
<td colspan="4"><label>Social</label></td>
<td colspan="2"><label>Tax Info</label></td>
</tr> </tr>
<tr> <tr>
<td class="border"><%= f.text_field :ssn, :size => "10" %></td>
<td colspan="3" class="border"><%= f.text_field :phone, :size => "12" %></td>
<td colspan="4" class="border"><%= f.text_field :phone, :size => "10" %></td>
<td colspan="4" class="border"><%= f.text_field :ssn, :size => "9" %></td>
<td colspan="1" class="border"><%= f.text_field :tax_status, :size => "1" %></td>
<td colspan="1" class="border"><%= f.text_field :dependents, :size => "1" %></td>
</tr> </tr>
</table>
</fieldset>
<!-- License Info -->
<fieldset>
<legend>Vehicle Info</legend>
<table cellspacing="0">
<col /><col /><col /><col /><col /><col /><col /><col /><col /><col />
<tr>
<td colspan="5"><%= f.label :dl_number, "License No." %></td>
<td colspan="1"><%= f.label :dl_state, "St", :class => "label" %></td>
<td colspan="4"><%= f.label :dl_expire, "Expiry", :class => "label" %></td>
</tr>
<tr>
<td colspan="5" class="border"><%= f.text_field :dl_number, :size => "12" %></td>
<td colspan="1" class="border"><%= f.text_field :dl_state, :size => "1" %></td>
<td colspan="4" class="border">
<%= f.calendar_date_select :dl_expire, :size => "8" %></td>
</tr>
<!-- Truck Info -->
<tr> <tr>
<td>&nbsp;</td>
<td class="tax"><%= f.label :tax_status, "Status", :class => "label" %></td>
<td class="dep"><%= f.label :dependents, "Dep", :class => "label" %></td>
<td><%= f.label :payrate, "Rate", :class => "label" %></td>
<td colspan="3"><%= f.label :truck, "Truck No" %></td>
<td colspan="3"><%= f.label :trailer, "Trailer No" %></td>
<td colspan="4">&nbsp;</td>
</tr> </tr>
<tr> <tr>
<td class="border">&nbsp;</td>
<td class="border"><%= f.text_field :tax_status, :size => "1" %></td>
<td class="border"><%= f.text_field :dependents, :size => "1" %></td>
<td class="border"><%= f.text_field :payrate, :size => "4" %></td>
<td colspan="3" class="border"><%= f.text_field :truck, :size => "12" %></td>
<td colspan="3" class="border"><%= f.text_field :trailer, :size => "12" %></td>
<td colspan="4" class="border">&nbsp;</td>
</tr> </tr>
</table> </table>
</fieldset> </fieldset>
<fieldset class="right loads">
</div> <!-- left -->
<div id="driver_loads">
<fieldset class="loads">
<legend>Recent Loads</legend> <legend>Recent Loads</legend>
<br /> <br />
<br /> <br />
@ -88,33 +118,7 @@
<br /> <br />
<br /> <br />
</fieldset> </fieldset>
<!-- License Info -->
<fieldset class="left">
<legend>Vehicle Info</legend>
<table cellspacing="0">
<tr>
<td class="dl_number">
<%= f.label :dl_number, "License No.", :class => "label" %></td>
<td class="dl_state"><%= f.label :dl_state, "St", :class => "label" %></td>
<td class="dl_expire"><%= f.label :dl_expire, "Expiry", :class => "label" %></td>
</tr>
<tr>
<td class="border"><%= f.text_field :dl_number, :size => "14" %></td>
<td class="border state"><%= f.text_field :dl_state, :size => "2" %></td>
<td class="border"><%= f.calendar_date_select :dl_expire,
:size => "10" %></td>
</tr>
<!-- Truck Info -->
<tr>
<td><%= f.label :truck, "Truck No", :class => "label" %></td>
<td colspan="2"><%= f.label :trailer, "Trailer No", :class => "label" %></td>
</tr>
<tr>
<td class="border"><%= f.text_field :truck, :size => "12" %></td>
<td colspan="2" class="border"><%= f.text_field :trailer, :size => "12" %></td>
</tr>
</table>
</fieldset>
</div>
<hr class="clear"> <hr class="clear">
<p><%= f.submit "Submit" %></p> <p><%= f.submit "Submit" %></p>
<% end %> <% end %>

30
app/views/employees/index.html.erb

@ -1,5 +1,15 @@
<% title "Driver List" -%> <% title "Driver List" -%>
<table class="listing" cellspacing="0"> <table class="listing" cellspacing="0">
<col class="number" />
<col class="name" />
<col class="name" />
<col />
<col class="city" />
<col class="state" />
<col class="zip" />
<col class="date" />
<col class="date" />
<col class="payrate" />
<tr> <tr>
<th>No.</th> <th>No.</th>
<th>First Name</th> <th>First Name</th>
@ -14,16 +24,16 @@
</tr> </tr>
<% for employee in @employees %> <% for employee in @employees %>
<tr class="<%= cycle("light", "dark") -%>" onclick="location.href='<%= edit_employee_path(employee) %>'"> <tr class="<%= cycle("light", "dark") -%>" onclick="location.href='<%= edit_employee_path(employee) %>'">
<td class="number"><%= employee.number %></td>
<td class="name"><%= employee.firstname %></td>
<td class="name"><%= employee.lastname %></td>
<td class="street"><%= employee.street %></td>
<td class="city"><%= employee.city %></td>
<td class="state"><%= employee.state %></td>
<td class="zip"><%= employee.zip %></td>
<td class="date"><%= employee.dob %></td>
<td class="date"><%= employee.hired %></td>
<td class="payrate"><%= number_to_currency employee.payrate %></td>
<td><%= employee.number %></td>
<td><%= employee.firstname %></td>
<td><%= employee.lastname %></td>
<td><%= employee.street %></td>
<td><%= employee.city %></td>
<td><%= employee.state %></td>
<td class="right"><%= employee.zip %></td>
<td class="center"><%= employee.dob %></td>
<td class="center"><%= employee.hired %></td>
<td class="right"><%= number_to_currency employee.payrate %></td>
</tr> </tr>
<% end %> <% end %>
</table> </table>

37
app/views/loads/_form.html.erb

@ -1,16 +1,29 @@
<% form_for @load do |f| %> <% form_for @load do |f| %>
<%= f.error_messages %> <%= f.error_messages %>
<dl>
<dt><%= f.label :number %></dt>
<dd><%= f.text_field :number %></dd>
<dt><%= f.label :start_date %></dt>
<dd><%= f.date_select :start_date %></dd>
<dt><%= f.label :end_date %></dt>
<dd><%= f.date_select :end_date %></dd>
<dt><%= f.label :hub_in %></dt>
<dd><%= f.text_field :hub_in %></dd>
<dt><%= f.label :hub_out %></dt>
<dd><%= f.text_field :hub_out %></dd>
</dl>
<div class="left">
<fieldset>
<legend>Trip Info</legend>
<table cellspacing="0">
<tr>
<th></th><th></th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th><th></th>
</tr>
<tr>
<td colspan="4"><label>Trip Number</label></td>
<td colspan="3"><label>Hub In</label></td>
<td colspan="3"><label>Hub Out</label></td>
</tr>
<tr>
<td colspan="4" class="border">
<%= f.text_field :number, :size => "8" %></td>
<td colspan="3" class="border">
<%= f.text_field :hub_in, :size => "8" %></td>
<td colspan="3" class="border">
<%= f.text_field :hub_out, :size => "8" %></td>
</tr>
</table>
</fieldset>
</div>
<hr noshade size="1" class="clear">
<p><%= f.submit "Submit" %></p> <p><%= f.submit "Submit" %></p>
<% end %> <% end %>

6
app/views/loads/index.html.erb

@ -2,10 +2,7 @@
<table class="listing" cellspacing="0"> <table class="listing" cellspacing="0">
<tr> <tr>
<th>Number</th> <th>Number</th>
<th>Start Date</th>
<th>End Date</th> <th>End Date</th>
<th>Hub In</th>
<th>Hub Out</th>
<th>Start Point</th> <th>Start Point</th>
<th>Shipper</th> <th>Shipper</th>
<th>Origin</th> <th>Origin</th>
@ -14,10 +11,7 @@
<% for load in @loads %> <% for load in @loads %>
<tr class="<%= cycle("light", "dark") -%>" onclick="location.href='<%= edit_load_path(load) %>'"> <tr class="<%= cycle("light", "dark") -%>" onclick="location.href='<%= edit_load_path(load) %>'">
<td><%=h load.number %></td> <td><%=h load.number %></td>
<td><%=h load.start_date %></td>
<td><%=h load.end_date %></td> <td><%=h load.end_date %></td>
<td><%=h load.hub_in %></td>
<td><%=h load.hub_out %></td>
<td><%=h load.start_point %></td> <td><%=h load.start_point %></td>
<td><%=h load.shipper %></td> <td><%=h load.shipper %></td>
<td><%=h load.origin %></td> <td><%=h load.origin %></td>

131
public/stylesheets/application.css

@ -131,11 +131,15 @@ p.nav {
} }
.left { .left {
float: left;
text-align: left;
} }
.right { .right {
float: right;
text-align: right;
}
.center {
text-align: center;
} }
.light { .light {
@ -187,22 +191,14 @@ fieldset .date {
} }
fieldset { fieldset {
width: 19em;
width: 18em;
border: solid 1px #aaa; border: solid 1px #aaa;
padding: 0.75em 0.5em 0.875em 0.5em;
padding: 0 0.5em 0.875em 0.5em;
margin-bottom: 1.25em; margin-bottom: 1.25em;
} }
fieldset.loads { fieldset.loads {
width: 27.5em;
}
fieldset table {
width: 100%;
}
fieldset table td {
border: none;
width: 28.5em;
} }
legend { legend {
@ -221,40 +217,117 @@ table input {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.name {
width: 8em;
.listing .name {
width: 6em;
} }
.street {
width: 22em;
.listing .street {
width: 12em;
} }
.city {
width: 10em;
.listing .city {
width: 7em;
} }
.state {
width: 1em;
.listing .state {
width: 1.5em;
} }
.zip {
.listing .zip {
width: 3em; width: 3em;
} }
.date {
.listing .date {
width: 5em;
}
.listing .payrate {
width: 2.5em;
}
fieldset input {
border: none;
}
fieldset label {
font-size: 56%;
font-weight: bold;
text-transform: uppercase;
margin-top: 0.25em;
}
fieldset table {
margin-top: 0.5em;
width: 100%;
}
table {
table-layout: fixed;
}
#employee_data {
width: 19em;
float: left;
}
#employee_data col {
width: 10%;
}
#employee_firstname,
#employee_lastname {
width: 10em;
}
#employee_street {
width: 21em;
}
#employee_city {
width: 12em;
}
#employee_state,
#employee_dl_state {
width: 1.5em;
}
#employee_zip {
width: 5.5em;
}
#employee_dob,
#employee_hired,
#employee_dl_expire {
width: 6em; width: 6em;
text-align: center; text-align: center;
} }
.payrate {
width: 3em;
#employee_phone,
#employee_ssn {
width: 8em;
}
#employee_payrate {
width: 3.5em;
text-align: right; text-align: right;
} }
.ssn {
width: 8em;
#employee_tax_status,
#employee_dependents {
width: 1.5em;
text-align: center;
}
#employee_dl_number {
width: 10em;
}
#employee_truck,
#employee_trailer {
width: 5.5em;
} }
.tax {
width: 3.25em;
#driver_loads {
float: right;
} }