From 5eba8a5ff3315ed793e6deb85be47993b698185f Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Thu, 21 Nov 2024 13:33:42 +0000
Subject: [PATCH] fixup! add some filters to the volunteers list

---
 crowdsourcer/static/css/_forms.scss           |  6 --
 .../crowdsourcer/volunteers/list.html         | 58 +++++++++----------
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/crowdsourcer/static/css/_forms.scss b/crowdsourcer/static/css/_forms.scss
index 1a0c2e01..692bc483 100644
--- a/crowdsourcer/static/css/_forms.scss
+++ b/crowdsourcer/static/css/_forms.scss
@@ -8,9 +8,3 @@
         margin-bottom: 0;
     }
 }
-
-#volunteer_filter {
-    .btn-primary {
-        margin-top: 2rem;
-    }
-}
diff --git a/crowdsourcer/templates/crowdsourcer/volunteers/list.html b/crowdsourcer/templates/crowdsourcer/volunteers/list.html
index 464396c1..62fb5543 100644
--- a/crowdsourcer/templates/crowdsourcer/volunteers/list.html
+++ b/crowdsourcer/templates/crowdsourcer/volunteers/list.html
@@ -8,44 +8,40 @@
     <h1 class="mb-4">Sign in</h1>
     <a href="{% url 'login' %}">Sign in</a>
 {% else %}
-    <div class="float-end">
-        <a href="{% session_url 'add_volunteer' %}">Add volunteer</a>
-        <a href="{% session_url 'bulk_assign_volunteer' %}">Bulk assignment</a>
-        <a href="{% session_url 'deactivate_volunteers' %}">Stage deactivate</a>
+    <div class="d-md-flex align-items-center mb-4">
+        <h1 class="mb-md-0 me-md-auto">Volunteers</h1>
+        <ul class="nav ms-n3 me-md-n3">
+            <li class="nav-item">
+                <a href="{% session_url 'add_volunteer' %}" class="nav-link">Add volunteer</a>
+            </li>
+            <li class="nav-item">
+                <a href="{% session_url 'bulk_assign_volunteer' %}" class="nav-link">Bulk assignment</a>
+            </li>
+            <li class="nav-item">
+                <a href="{% session_url 'deactivate_volunteers' %}" class="nav-link">Stage deactivate</a>
+            </li>
+        </ul>
     </div>
 
-    <h1 class="mb-4">Volunteers</h1>
-    <form method="GET" id="volunteer_filter">
-        <div class="row">
-            <div class="col-5 col-md-4 col-lg">
-                <div class="form-group">
-                    {% bootstrap_field filter.form.marker__response_type %}
-                </div>
+    <form method="GET" id="volunteer_filter" class="bg-light p-3 rounded-sm mb-3">
+        <div class="row align-items-end flex-wrap mb-n3 mb-md-n4">
+            <div class="col" style="min-width: 10rem">
+                {% bootstrap_field filter.form.marker__response_type %}
             </div>
-            <div class="col-5 col-md-4 col-lg">
-                <div class="form-group">
-                    {% bootstrap_field filter.form.is_active %}
-                </div>
+            <div class="col" style="min-width: 10rem">
+                {% bootstrap_field filter.form.is_active %}
             </div>
-            <div class="col-5 col-md-4 col-lg">
-                <div class="form-group">
-                    {% bootstrap_field filter.form.has_assignments %}
-                </div>
+            <div class="col" style="min-width: 10rem">
+                {% bootstrap_field filter.form.has_assignments %}
             </div>
-            <div class="col-5 col-md-4 col-lg">
-                <div class="form-group">
-                    {% bootstrap_field filter.form.assigned_section %}
-                </div>
+            <div class="col" style="min-width: 10rem">
+                {% bootstrap_field filter.form.assigned_section %}
             </div>
-            <div class="col-5 col-md-5 col-lg">
-                <div class="form-group">
-                    {% bootstrap_field filter.form.username %}
-                </div>
+            <div class="col" style="min-width: 10rem">
+                {% bootstrap_field filter.form.username %}
             </div>
-            <div class="col col-md-4 col-lg">
-                <div class="form-group">
-                    <button type="submit" class="btn btn-primary btn-block mb-0">Filter list</button>
-                </div>
+            <div class="col" style="min-width: 10rem">
+                <button type="submit" class="btn btn-primary btn-block mb-3 mb-md-4">Filter list</button>
             </div>
         </div>
     </form>