From f25e4fab288875db6986eb6550cb84b18ba197fa Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Sat, 8 Jun 2019 15:50:16 -0500
Subject: [PATCH] Tweak structure of "view product" page to support Buefy,
 context menu

---
 tailbone/templates/products/view.mako | 111 ++++++++++++++++----------
 1 file changed, 68 insertions(+), 43 deletions(-)

diff --git a/tailbone/templates/products/view.mako b/tailbone/templates/products/view.mako
index 6836c974..96f61b2c 100644
--- a/tailbone/templates/products/view.mako
+++ b/tailbone/templates/products/view.mako
@@ -276,63 +276,88 @@
 
 <%def name="extra_right_panels()"></%def>
 
-<%def name="render_form()">
+<%def name="render_form_complete()">
   % 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">
-          <p class="panel-heading">Product</p>
-          <div class="panel-block">
-            <div style="display: flex; justify-content: space-between; width: 100%;">
-              <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 style="display: flex; flex-direction: column;">
+
+            <nav class="panel" id="main-product-panel">
+              <p class="panel-heading">Product</p>
+              <div class="panel-block">
+                <div style="display: flex; justify-content: space-between; width: 100%;">
+                  <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>
+            </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>
-        </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 -->
+          <ul id="context-menu">
+            ${self.context_menu_items()}
+          </ul>
+
         </div>
-
+      </script>
+      <div id="form-page-app">
+        <form-page></form-page>
       </div>
-  % else:
-      <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
+  % else:
+      ## legacy / not buefy
+
+      <div style="display: flex; justify-content: space-between;">
+
+        <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>
 
-        <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>
+        <ul id="context-menu">
+          ${self.context_menu_items()}
+        </ul>
 
       </div>
   % endif