Homepage layout and new advanced filters

scoring/static/scoring/js/main.js

@@ -381,11 +381,54 @@ forEachElement('.js-section-council-autocomplete', function(input){
     });
 });
 
+
+// When the form is submitted, it scrolls you down to the same place you were before submitting it.
+function setupScrollRestoration() {
+    var form = document.getElementById('advancedFilterForm');
+    form.addEventListener('submit', function() {
+        sessionStorage.setItem('scrollPosition', window.scrollY);
+    });
+
+    window.addEventListener('load', function() {
+        var scrollPosition = sessionStorage.getItem('scrollPosition');
+        if (scrollPosition) {
+            window.scrollTo(0, scrollPosition);
+            sessionStorage.removeItem('scrollPosition');
+        }
+    });
+}
+
+setupScrollRestoration();
+
+function initializeFilterButtons() {
+    var form = document.getElementById("advancedFilterForm");
+    var countrySelect = document.getElementById("countrySelect");
+
+    function setCountryAndSubmit(countryValue) {
+        if (countrySelect) {
+            countrySelect.value = countryValue;
+            sessionStorage.setItem('scrollPosition', window.scrollY);
+            form.submit();
+        }
+    }
+
+    document.getElementById("js-filter-nation-england")?.addEventListener("click", function() {
+        setCountryAndSubmit("1");
+    });
+
+    document.getElementById("js-filter-nation-scotland")?.addEventListener("click", function() {
+        setCountryAndSubmit("2");
+    });
+
+    document.getElementById("js-filter-nation-wales")?.addEventListener("click", function() {
+        setCountryAndSubmit("3");
+    });
+}
+
 function ajaxLoadCouncilTypeScorecard(url) {
     var selectors = [
-        '#council-type-filter',
-        '#advancedFilter .modal-body',
-        '.table-header h3',
+        '#home-page-main-filter',
+        '#advanced-filter-wrapper',
         '.scorecard-table'
     ];
 
@@ -404,6 +447,7 @@ function ajaxLoadCouncilTypeScorecard(url) {
             document.querySelector(selector).replaceWith(doc.querySelector(selector));
         });
         setUpTableSorting();
+        initializeFilterButtons();
     })
     .catch(function(err) {
         window.location.href = url;

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/advanced-filters.scss

@@ -0,0 +1,12 @@
+.filter-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

scoring/static/scoring/scss/input.scss

@@ -26,6 +26,10 @@
     border-color: $black !important;
     box-shadow: 0 0 0 1px $black inset, 0 0 0 2px $black, 0 0 0 6px $color-scorecard-yellow !important;
   }
+
+  &.active {
+    border-color: $primary;
+  }
 }
 
 // Radio buttons

scoring/static/scoring/scss/main.scss

@@ -66,3 +66,4 @@
 @import "open-graph-preview";
 @import "years";
 @import "gallery-component";
+@import "advanced-filters";

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 {
@@ -43,11 +43,18 @@
     }
 
     @include media-breakpoint-up(lg) {
+        background-color: $primary;
+        color: $white;
         flex-direction: row;
         align-items: center;
         padding: 0;
         margin: 0 0 0.25rem 0;
         border-bottom: none;
+        position: fixed;
+        top: 0;
+        right: 2rem;
+        width: fit-content;
+        z-index: 999;
 
         label {
             margin-bottom: 0;

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

@@ -93,7 +93,7 @@ $border-table: 1px solid transparentize($color: $black, $amount: 1);
     }
 
     .council-category-total-score, .total-score {
-        left: 250px;
+        left: 300px;
     }
 
     .has-no-plan {

scoring/templates/scoring/base.html

@@ -42,7 +42,7 @@
 </head>
 <body class="{% block bodyclass %}{% endblock %} {{ current_page }} {% if methodology_year == 2025 %}year-2025{% endif %}">
 
-    <nav class="navbar navbar-expand-lg site-nav">
+    <nav class="navbar navbar-expand-lg site-nav pt-lg-0">
         <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' %}
@@ -51,7 +51,7 @@
 
             <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 mt-lg-5">
                 <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>