improve nav bar layout

app/rest/static/query-to-xml-xslt.xml

@@ -8,6 +8,7 @@
       doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
       doctype-public="-//W3C/DTD XHTML 1.0 Strict//EN"
       indent="yes"/>
+  
   <!-- This is an identity template - it copies everything
         that doesn't match another template -->
   <xsl:template match="@* | node()">
@@ -15,7 +16,8 @@
           <xsl:apply-templates select="@* | node()"/>
       </xsl:copy>
   </xsl:template>
-  <xsl:template match="/html/body/xml/*">
+
+  <xsl:template match="/html/body/*/div[@id='xmldata']/*">
     <xsl:variable name="schema" select="//xsd:schema"/>
     <xsl:variable name="tabletypename"
                   select="$schema/xsd:element[@name=name(current())]/@type"/>
@@ -23,36 +25,39 @@
                   select="$schema/xsd:complexType[@name=$tabletypename]/xsd:sequence/xsd:element[@name='row']/@type"/>
     <xsl:variable name="tablename" select="$schema/xsd:complexType[@name=$rowtypename]/xsd:sequence/xsd:element[1]/@name"/>
      
-        <table class="pure-table pure-table-bordered pure-table-striped">
-          <thead>
-          <tr>
-            <xsl:for-each select="$schema/xsd:complexType[@name=$rowtypename]/xsd:sequence/xsd:element/@name">
-              <th><xsl:value-of select="."/></th>
-            </xsl:for-each>
-          </tr>
-          </thead>
+    <table class="pure-table pure-table-bordered pure-table-striped" style="text-align: left; width: 100%;">
+    
+      <thead style="text-align: center">
+      <tr>
+        <xsl:for-each select="$schema/xsd:complexType[@name=$rowtypename]/xsd:sequence/xsd:element/@name">
+          <th><xsl:value-of select="."/></th>
+        </xsl:for-each>
+      </tr>
+      </thead>
+
+      <xsl:for-each select="row">
+        <xsl:choose>
+          <xsl:when test="position() = last()">
+            <tfoot>
+              <tr>
+                <xsl:for-each select="*">
+                  <th style="text-align: center"><xsl:value-of select="."/></th>
+                </xsl:for-each>
+              </tr>
+            </tfoot>
+          </xsl:when>
+          <xsl:otherwise>
+            <tr>
+              <xsl:for-each select="*">
+                <td><xsl:value-of select="."/></td>
+              </xsl:for-each>
+            </tr>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:for-each>
+
+    </table>
 
-          <xsl:for-each select="row">
-            <xsl:choose>
-              <xsl:when test="position() = last()">
-                <tfoot>
-                  <tr>
-                    <xsl:for-each select="*">
-                      <th><xsl:value-of select="."/></th>
-                    </xsl:for-each>
-                  </tr>
-                </tfoot>
-              </xsl:when>
-              <xsl:otherwise>
-                <tr>
-                  <xsl:for-each select="*">
-                    <td><xsl:value-of select="."/></td>
-                  </xsl:for-each>
-                </tr>
-              </xsl:otherwise>
-            </xsl:choose>
-          </xsl:for-each>
-        </table>
   </xsl:template>
 
 </xsl:stylesheet>

app/rest/templates/button-nav.tpl

@@ -0,0 +1,11 @@
+<div class="pure-g">
+  <div class="pure-u-1">
+    <div class="pure-button-group" role="group" style="padding: 1em 0 0;">
+      <button class="pure-button" type="submit"> Apply </button>
+    % for target in ("trend", "products", "categories", "groups", "tags"):
+    %   disabled = 'disabled="true"' if target == action else ''
+      <button class="pure-button" type="submit" formaction="{{target}}" {{!disabled}}> {{target.title()}} </button>
+    % end
+    </div>
+  </div>
+</div>

app/rest/templates/filter-set.tpl

@@ -1,3 +1,4 @@
+<div class="pure-u-lg-1-8"></div>
 <%
   for filter in (product, category, group):
     include('include-exclude', **filter)
@@ -6,4 +7,5 @@
 <%
   include('include-exclude', **tags)
   include('select-one', **units)
-%>
+%>
+<div class="pure-u-lg-1-8"></div>

