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

Tweak structure of "view product" page to support Buefy, context menu

Browse source
This commit is contained in:
Lance Edgar 2019-06-08 15:50:16 -05:00
parent c44c6c79f9
commit f25e4fab28
1 changed files with 68 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -276,63 +276,88 @@
<%def name="extra_right_panels()"></%def> <%def name="extra_right_panels()"></%def>
<%def name="render_form()"> <%def name="render_form_complete()">
% if use_buefy: % if use_buefy:
<div style="display: flex; flex-direction: column;"> ${self.render_form()}
<script type="text/x-template" id="form-page-template">
<div style="display: flex; justify-content: space-between;">
<nav class="panel" id="main-product-panel"> <div style="display: flex; flex-direction: column;">
<p class="panel-heading">Product</p>
<div class="panel-block"> <nav class="panel" id="main-product-panel">
<div style="display: flex; justify-content: space-between; width: 100%;"> <p class="panel-heading">Product</p>
<div> <div class="panel-block">
${self.render_main_fields(form)} <div style="display: flex; justify-content: space-between; width: 100%;">
</div> <div>
<div> ${self.render_main_fields(form)}
% if image_url: </div>
${h.image(image_url, "Product Image", id='product-image', width=150, height=150)} <div>
% endif % if image_url:
${h.image(image_url, "Product Image", id='product-image', width=150, height=150)}
% endif
</div>
</div>
</div> </div>
</nav>
<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>
</div> </div>
</nav>
<div style="display: flex;"> <ul id="context-menu">
<div class="panel-wrapper"> <!-- left column --> ${self.context_menu_items()}
${self.left_column()} </ul>
</div> <!-- left column -->
<div class="panel-wrapper" style="margin-left: 1em;"> <!-- right column -->
${self.right_column()}
</div> <!-- right column -->
</div> </div>
</script>
<div id="form-page-app">
<form-page></form-page>
</div> </div>
% else:
<div style="display: flex; flex-direction: column;">
<div class="panel" id="product-main"> % else:
<h2>Product</h2> ## legacy / not buefy
<div class="panel-body">
<div style="display: flex; justify-content: space-between;"> <div style="display: flex; justify-content: space-between;">
<div>
${self.render_main_fields(form)} <div style="display: flex; flex-direction: column;">
</div>
<div> <div class="panel" id="product-main">
% if image_url: <h2>Product</h2>
${h.image(image_url, "Product Image", id='product-image', width=150, height=150)} <div class="panel-body">
% endif <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>
</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> </div>
<div style="display: flex;"> <ul id="context-menu">
<div class="panel-wrapper"> <!-- left column --> ${self.context_menu_items()}
${self.left_column()} </ul>
</div> <!-- left column -->
<div class="panel-wrapper" style="margin-left: 1em;"> <!-- right column -->
${self.right_column()}
</div> <!-- right column -->
</div>
</div> </div>
% endif % endif