From dca62be96aef93918ae8a71cdab9858d411bbfeb Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Tue, 19 Nov 2024 17:07:56 +0000
Subject: [PATCH] [Scorecards] More ovbvious styling for active advanced
 filters on homepage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rather than having an element that reads out which advanced filters are
active (which we’d already temporarily hidden because we were worried it
was just too much clutter) and a "reset" button, this commit introduces
very obvious styling for advanced filter `<select>` elements when they
have been modified. This should make it clear which filters a user has
selected, and therefore also easier to quickly reset them manually back
to the Any/All option.

The active filters are styled up to match the active buttons above,
for consistency.
---
 .../bootstrap/form-select-indicator-white.svg |  1 +
 scoring/static/scoring/scss/input.scss        |  8 +++
 .../scoring/includes/advanced-filter.html     | 50 +++----------------
 3 files changed, 16 insertions(+), 43 deletions(-)
 create mode 100644 scoring/static/scoring/img/bootstrap/form-select-indicator-white.svg

diff --git a/scoring/static/scoring/img/bootstrap/form-select-indicator-white.svg b/scoring/static/scoring/img/bootstrap/form-select-indicator-white.svg
new file mode 100644
index 000000000..fef5c757f
--- /dev/null
+++ b/scoring/static/scoring/img/bootstrap/form-select-indicator-white.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>
diff --git a/scoring/static/scoring/scss/input.scss b/scoring/static/scoring/scss/input.scss
index af98e7503..0ef040028 100644
--- a/scoring/static/scoring/scss/input.scss
+++ b/scoring/static/scoring/scss/input.scss
@@ -70,3 +70,11 @@
   background-repeat: no-repeat;
   background-position: right 10px center;
 }
+
+// When anything other than the first <option> is selected,
+// style the <select> to look like an "active" button.
+.form-select-show-modifications:has(option ~ option[selected]) {
+  background-color: $primary;
+  background-image: url("../img/bootstrap/form-select-indicator-white.svg");
+  color: color-contrast($primary);
+}
diff --git a/scoring/templates/scoring/includes/advanced-filter.html b/scoring/templates/scoring/includes/advanced-filter.html
index b443ea012..842a79440 100644
--- a/scoring/templates/scoring/includes/advanced-filter.html
+++ b/scoring/templates/scoring/includes/advanced-filter.html
@@ -1,40 +1,5 @@
+<h3 class="mb-3 h6">Advanced filters</h3>
 
-<div class="visually-hidden">
-  <p class="mb-2">Current active filters</p>
-  {% if filter_descs %}
-  <div class="d-flex flex-wrap flex-row gap-1" role="status" aria-live="polite" aria-label="Current active advanced filters">
-      {% if 'county' in filter_params and filter_params.county != "" %}
-          <span class="badge bg-secondary rounded-pill">County: {{ filter_params.county }}</span>
-      {% endif %}
-
-      {% if 'region' in filter_params and filter_params.region != "" %}
-          <span class="badge bg-secondary rounded-pill">Region: {{ filter_params.region }}</span>
-      {% endif %}
-  
-      {% if 'control' in filter_params and filter_params.control != "" %}
-          <span class="badge bg-secondary rounded-pill">Political control: {{ filter_params.control }}</span>
-      {% endif %}
-
-      {% if 'imdq' in filter_params and filter_params.imdq %}
-          <span class="badge bg-secondary rounded-pill">IMDQ: {{ filter_params.imdq }}</span>
-      {% endif %}
-
-      {% if 'ruc_cluster' in filter_params and filter_params.ruc_cluster != "" %}
-          {% for option in urbanisation_filter %}
-              {% if filter_params.ruc_cluster == option.0 %}
-                  <span class="badge bg-secondary rounded-pill">{{ option.1 }}</span>
-              {% endif %}
-          {% endfor %}
-      {% endif %}
-
-      {% if 'population' in filter_params and filter_params.population != "" %}
-          <span class="badge bg-secondary rounded-pill">Population: {{ filter_params.population }}</span>
-      {% endif %}
-  </div>
-  {% endif %}
-</div>
-
-<h3 class="mb-3 h5">Advanced filters</h3>
 <div class="d-flex gap-3 gap-lg-4 mb-3">
   {% if filter_auth_type %}
     <input type="hidden" name="council_type" value="{{ authority_type }}">
@@ -42,7 +7,7 @@ <h3 class="mb-3 h5">Advanced filters</h3>
 
     <div id="filterUrbanisation" class="d-flex flex-column justify-content-between">
         <label for="ruc_cluster" class="fs-7 mb-2">Urbanisation</label>
