Advanced filters and New homepage layout

scoring/static/scoring/js/main.js

@@ -382,57 +382,121 @@ forEachElement('.js-section-council-autocomplete', function(input){
 });
 
 function ajaxLoadCouncilTypeScorecard(url) {
-    var selectors = [
-        '#council-type-filter',
-        '#advancedFilter .modal-body',
-        '.table-header h3',
-        '.scorecard-table'
+    const selectors = [
+      '#home-page-main-filter',
+      '.scorecard-table'
     ];
-
-    selectors.forEach(function(selector){
-        document.querySelector(selector).classList.add('loading-shimmer');
+    
+    selectors.forEach(selector => {
+      document.querySelector(selector)?.classList.add('loading-shimmer');
     });
-
+  
     fetch(url)
-    .then(function(response) {
-        return response.text()
-    })
-    .then(function(html) {
-        var parser = new DOMParser();
-        var doc = parser.parseFromString(html, "text/html");
-        selectors.forEach(function(selector){
-            document.querySelector(selector).replaceWith(doc.querySelector(selector));
+      .then(response => response.text())
+      .then(html => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, "text/html");
+
+        selectors.forEach(selector => {
+          const newElement = doc.querySelector(selector);
+          const currentElement = document.querySelector(selector);
+          if (newElement && currentElement) {
+            currentElement.replaceWith(newElement);
+          }
         });
+
         setUpTableSorting();
-    })
-    .catch(function(err) {
+
+        const advancedFilter = document.querySelector('#advancedFilter');
+        if (advancedFilter) {
+          new bootstrap.Collapse(advancedFilter, {
+            toggle: false
+          });
+        }
+      })
+      .catch(err => {
         window.location.href = url;
-    });
+      });
+}
+
+function handleFilterChange(e) {
+    e.preventDefault();
+
+    const mainForm = document.getElementById('home-page-main-filter');
+    if (!mainForm) return;
+    const formData = new FormData(mainForm);
+
+    // Convert FormData to URLSearchParams
+    const params = new URLSearchParams(formData);
+
+    // Get the base URL (current path without query parameters)
+    const baseUrl = window.location.pathname;
+    const url = `${baseUrl}?${params.toString()}`;
+    history.pushState({}, '', url);
+
+    ajaxLoadCouncilTypeScorecard(url);
 }
 
-if ( typeof window.fetch !== 'undefined' ) {
-    document.addEventListener('click', function(e){
-        if ( e.target.matches('#council-type-filter a') ) {
-            e.preventDefault();
-            var href = e.target.href;
-            history.pushState({}, '', href);
-            ajaxLoadCouncilTypeScorecard(href);
+if (typeof window.fetch !== 'undefined') {
+    document.addEventListener('click', e => {
+      if (e.target.matches('#council-type-filter a')) {
+        e.preventDefault();
+        const href = e.target.href;
+        history.pushState({}, '', href);
+        ajaxLoadCouncilTypeScorecard(href);
+      }
+    });
+
+    // Handle form submission (Apply filters button)
+    document.addEventListener('submit', e => {
+      if (e.target.matches('#home-page-main-filter')) {
+        handleFilterChange(e);
+      }
+    });
+
+    // Handle radio buttons and select changes
+    document.addEventListener('change', e => {
+      if (e.target.matches('#home-page-main-filter input[type="radio"]') ||
+          e.target.matches('#home-page-main-filter select')) {
+        handleFilterChange(new Event('submit'));
+      }
+    });
+
+    // Handle reset button
+    document.addEventListener('click', e => {
+      if (e.target.matches('#resetButton')) {
+        e.preventDefault();
+
+        const mainForm = document.getElementById('home-page-main-filter');
+        if (mainForm) {
+          // Reset radio buttons
+          mainForm.querySelectorAll('input[type="radio"]').forEach(radio => {
+            radio.checked = radio.defaultChecked;
+          });
+
+          // Reset select elements
+          mainForm.querySelectorAll('select').forEach(select => {
+            select.selectedIndex = 0;
+          });
+
+          handleFilterChange(new Event('submit'));
         }
+      }
     });
 
-    var councilTypePaths = [
-        '/',
-        '/scoring/district/',
-        '/scoring/county/',
-        '/scoring/combined/',
-        '/scoring/northern-ireland/'
+    const councilTypePaths = [
+      '/',
+      '/scoring/district/',
+      '/scoring/county/',
+      '/scoring/combined/',
+      '/scoring/northern-ireland/'
     ];
 
-    window.addEventListener('popstate', function(e){
-        var url = new URL(window.location.href);
-        if ( councilTypePaths.indexOf(url.pathname) != -1 ) {
-            ajaxLoadCouncilTypeScorecard(window.location.href);
-        }
+    window.addEventListener('popstate', e => {
+      const url = new URL(window.location.href);
+      if (councilTypePaths.includes(url.pathname)) {
+        ajaxLoadCouncilTypeScorecard(window.location.href);
+      }
     });
 }
 

scoring/static/scoring/scss/_utils.scss

@@ -56,7 +56,31 @@ $utilities: map-merge(
             map-get($utilities, "position"),
             (
                 responsive: true
+            )
+        ),
+        "row-gap": (
+        responsive: true,
+        property: row-gap,
+        class: row-gap,
+        values: $spacers
+        ),
+        "column-gap": (
+            responsive: true,
+            property: column-gap,
+            class: column-gap,
+            values: $spacers
+        ),
+        "width": map-merge(
+          map-get($utilities, "width"),
+          (
+            values: map-merge(
+              map-get(map-get($utilities, "width"), "values"),
+              (
+                10: 10%,
+                15: 15%
+              ),
             ),
+          ),
         ),
     ),
 );
@@ -69,20 +93,8 @@ $utilities: map-merge(
     }
 }
 
-$utilities: map-merge(
-  $utilities,
-  (
-    "width": map-merge(
-      map-get($utilities, "width"),
-      (
-        values: map-merge(
-          map-get(map-get($utilities, "width"), "values"),
-          (
-            10: 10%,
-            15: 15%
-          ),
-        ),
-      ),
-    ),
-  )
-);
+@each $color, $value in $theme-colors {
+    .btn-outline-#{$color} {
+        --bs-btn-bg: rgba(255, 255, 255, 0.3) !important;
+    }
+}

scoring/static/scoring/scss/awesomplete.scss

@@ -18,7 +18,7 @@
     & > ul {
         position: absolute;
         left: 0;
-        z-index: 10;
+        z-index: 32;
         min-width: 100%;
         box-sizing: border-box;
         list-style: none;

scoring/static/scoring/scss/buttons.scss

@@ -24,6 +24,8 @@ a,
 .btn,
 .link-light,
 button {
+  text-decoration-skip-ink: none; // Prevents the underline to get cut off
+  text-underline-offset: 0.2rem; // Improve readability of links
   &:focus {
     outline: 0 !important;
     color: $black !important;

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/static/scoring/scss/navbar.scss

@@ -31,7 +31,7 @@
     display: flex;
     flex-direction: column;
     padding-bottom: 1.5rem;
-    margin: 1rem 0;
+    margin: 1rem -1rem;
     border-bottom: 1px solid $border-color;
 
     label {
@@ -49,6 +49,16 @@
         margin: 0 0 0.25rem 0;
         border-bottom: none;
 
+        .home-page &{
+            background-color: $primary;
+            color: $white;
+            position: fixed;
+            top: 0;
+            right: 2rem;
+            width: fit-content;
+            z-index: 999;
+        }
+
         label {
             margin-bottom: 0;
             margin-right: 1rem;

scoring/static/scoring/scss/scoring-table.scss

@@ -19,7 +19,6 @@ $border-table: 1px solid transparentize($color: $black, $amount: 1);
     width: 100%;
     max-height: 97vh;
     overflow: auto;
-    border-radius: $border-radius;
 
     .highlight {
         th, td {
@@ -35,13 +34,21 @@ $border-table: 1px solid transparentize($color: $black, $amount: 1);
         z-index: 0;
         min-width: 200px;
         font-weight: 400;
-        padding: 1rem 0.7rem;
+        padding: 1rem 0.5rem;
     }
 
     th {
         background-color: $white;
         font-size: 0.85rem;
-        vertical-align: top;
+        vertical-align: middle;
+
+        .section-title {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 0.5rem;
+        }
     }
 
     @media only screen and (max-width: $table-desktop-breakpoint) {
@@ -162,7 +169,6 @@ $score-bar-vertical-padding: 8px;
 // Sort icon
 .sort-icon {
     @include transition(background-image, color, background-color 0.3s ease-in-out);
-    margin-right: 0.5rem;
     background-image: url("../img/chevron-down-purple.svg");
     background-size: 15px;
     background-position: center;

scoring/templates/scoring/base.html

@@ -45,13 +45,13 @@
     <nav class="navbar navbar-expand-lg site-nav">
         <div class="d-flex flex-row align-items-center">
             <a class="navbar-brand" href="{% url 'scoring:home' %}">
-                {% include 'caps/icons/council-climate-logo-2023.html' with classes='text-dark' width='7em' height='auto' role='presentation' %}
+                {% include 'caps/icons/council-climate-logo-2023.html' with classes='text-dark' width='7em' height='2.5em' role='presentation' %}
                 <span class="visually-hidden">Council Climate Action Scorecards</span>
             </a>
 
             <div class="navbar-nav">
                 <div class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" role="button" id="scorecardsVersion" data-bs-toggle="dropdown" aria-expanded="false">
+                    <a class="dropdown-toggle btn btn-primary" href="#" role="button" id="scorecardsVersion" data-bs-toggle="dropdown" aria-expanded="false">
                         2023
                     </a>
                     <ul class="dropdown-menu position-absolute ms-n3 shadow-lg" aria-labelledby="scorecardsVersion">
@@ -66,29 +66,29 @@
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse flex-column align-items-end" id="navbarSupportedContent">
-            <form action="{% url 'scoring:location_results' %}" class="navbar-location-search-form">
-                <label for="navbarLocationSearch">Jump to a council</label>
+            <form action="{% url 'scoring:location_results' %}" class="navbar-location-search-form p-3 p-lg-2 rounded-bottom">
+                <label for="navbarLocationSearch">Go to a council's page</label>
                 <input class="form-control form-control-sm searchbar js-location-search-autocomplete" type="search" name="pc" id="navbarLocationSearch" placeholder="Postcode">
                 <button type="submit" class="visually-hidden">Search</button>
             </form>
-            <ul class="navbar-nav">
+            <ul class="navbar-nav {% if current_page == 'home-page' %}mt-lg-4{% endif %}">
                 <li id="home-page" class="nav-item">
-                    <a class="nav-link" href="{% url 'scoring:home' %}">Scorecards</a>
+                    <a class="nav-link link-primary" href="{% url 'scoring:home' %}">Scorecards</a>
                 </li>
                 <li id="methodology-page" class="nav-item">
-                    <a class="nav-link" href="{% url 'scoring:sections' %}">Sections</a>
+                    <a class="nav-link link-primary" href="{% url 'scoring:sections' %}">Sections</a>
                 </li>
                 <li id="methodology-page" class="nav-item">
-                    <a class="nav-link" href="{% url 'scoring:methodology' %}">2025 Draft Methodology</a>
+                    <a class="nav-link link-primary" href="{% url 'scoring:methodology' %}">2025 Draft Methodology</a>
                 </li>
                 <li id="how-to-page" class="nav-item">
-                    <a class="nav-link" href="{% url 'generic:how-to-use-the-scorecards' %}">How to use the Scorecards</a>
+                    <a class="nav-link link-primary" href="{% url 'generic:how-to-use-the-scorecards' %}">How to use the Scorecards</a>
                 </li>
                 <li id="about-page" class="nav-item">
-                    <a class="nav-link" href="{% url 'generic:about' %}">About</a>
+                    <a class="nav-link link-primary" href="{% url 'generic:about' %}">About</a>
                 </li>
                 <li id="contact-page" class="nav-item">
-                    <a class="nav-link" href="{% url 'generic:contact' %}">Contact</a>
+                    <a class="nav-link link-primary" href="{% url 'generic:contact' %}">Contact</a>
                 </li>
             </ul>
         </div>