app/rest/templates/form-nav.tpl

@@ -1,17 +1,8 @@
 <form id="filter" method="{{ method }}" action="{{ action }}">
-  <div class="pure-g">
-    <div class="pure-u-1-5 pure-u-lg-11-12">
-    % for param in params:
-    %   include('hidden-input', **param)
-    % end
-    </div>
-    <div class="pure-u-1-5 pure-u-lg-1-12">
-      <button class="pure-button" type="submit" style="width: 80%"> Apply </button>
-      % for target in ("trend", "products", "categories", "groups", "tags"):
-      %   if target != action:
-      <button class="pure-button" type="submit" formaction="{{target}}" style="width: 80%"> {{target.title()}} </button>
-      %   end
-      % end
-    </div>
+  % include('button-nav', action=action)
+  <div style="width: 0; height: 1em">
+  % for param in params:
+  %   include('hidden-input', **param)
+  % end
   </div>
 </form>

app/rest/templates/form.tpl

@@ -1,17 +1,13 @@
-<form id="filter" style="display: inline-flex"  method="{{ method }}" action="{{ action }}">
-  <div class="pure-g">
-    <%
-    include('filter-set',
-      product=product, category=category, group=group,
-      tags=tags, units=units)
-    %>
-    <div class="pure-u-1-5 pure-u-lg-1-12">
-      <button class="pure-button" type="submit" style="width: 80%"> Apply </button>
-      % for target in ("trend", "products", "categories", "groups", "tags"):
-      %   if target != action:
-      <button class="pure-button" type="submit" formaction="{{target}}" style="width: 80%"> {{target.title()}} </button>
-      %   end
-      % end
+<form id="filter" method="{{ method }}" action="{{ action }}">
+  % include('button-nav', action=action)
+  <details>
+    <summary>Click to expand filter...</summary>
+      <div class="pure-g">
+        <%
+        include('filter-set',
+          product=product, category=category, group=group,
+          tags=tags, units=units)
+        %>
     </div>
-  </div>
+  </details>
 </form>

app/rest/templates/hidden-input.tpl

@@ -1 +1 @@
-<input type="text" name="{{name}}" value="{{value}}" hidden="true"></input>
+<input type="text" name="{{name}}" value="{{value}}" hidden="true"/>

app/rest/templates/include-exclude.tpl

@@ -1,4 +1,4 @@
-<div class="pure-u-{{"1-3" if name != "tag" else "2-5"}} pure-u-lg-{{"5-24" if name != "tag" else "1-6"}}">
+<div class="pure-u-1-3 pure-u-lg-{{"1-6" if name != "tag" else "1-8"}}">
   <div class="pure-g">
     <div class="pure-u-1">
       <div class="l-box">

app/rest/templates/query-to-xml.tpl

@@ -29,11 +29,15 @@ body {
 }
     </style>
   </head>
-  <body>
+  <body align="center">
 {{!form}}
-<xml>
+    <div class="pure-g">
+      <div class="pure-u-lg-1-3"> </div>
+      <div id="xmldata" class="pure-u-1 pure-u-lg-1-3">
 {{!xml}}
-</xml>
+      </div>
+      <div class="pure-u-lg-1-3"> </div>
+    </div>
   </body>
 </html>
 

app/rest/templates/select-one.tpl

@@ -1,4 +1,4 @@
-<div class="pure-u-2-5 pure-u-lg-1-8">
+<div class="pure-u-1-3 pure-u-lg-1-12">
 <div class="pure-g">
   <div class="pure-u-1">
     <div class="l-box">

app/rest/templates/select.tpl

@@ -5,7 +5,7 @@
 %    include('label', id=id, label=label)
 %  end
 
-<select id="{{id}}" name="{{name}}" size=10 {{multiple}} style="width: 95%; margin: 1em">
+<select id="{{id}}" name="{{name}}" size=10 {{multiple}} style="width: calc(100% - 1em); margin: 0 1em 1em">
 %  if defined("hint"):
 %    include('option', value=hint, disabled=True)
 %  end

app/rest/templates/trend.tpl

