From 815d8535993dbbde527155828badd6ef49b41282 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 20 Oct 2025 17:05:31 +0100
Subject: [PATCH] Refactor filter section in question table view for improved
 usability and styling

---
 templates/question_table_view.html | 86 ++++++++++++++++++++++--------
 1 file changed, 65 insertions(+), 21 deletions(-)

diff --git a/templates/question_table_view.html b/templates/question_table_view.html
index 61d7d741..7833af45 100644
--- a/templates/question_table_view.html
+++ b/templates/question_table_view.html
@@ -9,27 +9,7 @@
 {% block content %}
 
     <div class="row mb-3">
-        <div class="col-12 col-lg-3 mb-3">
-            <div class="card">
-                <div class="card-header d-flex justify-content-between align-items-center">
-                    <span class="h6 mb-0">Filters</span>
-                    <button class="btn btn-sm btn-outline-secondary d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#generic-filter-collapse" aria-expanded="false">Toggle</button>
-                </div>
-                <div id="generic-filter-collapse" class="collapse d-lg-block">
-                    <div class="card-body">
-                        <form action="" method="get">
-                            {{ filter.form|crispy }}
-                            <div class="mt-2">
-                                <button class="btn btn-primary btn-sm" type="submit">Apply</button>
-                                <a class="btn btn-secondary btn-sm" href="?">Reset</a>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="col-12 col-lg-9">
+        <div class="col-12">
             <div class="d-flex justify-content-between mb-2 align-items-center flex-column flex-md-row">
                 <div class="mb-2 mb-md-0">
                     <div class="btn-toolbar" role="toolbar">
@@ -59,4 +39,68 @@
         </div>
     </div>
 
+        <!-- Floating filter bar (fixed at bottom) -->
+    <style>
+        .floating-filter {
+            position: fixed;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1030;
+            background: var(--bs-body-bg);
+            border-top: 1px solid rgba(0,0,0,0.12);
+            padding: 0.5rem 0.75rem;
+        }
+        .floating-filter .filter-body {
+            max-height: 50vh;
+            overflow-y: auto;
+        }
+                .floating-filter .filter-toggle {
+                    position: fixed;
+                    right: 1rem;
+                    bottom: 1rem;
+                    z-index: 1040;
+        }
+        /* minibar/tab styling - small visible handle so panel isn't fully hidden */
+        .bottom-filter-minibar {
+            position: fixed;
+            right: 1rem;
+            bottom: 1rem;
+            z-index: 1045;
+            background: transparent;
+        }
+        .bottom-filter-minibar .btn { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
+    </style>
+
+            <!-- Minibar: small visible strip when panel is collapsed -->
+            <div id="bottom-filter-minibar" class="bottom-filter-minibar">
+                <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-controls="bottom-filter-body">Filters</button>
+            </div>
+
+    <button class="btn btn-primary filter-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="false" aria-controls="bottom-filter-body">Filters</button>
+
+    <div class="floating-filter shadow-lg">
+        <div id="bottom-filter-body" class="collapse show">
+            <div class="container-fluid">
+                <div class="d-flex justify-content-between align-items-start">
+                    <div class="fw-bold">Filters</div>
+                    <div>
+                        <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="true">Close</button>
+                    </div>
+                </div>
+
+                <!-- filter body collapsible so minibar stays visible -->
+                <div class="filter-body mt-2">
+                    <form action="" method="get">
+                        {{ filter.form|crispy }}
+                        <div class="mt-2">
+                            <button class="btn btn-primary btn-sm" type="submit">Apply</button>
+                            <a class="btn btn-secondary btn-sm" href="?">Reset</a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
 {% endblock %}
\ No newline at end of file