fixup! add some filters to the volunteers list

mysociety · Nov 21, 2024 · 5eba8a5 · 5eba8a5
1 parent 463ccf9
commit 5eba8a5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 37 deletions.
diff --git 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
@@ -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>