Issue #3 - initial work - in progress

app/rest/templates/button-action.tpl

@@ -1,9 +1,7 @@
-<div class="pure-g">
-  <div class="pure-u-1">
-    <div class="pure-button-group" role="action" style="padding: 1em 0 0;">
+<div class="vertical-button-group">
+  <div class="pure-button-group" role="action" style="padding: 1em 0.25em 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,11 +0,0 @@
-<div class="pure-g">
-  <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"):
-    %   disabled = 'disabled="true"' if target == action else ''
-    %   label = target.title()
-      <button class="button-resize pure-button" type="submit" formaction="{{target}}" {{!disabled}}> {{label}} </button>
-    % end
-    </div>
-  </div>
-</div>

app/rest/templates/button-style.tpl

@@ -1,15 +1,16 @@
 <style>
-.button-resize { font-size: 70%; }
-@media screen and (min-width:35.5em){
-    .button-resize { font-size: 75%; }
+.vertical-button-group .pure-button-group .pure-button:first-child {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
 }
-@media screen and (min-width:40em){
-    .button-resize { font-size: 85%; }
+.vertical-button-group .pure-button-group .pure-button:last-child {
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
 }
-@media screen and (min-width:64em){
-    .button-resize { font-size: 100%; }
-}
-@media screen and (min-width:80em){
-    .button-resize { font-size: 110%; }
+.vertical-button-group .pure-button-group .pure-button {
+    margin: 0;
+    border-radius: 0;
+    border-bottom: 1px solid rgba(0,0,0,.2);
+    width: 100%;
 }
 </style>

app/rest/templates/buttongroup-nav.tpl

@@ -0,0 +1,15 @@
+% setdefault('style', '')
+<div class="vertical-button-group">
+  <div class="pure-button-group vertical-button-group" role="{{role}}" style="padding: 1em 0.25em 0;">
+  % for target in targets:
+  %   active = 'pure-button-active' if target == action else ''
+  %   label = target.title()
+    <button
+      class="button-resize pure-button {{active}}"
+      type="submit"
+      formaction="{{target}}"
+      style="{{style}}"
+    > {{label}} </button>
+  % end
+  </div>
+</div>

app/rest/templates/form-filter.tpl

@@ -19,11 +19,17 @@ select::-webkit-scrollbar-thumb {
   border: 3px solid var(--scrollbarBG);
 }
   </style>
-  % include('button-style')
-  % include('button-nav', action=action)
+  <div class="pure-g">
+    <div class="pure-u-1-24 pure-u-lg-1-5"></div>  
+    <div class="pure-u-11-12 pure-u-lg-3-5">
+    % include('button-style')
+    % include('menu', action=action)
+
+    </div>
+    <div class="pure-u-1-24 pure-u-lg-1-5"></div>    
+  </div>
   <details style="padding: 1em 0">
     <summary>Click to expand filter...</summary>
-    % include('button-action')
     <div class="pure-g">
       <%
       include('filter-set',
@@ -38,4 +44,4 @@ select::-webkit-scrollbar-thumb {
 %   '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,17 +0,0 @@
-<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)
-
-  % end
-  </div>
-</form>
-% include('form-clear', params=params)
-
-% include('form-reload', params=params)

app/rest/templates/menu.tpl

@@ -0,0 +1,18 @@
+<div class="pure-g">
+  <div class="pure-u-1-3">
+  % include('buttongroup-nav', role='chart', style='background-color: firebrick', targets=[
+  %   "trend",
+  % ])
+
+  </div>
+  <div class="pure-u-1-3">
+  % include('buttongroup-nav', role='data', targets=[
+  %   "products", "categories", "groups", "tags"
+  % ])
+
+  </div>
+  <div class="pure-u-1-3">
+    % include('button-action')
+
+  </div>
+</div>

test/rest/templates/test_buttongroup-nav.py

@@ -0,0 +1,42 @@
+from bottle import template
+from pytest import mark
+
+@mark.parametrize('expected', [
+    """<div class="vertical-button-group">
+  <div class="pure-button-group vertical-button-group" role="nav" style="padding: 1em 0.25em 0;">
+    <button
+      class="button-resize pure-button "
+      type="submit"
+      formaction="trend"
+      style=""
+    > Trend </button>
+    <button
+      class="button-resize pure-button pure-button-active"
+      type="submit"
+      formaction="products"
+      style=""
+    > Products </button>
+    <button
+      class="button-resize pure-button "
+      type="submit"
+      formaction="categories"
+      style=""
+    > Categories </button>
+    <button
+      class="button-resize pure-button "
+      type="submit"
+      formaction="groups"
+      style=""
+    > Groups </button>
+    <button
+      class="button-resize pure-button "
+      type="submit"
+      formaction="tags"
+      style=""
+    > Tags </button>
+  </div>
+</div>"""])
+def test_form_nav_render_exact(expected):
+    assert template('buttongroup-nav', role='nav', action='products', targets=[
+        "trend", "products", "categories", "groups", "tags"
+    ]) == expected

test/rest/templates/test_form-nav.py

@@ -1,77 +0,0 @@
-from bottle import template
-from pytest import mark
-
-@mark.parametrize('expected, params', [
-    ("""<form id="filter" method="get" action="products">
-<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-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>
-    </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>
-  <div style="width: 0; height: 1em">
-<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"/>
-  </div>
-</form>
-<form id="clear" method="get" action="products">
-  <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'},
-        {'name': 'category', 'value': '!Beef'},
-        {'name': 'group', 'value': 'Fish, Meat, Eggs'},
-        {'name': 'tag'},
-        {'name': 'unit', 'value': 'kg'},
-    ]})
-])
-def test_form_nav_render_exact(expected, params):
-    assert template('form-nav', **params) == expected