Make options hideable

core/templates/base.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" />
     <script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/htmx.org@1.8.0/dist/ext/remove-me.js"></script>
+    <script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
     <script>
       document.addEventListener('DOMContentLoaded', () => {
 

core/templates/ui/drilldown/drilldown.html

@@ -2,7 +2,7 @@
 {% load static %}
 {% block content %}
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <div class="box">
+  <div>
     <form method="POST">
       {% csrf_token %}
 
@@ -29,7 +29,16 @@
             </div>
           </div>
         </div>
+        <div class="column is-2">
+          <div
+            _="on click toggle .is-hidden on #options"
+            class="button is-light has-text-link is-centered">
+            Options
+          </div>
+        </div>
+      </div>
 
+      <div id="options" class="columns is-hidden">
         <div class="column">
           <div class="field has-addons">
             <div class="control is-expanded has-icons-left">
@@ -52,12 +61,13 @@
           </div>
         </div>
       </div>
-
+      <div class="is-hidden"></div>
     </form>
   </div>
-  
+  <div class="block">
   <div id="results">
   </div>
+</div>
   <div id="modals-here">
   </div>
 {% endblock %}