-<div id="product-list">
+<div id="pretty-list">
<h1>Listing orders</h1>
<table>
- <tr>
- <th>Name</th>
- <th>Address</th>
- <th>Email</th>
- <th>Pay type</th>
- <th>Total value</th>
- </tr>
-
<% for order in @orders %>
<tr class="<%= cycle('list-line-odd', 'list-line-even') %>">
- <td><%=h order.name %></td>
- <td><%=h order.address %></td>
- <td><%=h order.email %></td>
- <td><%=h order.pay_type %></td>
- <td><%= number_to_currency (order.line_items.inject(0) {|sum,item| sum + item.total_price}), :unit => "£" %></td>
- <td><%= link_to 'Show', order %></td>
- <td><%= link_to 'Edit', edit_order_path(order) %></td>
- <td><%= link_to 'Destroy', order, :confirm => 'Are you sure?', :method => :delete %></td>
+ <td>
+ <dl>
+ <dt>Order <%=h order.id %></dt>
+ <dd><%=h order.name %></dd>
+ <dd><%=h order.email %></dd>
+ <dd><%=h order.address %></dd>
+ <dd><%=h order.pay_type %></dd>
+ </dl>
+ </td>
+ <td class="list-description">
+ <dl>
+ <dt>Total value: <%= number_to_currency (order.line_items.inject(0) {|sum,item| sum + item.total_price}), :unit => "£" %></dt>
+ <% for li in order.line_items %>
+ <dd><%= li.quantity%> × <%= h li.product.title %> = <%= number_to_currency li.total_price, :unit => "£" %></dd>
+ <% end %>
+ </dl>
+ </td>
+ <td class="list-actions">
+ <%= link_to 'Show', order %><br/>
+ <%= link_to 'Edit', edit_order_path(order) %><br/>
+ <%= link_to 'Destroy', order, :confirm => 'Are you sure?', :method => :delete %><br/>
+ </td>
</tr>
- <% for li in order.line_items %>
- <tr class="<%= current_cycle %>">
- <td> </td>
- <td colspan="7"><i><%= li.quantity%> ×
- <%= h li.product.title %> =
- <%= number_to_currency li.total_price, :unit => "£" %>
- </i></td>
- </tr>
- <% end %>
<% end %>
</table>
/* Styles for products/index */
-#product-list table {
+#pretty-list table {
border-collapse: collapse;
}
-#product-list table tr td {
+#pretty-list table tr td {
padding: 5px;
vertical-align: top;
}
-#product-list .list-image {
+#pretty-list .list-image {
width: 60px;
height: 70px;
}
-#product-list .list-description {
+#pretty-list .list-description {
width: 60%;
}
-#product-list .list-description dl {
+#pretty-list dl {
margin: 0;
}
-#product-list .list-description dt {
+#pretty-list dt {
color: #244;
font-weight: bold;
font-size: larger;
}
-#product-list .list-description dd {
+#pretty-list dd {
margin: 0;
}
-#product-list .list-description .unavailable {
+#pretty-list .list-description .unavailable {
color: #f00;
}
-#product-list .list-actions {
+#pretty-list .list-actions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}
-#product-list .list-line-even {
+#pretty-list .list-line-even {
background: #e0f8f8;
}
-#product-list .list-line-odd {
+#pretty-list .list-line-odd {
background: #f8b0f8;
}