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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
tailbone/static/css/layout.css
View file

@ -170,16 +170,10 @@ body > #body-wrapper {
* Panels * Panels
******************************/ ******************************/
.panel-wrapper {
float: left;
margin-right: 15px;
width: 40%;
}
.panel, .panel,
.panel-grid { .panel-grid {
border-left: 1px solid Black; border-left: 1px solid Black;
margin-bottom: 15px; margin-bottom: 1em;
} }
.panel { .panel {

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

@ -1,55 +1,52 @@
## -*- coding: utf-8; -*- ## -*- coding: utf-8; -*-
<%inherit file="/master/view.mako" /> <%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 ## page body
############################## ##############################
<div class="form-wrapper"> <div style="display: flex; justify-content: space-between;">
<ul class="context-menu">
<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()} ${self.context_menu_items()}
</ul> </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> </div>
############################## ##############################