diff --git a/scoring/static/scoring/img/social-graphics/planning-and-land-use/planning-and-land-use.zip b/scoring/static/scoring/img/social-graphics/planning-and-land-use/planning-and-land-use.zip index 5d47761d..02ccac04 100644 Binary files a/scoring/static/scoring/img/social-graphics/planning-and-land-use/planning-and-land-use.zip and b/scoring/static/scoring/img/social-graphics/planning-and-land-use/planning-and-land-use.zip differ diff --git a/scoring/static/scoring/js/main.js b/scoring/static/scoring/js/main.js index 92bfde1c..5951a67f 100644 --- a/scoring/static/scoring/js/main.js +++ b/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; diff --git a/scoring/static/scoring/scss/_utils.scss b/scoring/static/scoring/scss/_utils.scss index baaafe6e..91ece60a 100644 --- a/scoring/static/scoring/scss/_utils.scss +++ b/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; + } +} diff --git a/scoring/static/scoring/scss/advanced-filters.scss b/scoring/static/scoring/scss/advanced-filters.scss new file mode 100644 index 00000000..dbb35c0f --- /dev/null +++ b/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); + } +} diff --git a/scoring/static/scoring/scss/input.scss b/scoring/static/scoring/scss/input.scss index af98e750..b68c80d0 100644 --- a/scoring/static/scoring/scss/input.scss +++ b/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 diff --git a/scoring/static/scoring/scss/main.scss b/scoring/static/scoring/scss/main.scss index 39151331..063c90ee 100644 --- a/scoring/static/scoring/scss/main.scss +++ b/scoring/static/scoring/scss/main.scss @@ -66,3 +66,4 @@ @import "open-graph-preview"; @import "years"; @import "gallery-component"; +@import "advanced-filters"; diff --git a/scoring/static/scoring/scss/navbar.scss b/scoring/static/scoring/scss/navbar.scss index 5320dcb1..8adda675 100644 --- a/scoring/static/scoring/scss/navbar.scss +++ b/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; diff --git a/scoring/static/scoring/scss/scoring-table.scss b/scoring/static/scoring/scss/scoring-table.scss index 6b4f31fb..1d3414df 100644 --- a/scoring/static/scoring/scss/scoring-table.scss +++ b/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 { diff --git a/scoring/templates/scoring/base.html b/scoring/templates/scoring/base.html index 3f868bfa..ad3d17c8 100644 --- a/scoring/templates/scoring/base.html +++ b/scoring/templates/scoring/base.html @@ -42,7 +42,7 @@ -