From 017aea4b3ed7da3f87e92ff56a5cfeffb41ff389 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Wed, 6 Dec 2023 21:34:25 -0500
Subject: [PATCH] doorcontrol: Improve responsiveness of form controls and
 table in reports

---
 .../doorcontrol/access_report.dj.html         | 100 ++++++++++--------
 1 file changed, 57 insertions(+), 43 deletions(-)

diff --git a/doorcontrol/templates/doorcontrol/access_report.dj.html b/doorcontrol/templates/doorcontrol/access_report.dj.html
index 278bcd8..c0e6959 100644
--- a/doorcontrol/templates/doorcontrol/access_report.dj.html
+++ b/doorcontrol/templates/doorcontrol/access_report.dj.html
@@ -2,7 +2,7 @@
 
 {% block title %}{{ selected_report }} | Door Controls | CMS{% endblock %}
 {% block content %}
-  <div class="d-flex flex-column align-items-center">
+  <div class="vstack align-items-center">
     <ul class="nav nav-tabs">
       {% for report_name, report_url in report_types %}
         <li class="nav-item">
@@ -11,52 +11,66 @@
         </li>
       {% endfor %}
     </ul>
-    <form method="get" class="form-floating m-2 d-flex align-items-center">
-      <div class="form-floating mx-2">
-        <input type="date"
-               class="form-control"
-               id="startDate"
-               name="timestamp__gte"
-               value="{{ timestamp__gte|date:'Y-m-d' }}">
-        <label for="startDate">Start Date</label>
+    <form method="get" class="container">
+      <div class="row align-items-center">
+        <div class="col gy-1">
+          <div class="form-floating">
+            <input type="date"
+                   class="form-control"
+                   id="startDate"
+                   name="timestamp__gte"
+                   value="{{ timestamp__gte|date:'Y-m-d' }}">
+            <label for="startDate">Start Date</label>
+          </div>
+        </div>
+        <div class="col gy-1">
+          <div class="form-floating">
+            <input type="date"
+                   class="form-control"
+                   id="endDate"
+                   name="timestamp__lte"
+                   value="{{ timestamp__lte|date:'Y-m-d' }}">
+            <label for="endDate">End Date</label>
+          </div>
+        </div>
+        <div class="col-md gy-1">
+          <div class="form-floating">
+            <input type="number"
+                   class="form-control"
+                   id="itemsPerPage"
+                   name="items_per_page"
+                   value="{{ items_per_page }}"
+                   min="10"
+                   max="200"
+                   step="10"
+                   required>
+            <label for="itemsPerPage">Items Per Page</label>
+          </div>
+        </div>
+        <div class="col-6 col-md-auto gy-1">
+          <button type="submit" class="btn btn-primary w-100">Submit</button>
+        </div>
+        <div class="col-6 col-md-auto gy-1">
+          <a href="?" class="btn btn-warning w-100">Reset</a>
+        </div>
       </div>
-      <div class="form-floating mx-2">
-        <input type="date"
-               class="form-control"
-               id="endDate"
-               name="timestamp__lte"
-               value="{{ timestamp__lte|date:'Y-m-d' }}">
-        <label for="endDate">End Date</label>
-      </div>
-      <div class="form-floating mx-1">
-        <input type="number"
-               class="form-control"
-               id="itemsPerPage"
-               name="items_per_page"
-               value="{{ items_per_page }}"
-               min="10"
-               max="200"
-               step="10"
-               required>
-        <label for="itemsPerPage">Items Per Page</label>
-      </div>
-      <button type="submit" class="btn btn-primary mx-2">Submit</button>
-      <a href="?" class="btn btn-warning mx-1">Reset</a>
     </form>
-    <table class="table table-striped table-hover mb-2 w-auto">
-      <thead>
-        <tr>
-          {% for column in object_list.0.keys %}<th>{{ column|title }}</th>{% endfor %}
-        </tr>
-      </thead>
-      <tbody>
-        {% for object in object_list %}
+    <div class="table-responsive mw-100">
+      <table class="table table-striped table-hover mb-2 w-auto">
+        <thead>
           <tr>
-            {% for field in object.values %}<td>{{ field }}</td>{% endfor %}
+            {% for column in object_list.0.keys %}<th>{{ column|title }}</th>{% endfor %}
           </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {% for object in object_list %}
+            <tr>
+              {% for field in object.values %}<td>{{ field }}</td>{% endfor %}
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
     <nav aria-label="Page navigation">
       <div class="text-center mb-2">Showing {{ page_obj.object_list|length }} of {{ paginator.count }} results.</div>
       <ul class="pagination justify-content-center">