-        <select class="form-select" id="ruc_cluster" name="ruc_cluster">
+        <select class="form-select form-select-sm form-select-show-modifications" id="ruc_cluster" name="ruc_cluster">
             <option value=""{% if filter_params.ruc_cluster == "" or filter_params.ruc_cluster is None %} selected{% endif %}>All</option>
           {% for option in urbanisation_filter %}
             <option value="{{ option.0 }}"{% if filter_params.ruc_cluster == option.0 %} selected{% endif %}>{{ option.1 }}</option>
@@ -53,7 +18,7 @@ <h3 class="mb-3 h5">Advanced filters</h3>
   {% if authority_type != 'combined' and authority_type != 'northern-ireland' %}
     <div id="filterDeprivationIndex" class="d-flex flex-column justify-content-between">
         <label for="imd_select" class="fs-7 mb-2">Index of multiple deprivation</label>
-        <select class="form-select" id="imd_select" name="imdq">
+        <select class="form-select form-select-sm form-select-show-modifications" id="imd_select" name="imdq">
             <option value=""{% if filter_params.imdq == "" or filter_params.imdq is None %} selected{% endif %}>All</option>
             <option value="1"{% if filter_params.imdq == 1 %} selected{% endif %}>1 (most deprived)</option>
             <option value="2"{% if filter_params.imdq == 2 %} selected{% endif %}>2</option>
@@ -67,7 +32,7 @@ <h3 class="mb-3 h5">Advanced filters</h3>
   {% if filter_params.country == "1" or filter_params.country == "" or filter_params.country is None %}
     <div id="filterRegion" class="d-flex flex-column justify-content-between">
         <label for="region_select" class="fs-7 mb-2">Region</label>
-        <select class="form-select{% if filter_params.region and filter_params.region != '' %} active{% endif %}" id="region_select" name="region">
+        <select class="form-select form-select-sm form-select-show-modifications" id="region_select" name="region">
             <option value=""{% if filter_params.region == "" or filter_params.region is None %} selected{% endif %}>Any</option>
             <option value="East Midlands"{% if filter_params.region == "East Midlands" %} selected{% endif %}>East Midlands</option>
             <option value="East of England"{% if filter_params.region == "East of England" %} selected{% endif %}>East of England</option>
@@ -85,7 +50,7 @@ <h3 class="mb-3 h5">Advanced filters</h3>
   {% if authority_type == 'district' %}
     <div id="filterCounty" class="d-flex flex-column justify-content-between">
         <label for="county_select" class="fs-7 mb-2">County</label>
-        <select class="form-select" id="county_select" name="county">
+        <select class="form-select form-select-sm form-select-show-modifications" id="county_select" name="county">
             <option value=""{% if filter_params.county == "" or filter_params.county is None %} selected{% endif %}>All</option>
             {% for option in county_filter %}
             <option value="{{ option.0 }}"{% if filter_params.county == option.0 %} selected{% endif %}>{{ option.1 }}</option>
@@ -97,7 +62,7 @@ <h3 class="mb-3 h5">Advanced filters</h3>
   {% if authority_type != 'combined' and authority_type != 'northern-ireland' %}
     <div id="filterPoliticalControl" class="d-flex flex-column justify-content-between">
         <label for="control_select" class="fs-7 mb-2">Political control (Sept 2023)</label>
-        <select class="form-select" id="control_select" name="control">
+        <select class="form-select form-select-sm form-select-show-modifications" id="control_select" name="control">
             <option value=""{% if filter_params.control == "" or filter_params.control is None %} selected{% endif %}>All</option>
             <option value="Coalition/Minority"{% if filter_params.control == "Coalition/Minority" %} selected{% endif %}>Coalition/Minority</option>
             <option value="NOC"{% if filter_params.control == "NOC" %} selected{% endif %}>No overall control</option>
@@ -112,7 +77,7 @@ <h3 class="mb-3 h5">Advanced filters</h3>
 
     <div id="filterTotalPopulation" class="d-flex flex-column justify-content-between">
         <label for="population_select" class="fs-7 mb-2">Total population</label>
-        <select class="form-select" id="population_select" name="population">
+        <select class="form-select form-select-sm form-select-show-modifications" id="population_select" name="population">
             <option value=""{% if filter_params.population == "" or filter_params.population is None %} selected{% endif %}>Any</option>
           {% for option in population_filter %}
             <option value="{{ option.0 }}"{% if filter_params.population == option.0 %} selected{% endif %}>{{ option.1 }}</option>
@@ -120,4 +85,3 @@ <h3 class="mb-3 h5">Advanced filters</h3>
         </select>
     </div>
 </div>
-<button id="resetButton" type="submit" class="btn btn-secondary">Reset advanced filters</button>