Add panels to product details view, etc.

This commit is contained in:
Lance Edgar 2015-02-27 03:07:49 -06:00
parent 86db5181b8
commit 3b9efe0ffb
5 changed files with 181 additions and 68 deletions

View file

@ -62,3 +62,28 @@ body > #body-wrapper {
display: block; display: block;
margin: 40px auto; margin: 40px auto;
} }
/******************************
* Panels
******************************/
.panel {
border-bottom: 1px solid Black;
border-left: 1px solid Black;
border-right: 1px solid Black;
margin-bottom: 15px;
padding: 0px;
}
.panel h2 {
border-top: 1px solid Black;
border-bottom: 1px solid Black;
margin: 0px;
padding: 5px;
}
.panel-body {
overflow: auto;
padding: 5px;
}

View file

@ -1,13 +1,7 @@
## -*- coding: utf-8 -*- ## -*- coding: utf-8 -*-
<%namespace file="/forms/lib.mako" import="render_field_readonly" />
<div class="fieldset"> <div class="fieldset">
% for field in fieldset.render_fields.itervalues(): % for field in fieldset.render_fields.itervalues():
% if field.requires_label: ${render_field_readonly(field)}
<div class="field-wrapper ${field.name}">
${field.label_tag()|n}
<div class="field">
${field.render_readonly()}
</div>
</div>
% endif
% endfor % endfor
</div> </div>

View file

@ -0,0 +1,12 @@
## -*- coding: utf-8 -*-
<%def name="render_field_readonly(field)">
% if field.requires_label:
<div class="field-wrapper ${field.name}">
${field.label_tag()|n}
<div class="field">
${field.render_readonly()}
</div>
</div>
% endif
</%def>

View file

