keep action buttons with filter (hide if filter collapsed) and update test cases

app/rest/form.py

@@ -69,7 +69,7 @@ def get_form(action: str, method: str, filter_data, data: DataFrame):
         'category': 1,
         'group': 2,
     }[x])
-    return template('form', action=action, method=method,
+    return template('form-filter', action=action, method=method,
         params=filter_data,
         **{
             k: {

app/rest/templates/button-action.tpl

@@ -0,0 +1,9 @@
+<div class="pure-g">
+  <div class="pure-u-1">
+    <div class="pure-button-group" role="action" style="padding: 1em 0 0;">
+    <button class="button-resize pure-button" type="submit"> Apply </button>
+    <button form="clear" class="button-resize pure-button" type="submit"> Clear </button>
+    <button form="reload" class="button-resize pure-button" type="submit"> Reload </button>
+    </div>
+  </div>
+</div>

app/rest/templates/button-nav.tpl

@@ -1,19 +1,4 @@
 <div class="pure-g">
-  <style>
-.button-resize { font-size: 70%; }
-@media screen and (min-width:35.5em){
-    .button-resize { font-size: 75%; }
-}
-@media screen and (min-width:40em){
-    .button-resize { font-size: 85%; }
-}
-@media screen and (min-width:64em){
-    .button-resize { font-size: 100%; }
-}
-@media screen and (min-width:80em){
-    .button-resize { font-size: 110%; }
-}
-  </style>
   <div class="pure-u-1">
     <div class="pure-button-group" role="nav" style="padding: 1em 0 0;">
     % for target in ("trend", "products", "categories", "groups", "tags"):
@@ -23,11 +8,4 @@
     % end
     </div>
   </div>
-  <div class="pure-u-1">
-    <div class="pure-button-group" role="action" style="padding: 1em 0 0;">
-      <button class="button-resize pure-button" type="submit"> Apply </button>
-      <button form="clear" class="button-resize pure-button" type="submit"> Clear </button>
-      <button form="reload" class="button-resize pure-button" type="submit"> Reload </button>
-    </div>
-  </div>
-</div>
+</div>

app/rest/templates/button-style.tpl

@@ -0,0 +1,15 @@
+<style>
+.button-resize { font-size: 70%; }
+@media screen and (min-width:35.5em){
+    .button-resize { font-size: 75%; }
+}
+@media screen and (min-width:40em){
+    .button-resize { font-size: 85%; }
+}
+@media screen and (min-width:64em){
+    .button-resize { font-size: 100%; }
+}
+@media screen and (min-width:80em){
+    .button-resize { font-size: 110%; }
+}
+</style>

app/rest/templates/form-clear.tpl

@@ -1,5 +1,5 @@
 <form id="clear" method="{{ method }}" action="{{ action }}">
-  <div style="width: 0; height: 1em">
+  <div style="width: 0; height: 0">
   % for param in params:
   %   include('hidden-input', name=param['name'])
 

app/rest/templates/form.tpl → app/rest/templates/form-filter.tpl

@@ -1,14 +1,16 @@
 % from app.data.filter import get_query_param
 <form id="filter" method="{{ method }}" action="{{ action }}">
+  % include('button-style')
   % include('button-nav', action=action)
   <details style="padding: 1em 0">
     <summary>Click to expand filter...</summary>
-      <div class="pure-g">
-        <%
-        include('filter-set',
-          product=product, category=category, group=group,
-          tags=tags, units=units)
-        %>
+    % include('button-action')
+    <div class="pure-g">
+      <%
+      include('filter-set',
+        product=product, category=category, group=group,
+        tags=tags, units=units)
+      %>
     </div>
   </details>
 </form>
@@ -17,4 +19,4 @@
 %   'value': get_query_param(inc, ex),
 % } for k, (inc, ex) in params.items()]
 % include('form-clear', params=params)
-% include('form-reload', params=params)
+% include('form-reload', params=params)

app/rest/templates/form-nav.tpl

@@ -1,6 +1,10 @@
 <form id="filter" method="{{ method }}" action="{{ action }}">
+  % include('button-style')
+
   % include('button-nav', action=action)
 
+  % include('button-action')
+
   <div style="width: 0; height: 1em">
   % for param in params:
   %   include('hidden-input', **param)
@@ -9,4 +13,5 @@
   </div>
 </form>
 % include('form-clear', params=params)
-% include('form-reload', params=params)
+
+% include('form-reload', params=params)

app/rest/templates/form-reload.tpl

@@ -1,5 +1,5 @@
 <form id="reload" method="{{ method }}" action="{{ action }}">
-  <div style="width: 0; height: 1em">
+  <div style="width: 0; height: 0">
   % for param in params:
   %   include('hidden-input', **param)
 
@@ -7,4 +7,4 @@
   % include('hidden-input', name='reload', value='true')
 
   </div>
-</form>
+</form>

test/rest/templates/test_form-nav.py

@@ -3,13 +3,10 @@ from pytest import mark
 
 @mark.parametrize('expected, params', [
     ("""<form id="filter" method="get" action="products">
-<div class="pure-g">
-  <div class="pure-u-1">
-    <div class="pure-button-group" role="group" style="padding: 1em 0 0;">
-    <style>
-.button-resize { font-size: 65%; }
+<style>
+.button-resize { font-size: 70%; }
 @media screen and (min-width:35.5em){
-    .button-resize { font-size: 70%; }
+    .button-resize { font-size: 75%; }
 }
 @media screen and (min-width:40em){
     .button-resize { font-size: 85%; }
@@ -20,14 +17,24 @@ from pytest import mark
 @media screen and (min-width:80em){
     .button-resize { font-size: 110%; }
 }
-    </style>
-      <button class="button-resize pure-button" type="submit"> Apply </button>
+</style>
+<div class="pure-g">
+  <div class="pure-u-1">
+    <div class="pure-button-group" role="nav" style="padding: 1em 0 0;">
       <button class="button-resize pure-button" type="submit" formaction="trend" > Trend </button>
       <button class="button-resize pure-button" type="submit" formaction="products" disabled="true"> Products </button>
       <button class="button-resize pure-button" type="submit" formaction="categories" > Categories </button>
       <button class="button-resize pure-button" type="submit" formaction="groups" > Groups </button>
       <button class="button-resize pure-button" type="submit" formaction="tags" > Tags </button>
-      <button form="clear" class="button-resize pure-button" type="submit"> Clear </button>
+    </div>
+  </div>
+</div>
+<div class="pure-g">
+  <div class="pure-u-1">
+    <div class="pure-button-group" role="action" style="padding: 1em 0 0;">
+    <button class="button-resize pure-button" type="submit"> Apply </button>
+    <button form="clear" class="button-resize pure-button" type="submit"> Clear </button>
+    <button form="reload" class="button-resize pure-button" type="submit"> Reload </button>
     </div>
   </div>
 </div>
@@ -40,13 +47,23 @@ from pytest import mark
   </div>
 </form>
 <form id="clear" method="get" action="products">
-  <div style="width: 0; height: 1em">
+  <div style="width: 0; height: 0">
 <input type="text" name="product" value="" hidden="true"/>
 <input type="text" name="category" value="" hidden="true"/>
 <input type="text" name="group" value="" hidden="true"/>
 <input type="text" name="tag" value="" hidden="true"/>
 <input type="text" name="unit" value="" hidden="true"/>
   </div>
+</form>
+<form id="reload" method="get" action="products">
+  <div style="width: 0; height: 0">
+<input type="text" name="product" value="!Chicken Stir Fry" hidden="true"/>
+<input type="text" name="category" value="!Beef" hidden="true"/>
+<input type="text" name="group" value="Fish, Meat, Eggs" hidden="true"/>
+<input type="text" name="tag" value="" hidden="true"/>
+<input type="text" name="unit" value="kg" hidden="true"/>
+<input type="text" name="reload" value="true" hidden="true"/>
+  </div>
 </form>""", {
     "method": "get", "action": "products", "params": [
         {'name': 'product', 'value': '!Chicken Stir Fry'},