From 90f547e77f8007aefa28d7502fac16682d4ed64e Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Wed, 3 Aug 2022 07:20:30 +0100
Subject: [PATCH] Make options hideable

---
 core/templates/base.html                   |  1 +
 core/templates/ui/drilldown/drilldown.html | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/core/templates/base.html b/core/templates/base.html
index 5a92a00..2f49052 100644
--- a/core/templates/base.html
+++ b/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', () => {
 
diff --git a/core/templates/ui/drilldown/drilldown.html b/core/templates/ui/drilldown/drilldown.html
index d202c56..51529dd 100644
--- a/core/templates/ui/drilldown/drilldown.html
+++ b/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 %}