@@ -9,6 +9,7 @@ html {
 body {
   background-color: #080808;
   color: #cccccc;
+  width: calc(100% - 2em)
 }
 select::-webkit-scrollbar {
   width: 11px;
@@ -28,7 +29,9 @@ select::-webkit-scrollbar-thumb {
   border: 3px solid var(--scrollbarBG);
 }
 
-svg {width: 100vw}
+svg {
+  width: 100%;
+}
         </style>
         <title>Trend</title>
         <meta name="viewport" content="width=device-width, initial-scale=1"/>

test/rest/templates/test_include-exclude.py

@@ -3,16 +3,16 @@ from pytest import mark, raises
 from bottle import template
 
 @mark.parametrize('expected, params', [
-    ("""<div class="pure-u-1-3 pure-u-lg-1-4">
-<div class="pure-g">
-  <div class="pure-u-1">
-    <div class="l-box">
-      <h3>Item</h3>
+    ("""<div class="pure-u-1-3 pure-u-lg-1-6">
+  <div class="pure-g">
+    <div class="pure-u-1">
+      <div class="l-box">
+        <h3>Item</h3>
+      </div>
     </div>
-  </div>
 <div class="pure-u-1">
 
-<select id="item-include" name="item" size=10 multiple style="width: 98%; margin: 1em">
+<select id="item-include" name="item" size=10 multiple style="width: calc(100% - 1em); margin: 0 1em 1em">
   <option value="Include" disabled >Include</option>
 
   <option value="val1-to-backend"  >val1</option>
@@ -21,14 +21,14 @@ from bottle import template
 </div>
 <div class="pure-u-1">
 
-<select id="item-exclude" name="item" size=10 multiple style="width: 98%; margin: 1em">
+<select id="item-exclude" name="item" size=10 multiple style="width: calc(100% - 1em); margin: 0 1em 1em">
   <option value="Exclude" disabled >Exclude</option>
 
   <option value="val1-to-backend"  >val1</option>
   <option value="val2" disabled >val2</option>
 </select>
 </div>
-</div>
+  </div>
 </div>""",{
     "name": "item",
     "_include": {

test/rest/templates/test_select-one.py

@@ -3,7 +3,7 @@ from pytest import mark, raises
 from bottle import template
 
 @mark.parametrize('expected, params', [
-    ("""<div class="pure-u-1-3 pure-u-lg-1-8">
+    ("""<div class="pure-u-1-3 pure-u-lg-1-12">
 <div class="pure-g">
   <div class="pure-u-1">
     <div class="l-box">
@@ -12,7 +12,7 @@ from bottle import template
   </div>
 <div class="pure-u-1">
 
-<select id="unit-select-one" name="unit" size=10  style="width: 98%; margin: 1em">
+<select id="unit-select-one" name="unit" size=10  style="width: calc(100% - 1em); margin: 0 1em 1em">
 
 
   <option value="Bags"  >Bags</option>

test/rest/templates/test_select.py

@@ -5,7 +5,7 @@ from bottle import template
 @mark.parametrize('expected, params', [
     ("""<div class="pure-u-1">
 <label for="select-id">Choose: </label>
-<select id="select-id" name="select-name" size=10 multiple style="width: 98%; margin: 1em">
+<select id="select-id" name="select-name" size=10 multiple style="width: calc(100% - 1em); margin: 0 1em 1em">
   <option value="hint" disabled >hint</option>
 <optgroup label="Group">
   <option value="val1-to-backend"  >val1</option>
@@ -25,7 +25,7 @@ from bottle import template
     }, ]}, ]}),
     ("""<div class="pure-u-1">
 
-<select id="select-unit-id" name="unit" size=10  style="width: 98%; margin: 1em">
+<select id="select-unit-id" name="unit" size=10  style="width: calc(100% - 1em); margin: 0 1em 1em">
 
 
   <option value="val1"  >val1</option>
@@ -42,7 +42,7 @@ from bottle import template
     }, ]}, ]}),
     ("""<div class="pure-u-1">
 <label for="select-id">Choose: </label>
-<select id="select-id" name="select-name" size=10 multiple style="width: 98%; margin: 1em">
+<select id="select-id" name="select-name" size=10 multiple style="width: calc(100% - 1em); margin: 0 1em 1em">
   <option value="hint" disabled >hint</option>
 <optgroup label="Group">
   <option value="val1-to-backend"  >val1</option>