@ -1,81 +1,162 @@
## -*- coding: utf-8 -*- ## -*- coding: utf-8 -*-
<%inherit file="/products/crud.mako" /> <%inherit file="/products/crud.mako" />
<%namespace file="/forms/lib.mako" import="render_field_readonly" />
<%def name="head_tags()"> <%def name="head_tags()">
${parent.head_tags()} ${parent.head_tags()}
<style type="text/css"> <style type="text/css">
#product-main {
width: 80%;
}
#product-image { #product-image {
float: left; float: left;
margin-left: 250px; margin-left: 300px;
margin-top: 40px; }
.panel-wrapper {
float: left;
margin-right: 15px;
width: 45%;
} }
</style> </style>
</%def> </%def>
<% product = form.fieldset.model %>
<%def name="render_organization_fields(form)">
${render_field_readonly(form.fieldset.department)}
${render_field_readonly(form.fieldset.subdepartment)}
${render_field_readonly(form.fieldset.category)}
${render_field_readonly(form.fieldset.family)}
${render_field_readonly(form.fieldset.report_code)}
</%def>
<%def name="render_price_fields(form)">
${render_field_readonly(form.fieldset.regular_price)}
${render_field_readonly(form.fieldset.current_price)}
${render_field_readonly(form.fieldset.deposit_link)}
${render_field_readonly(form.fieldset.tax)}
</%def>
<%def name="render_flag_fields(form)">
${render_field_readonly(form.fieldset.weighed)}
${render_field_readonly(form.fieldset.discountable)}
${render_field_readonly(form.fieldset.special_order)}
${render_field_readonly(form.fieldset.organic)}
${render_field_readonly(form.fieldset.not_for_sale)}
${render_field_readonly(form.fieldset.deleted)}
</%def>
<div class="form-wrapper"> <div class="form-wrapper">
<ul class="context-menu"> <ul class="context-menu">
${self.context_menu_items()} ${self.context_menu_items()}
</ul> </ul>
${form.render()|n} <div class="panel" id="product-main">
<h2>Product</h2>
% if image: <div class="panel-body">
${h.image(image_url, "Product Image", id='product-image', path=image_path, use_pil=True)} <div style="clear: none; float: left;">
% endif ${render_field_readonly(form.fieldset.upc)}
</div> ${render_field_readonly(form.fieldset.brand)}
${render_field_readonly(form.fieldset.description)}
<% product = form.fieldset.model %> ${render_field_readonly(form.fieldset.unit_size)}
${render_field_readonly(form.fieldset.unit_of_measure)}
<div id="product-codes"> ${render_field_readonly(form.fieldset.size)}
<h2>Product Codes:</h2> ${render_field_readonly(form.fieldset.case_pack)}
% if product.codes:
<div class="grid hoverable">
<table>
<thead>
<th>Code</th>
</thead>
<tbody>
% for i, code in enumerate(product.codes, 1):
<tr class="${'odd' if i % 2 else 'even'}">
<td>${code}</td>
</tr>
% endfor
</tbody>
</table>
</div> </div>
% else: % if image:
<p>None on file.</p> ${h.image(image_url, "Product Image", id='product-image', path=image_path, use_pil=True)}
% endif % endif
</div> </div>
</div>
<div id="product-costs"> <div class="panel-wrapper"> <!-- left column -->
<h2>Product Costs:</h2>
% if product.costs: <div class="panel">
<div class="grid hoverable"> <h2>Organization</h2>
<table> <div class="panel-body">
<thead> ${self.render_organization_fields(form)}
<th>Pref.</th>
<th>Vendor</th>
<th>Code</th>
<th>Case Size</th>
<th>Case Cost</th>
<th>Unit Cost</th>
</thead>
<tbody>
% for i, cost in enumerate(product.costs, 1):
<tr class="${'odd' if i % 2 else 'even'}">
<td class="center">${'X' if cost.preference == 1 else ''}</td>
<td>${cost.vendor}</td>
<td class="center">${cost.code}</td>
<td class="center">${cost.case_size}</td>
<td class="right">${'$ %0.2f' % cost.case_cost if cost.case_cost is not None else ''}</td>
<td class="right">${'$ %0.4f' % cost.unit_cost if cost.unit_cost is not None else ''}</td>
</tr>
% endfor
</tbody>
</table>
</div> </div>
% else: </div>
<p>None on file.</p>
<div class="panel">
<h2>Flags</h2>
<div class="panel-body">
${self.render_flag_fields(form)}
</div>
</div>
</div> <!-- left column -->
<div class="panel-wrapper"> <!-- right column -->
<div class="panel">
<h2>Pricing</h2>
<div class="panel-body">
${self.render_price_fields(form)}
</div>
</div>
<div class="panel" id="product-costs">
<h2>Vendor Sources</h2>
<div class="panel-body">
% if product.costs:
<div class="grid hoverable">
<table>
<thead>
<th>Pref.</th>
<th>Vendor</th>
<th>Code</th>
<th>Case Size</th>
<th>Case Cost</th>
<th>Unit Cost</th>
</thead>
<tbody>
% for i, cost in enumerate(product.costs, 1):
<tr class="${'odd' if i % 2 else 'even'}">
<td class="center">${'X' if cost.preference == 1 else ''}</td>
<td>${cost.vendor}</td>
<td class="center">${cost.code}</td>
<td class="center">${cost.case_size}</td>
<td class="right">${'$ %0.2f' % cost.case_cost if cost.case_cost is not None else ''}</td>
<td class="right">${'$ %0.4f' % cost.unit_cost if cost.unit_cost is not None else ''}</td>
</tr>
% endfor
</tbody>
</table>
</div>
% else:
<p>None on file.</p>
% endif
</div>
</div>
<div class="panel" id="product-codes">
<h2>Additional Lookup Codes</h2>
<div class="panel-body">
% if product.codes:
<div class="grid hoverable">
<table>
<thead>
<th>Code</th>
</thead>
<tbody>
% for i, code in enumerate(product.codes, 1):
<tr class="${'odd' if i % 2 else 'even'}">
<td>${code}</td>
</tr>
% endfor
</tbody>
</table>
</div>
% else:
<p>None on file.</p>
% endif
</div>
</div>
</div> <!-- right column -->
% if buttons:
${buttons|n}
% endif % endif
</div> </div>

View file

@ -279,8 +279,9 @@ class ProductCrud(CrudView):
fs.upc.label("UPC"), fs.upc.label("UPC"),
fs.brand.with_renderer(BrandFieldRenderer), fs.brand.with_renderer(BrandFieldRenderer),
fs.description, fs.description,
fs.size, fs.unit_size,
fs.unit_of_measure.label("Unit of Measure"), fs.unit_of_measure.label("Unit of Measure"),
fs.size,
fs.weighed, fs.weighed,
fs.case_pack, fs.case_pack,
fs.department, fs.department,