rattail/tailbone
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor product view template to use flexbox styles

Browse source 
finally, the layout is reasonably clean and should stay that way...
This commit is contained in:
Lance Edgar 2018-12-12 15:07:18 -06:00
parent 6907fbe844
commit 841dda903f
2 changed files with 40 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

81
tailbone/templates/products/view.mako
View file

@ -1,55 +1,52 @@
## -*- coding: utf-8; -*-
<%inherit file="/master/view.mako" />
<%def name="extra_styles()">
${parent.extra_styles()}
<style type="text/css">
#product-main {
margin-top: 1em;
width: 80%;
}
#product-image {
float: left;
}
</style>
</%def>
##############################
## page body
##############################
<div class="form-wrapper">
<ul class="context-menu">
<div style="display: flex; justify-content: space-between;">
<div class="form-wrapper">
<div style="display: flex; flex-direction: column;">
<div class="panel" id="product-main">
<h2>Product</h2>
<div class="panel-body">
<div style="display: flex; justify-content: space-between;">
<div>
${self.render_main_fields(form)}
</div>
<div>
% if image_url:
${h.image(image_url, "Product Image", id='product-image', width=150, height=150)}
% endif
</div>
</div>
</div>
</div>
<div style="display: flex;">
<div class="panel-wrapper"> <!-- left column -->
${self.left_column()}
</div> <!-- left column -->
<div class="panel-wrapper" style="margin-left: 1em;"> <!-- right column -->
${self.right_column()}
</div> <!-- right column -->
</div>
</div>
% if buttons:
${buttons|n}
% endif
</div>
<ul id="context-menu">
${self.context_menu_items()}
</ul>
<div class="panel" id="product-main">
<h2>Product</h2>
<div class="panel-body">
<div style="clear: none; float: left;">
${self.render_main_fields(form)}
</div>
% if image_url:
${h.image(image_url, "Product Image", id='product-image', width=150, height=150)}
% endif
</div>
</div>
<div class="panel-wrapper"> <!-- left column -->
${self.left_column()}
</div> <!-- left column -->
<div class="panel-wrapper"> <!-- right column -->
${self.right_column()}
</div> <!-- right column -->
% if buttons:
${buttons|n}
% endif
</div>
##############################