[Scorecards] More ovbvious styling for active advanced filters on hom…

…epage

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.

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);
+}

scoring/templates/scoring/includes/advanced-filter.html

@@ -1,48 +1,13 @@
+<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 }}">
   {% endif %}
 
     <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,12 +77,11 @@ <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>
           {% endfor %}
         </select>
     </div>
 </div>
-<button id="resetButton" type="submit" class="btn btn-secondary">Reset advanced filters</button>