compact production page search menu

scipost_django/production/templates/production/production_new.html

@@ -13,8 +13,28 @@
 
   <h1>Production Streams</h1>
 
-  <div class="card my-4">
-    <div class="card-header">Search / filter</div>
+  <details class="card my-4">
+    <summary class="card-header fs-6 d-inline-flex align-items-center">
+      Search / Filter / Bulk Actions
+      <div class="ms-auto d-inline-flex align-items-center">
+        <div id="indicator-search-productionstreams" class="htmx-indicator">
+	
+          <button class="btn btn-warning text-white me-2" type="button" disabled>
+            <strong>Loading...</strong>
+ 
+            <div class="spinner-grow spinner-grow-sm ms-2"
+                 role="status"
+                 aria-hidden="true"></div>
+ 
+          </button>
+        </div>
+
+        <a id="refresh-button" class="m-2 btn btn-primary">
+          {% include "bi/arrow-clockwise.html" %}
+        &nbsp;Refresh</a>
+      </div>
+
+    </summary>
     <div class="card-body">
       <form hx-post="{% url 'production:_hx_productionstream_list' %}"
             hx-trigger="load, keyup delay:500ms, change, click from:#refresh-button"
@@ -24,29 +44,13 @@
         <div id="search-productionstreams-form">{% crispy search_productionstreams_form %}</div>
       </form>
     </div>
-  </div>
+  </details>
 
   <div class="row">
 
-    <div class="col">
-      <em class="d-none d-md-inline">The list should update automatically. Feels stuck?</em>&nbsp;<a id="refresh-button" class="m-2 btn btn-primary">
-        {% include "bi/arrow-clockwise.html" %}
-      &nbsp;Refresh</a>
-    </div>
-
-    <div class="col-auto">
-      <div id="indicator-search-productionstreams" class="htmx-indicator">
-	
-        <button class="btn btn-sm btn-warning" type="button" disabled>
-          <strong>Loading...</strong>
  
-          <div class="spinner-grow spinner-grow-sm ms-2"
-               role="status"
-               aria-hidden="true"></div>
-	
-        </button>
-      </div>
-    </div>
+
+    <div class="col-auto"></div>
  
   </div>
   <div id="search-productionstreams-results" class="mt-2"></div>