From 05037b74fc0894fcac76800954c03e7a060ef4d8 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Mon, 11 Sep 2023 13:07:16 -0400
Subject: [PATCH] doorcontrol: Improve styling on report pages

---
 .../doorcontrol/access_report.dj.html         | 158 +++++++++---------
 1 file changed, 75 insertions(+), 83 deletions(-)

diff --git a/doorcontrol/templates/doorcontrol/access_report.dj.html b/doorcontrol/templates/doorcontrol/access_report.dj.html
index 819a256..278bcd8 100644
--- a/doorcontrol/templates/doorcontrol/access_report.dj.html
+++ b/doorcontrol/templates/doorcontrol/access_report.dj.html
@@ -2,90 +2,82 @@
 
 {% block title %}{{ selected_report }} | Door Controls | CMS{% endblock %}
 {% block content %}
-  <ul class="nav nav-tabs">
-    {% for report_name, report_url in report_types %}
-      <li class="nav-item">
-        <a class="nav-link{% if report_name == selected_report %} active{% endif %}"
-           href="{{ report_url }}?{{ query_params }}">{{ report_name }}</a>
-      </li>
-    {% endfor %}
-  </ul>
-  <form method="get" class="form-floating">
-    <div class="row align-items-center row-cols-md-auto g-2 mb-2 mt-2">
-      <div class="col-12">
-        <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-12">
-        <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-12 col-md-2">
-        <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-12">
-        <button type="submit" class="btn btn-primary">Submit</button>
-        <a href="?" class="btn btn-warning">Reset</a>
-      </div>
-    </div>
-  </form>
-  <table class="table table-bordered table-striped table-hover mb-2">
-    <thead>
-      <tr>
-        {% for column in object_list.0.keys %}<th>{{ column|title }}</th>{% endfor %}
-      </tr>
-    </thead>
-    <tbody>
-      {% for object in object_list %}
-        <tr>
-          {% for field in object.values %}<td>{{ field }}</td>{% endfor %}
-        </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-  <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">
-      {% if page_obj.has_previous %}
-        <li class="page-item">
-          <a class="page-link"
-             href="?{{ query_params }}&page={{ page_obj.previous_page_number }}">Previous</a>
-        </li>
-      {% endif %}
-      {% for page_num in paginator_range %}
-        <li class="page-item {% if page_num == page_obj.number %} active {% elif page_num == paginator.ELLIPSIS %} disabled {% endif %}">
-          <a class="page-link" href="?{{ query_params }}&page={{ page_num }}">{{ page_num }}</a>
+  <div class="d-flex flex-column align-items-center">
+    <ul class="nav nav-tabs">
+      {% for report_name, report_url in report_types %}
+        <li class="nav-item">
+          <a class="nav-link{% if report_name == selected_report %} active{% endif %}"
+             href="{{ report_url }}?{{ query_params }}">{{ report_name }}</a>
         </li>
       {% endfor %}
-      {% if page_obj.has_next %}
-        <li class="page-item">
-          <a class="page-link"
-             href="?{{ query_params }}&page={{ page_obj.next_page_number }}">Next</a>
-        </li>
-      {% endif %}
     </ul>
-  </nav>
+    <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>
+      </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 %}
+          <tr>
+            {% for field in object.values %}<td>{{ field }}</td>{% endfor %}
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    <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">
+        {% if page_obj.has_previous %}
+          <li class="page-item">
+            <a class="page-link"
+               href="?{{ query_params }}&page={{ page_obj.previous_page_number }}">Previous</a>
+          </li>
+        {% endif %}
+        {% for page_num in paginator_range %}
+          <li class="page-item {% if page_num == page_obj.number %} active {% elif page_num == paginator.ELLIPSIS %} disabled {% endif %}">
+            <a class="page-link" href="?{{ query_params }}&page={{ page_num }}">{{ page_num }}</a>
+          </li>
+        {% endfor %}
+        {% if page_obj.has_next %}
+          <li class="page-item">
+            <a class="page-link"
+               href="?{{ query_params }}&page={{ page_obj.next_page_number }}">Next</a>
+          </li>
+        {% endif %}
+      </ul>
+    </nav>
+  </div>
 {% endblock %}