diff --git a/scoring/static/scoring/js/main.js b/scoring/static/scoring/js/main.js index f0cf32f7..2132cf3d 100644 --- a/scoring/static/scoring/js/main.js +++ b/scoring/static/scoring/js/main.js @@ -546,3 +546,53 @@ document.querySelectorAll('.js-social-graphic-download').forEach(function(el) { }); }); }); + +// Question display improved or worsened councils +// Function to update table visibility based on checkbox states +function updateTableVisibility() { + var improvedChecked = document.querySelector('.js-checkbox-improved-councils').checked; + var worsenedChecked = document.querySelector('.js-checkbox-worsened-councils').checked; + + // If no checkboxes are checked, show all rows + var showAll = !improvedChecked && !worsenedChecked; + + // Update visibility for rows with year-difference-status + forEachElement('tr[year-difference-status]', function(row) { + var status = row.getAttribute('year-difference-status'); + + // Show the row if: + // 1. No filters are active (show all) + // 2. The row's status matches the active filter + if (showAll || + (improvedChecked && status === 'improved') || + (worsenedChecked && status === 'worsened')) { + row.style.display = ''; + } else { + row.style.display = 'none'; + } + }); +} + +forEachElement('.js-checkbox-improved-councils', function(checkbox) { + checkbox.addEventListener('change', function() { + // If this checkbox is checked, uncheck the other one + if (this.checked) { + forEachElement('.js-checkbox-worsened-councils', function(otherCheckbox) { + otherCheckbox.checked = false; + }); + } + updateTableVisibility(); + }); +}); + +forEachElement('.js-checkbox-worsened-councils', function(checkbox) { + checkbox.addEventListener('change', function() { + // If this checkbox is checked, uncheck the other one + if (this.checked) { + forEachElement('.js-checkbox-improved-councils', function(otherCheckbox) { + otherCheckbox.checked = false; + }); + } + updateTableVisibility(); + }); +}); diff --git a/scoring/static/scoring/scss/table-question-council.scss b/scoring/static/scoring/scss/table-question-council.scss index 4dd8378b..f1f576ff 100644 --- a/scoring/static/scoring/scss/table-question-council.scss +++ b/scoring/static/scoring/scss/table-question-council.scss @@ -1,8 +1,22 @@ +.question-summary-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(13.625rem, 18.75rem), 1fr)); + gap: 2rem; + + &__item { + margin-bottom: 1rem; + + @media (min-width: 576px) { + margin-bottom: 0; + } + } +} + .table-question-council, .section-question-table, .table-council-question-performance { th { - vertical-align: top; + vertical-align: middle; } th, td { diff --git a/scoring/templates/scoring/question.html b/scoring/templates/scoring/question.html index 9dba9b4a..f78df6d2 100644 --- a/scoring/templates/scoring/question.html +++ b/scoring/templates/scoring/question.html @@ -76,74 +76,148 @@

Question performance

- {% if scoring_group and totals %} -
- {% for t in totals %} -
-
-
-

- {% if question.is_negatively_marked and t.score == 0 %} - Councils without penalty marks - {% else %} - {{ t.score|floatformat:0 }} point{{ t.score|pluralize }} - {% endif %} -

+ {% if scoring_group and totals %} +
+ {% for t in totals %} +
+
+
+

+ {% if question.is_negatively_marked and t.score == 0 %} + Councils without penalty marks + {% else %} + {{ t.score|floatformat:0 }} point{{ t.score|pluralize }} + {% endif %} +

+
+
+ + {{ t.count }} + + + {% if t.count == 1 %} + {% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=0 %} + {% else %} + {% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=1 %} + {% endif %} + +
+ {% comment %} TODO: Add a conditional for the .card-footer, if question didn't exist in 2023 then it won't get displayed. {% endcomment %} +
+
+ {% comment %} TODO: {% endcomment %} + 122 + in 2023 +
+
+ {% comment %} {% endcomment %} + ▲12 +
+
+
+
+ {% endfor %} +
+ +

Performance comparison between 2023 and 2025

+

{% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=1 %}

+
+
+
+
+ {% include 'caps/icons/arrow-up.html' with classes='opacity-50' width='2.5rem' height='2.5rem' role='presentation' %} + 35 +
+
+ councils + scored higher in 2025 +
+
+
+
+ + +
-
- - {{ t.count }} - - - {% if t.count == 1 %} - {% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=0 %} - {% else %} - {% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=1 %} - {% endif %} - +
+ +
+
+
+ {% include 'caps/icons/arrow-down.html' with classes='opacity-50' width='2.5rem' height='2.5rem' role='presentation' %} + 5 +
+
+ councils + scored lower in 2025 +
+
+
+
+ + +
- {% endfor %} -
- {% endif %} - {% if scores %} - - - - - - - - - - {% for score in scores %} - - - - - - {% endfor %} - -
CouncilScoreEvidence
- - {{ score.plan_score.council.name }} - - - {{ score.score|floatformat:"-2" }}/{{ score.max_score }} - - {% if score.score != 0 %} - {% for evidence_link in score.evidence_links_cleaned %} - {% if not forloop.first %}
{% endif %} - {% if evidence_link|slice:":4" == "http" %} - {{ evidence_link|domain_human }} - {% else %} - {{ evidence_link }} - {% endif %} - {% endfor %} - {% endif %} -
- {% endif %} + {% comment %} TODO: if there are changes between scores display the following message: {% endcomment %} + + {% comment %} TODO: if new 2025 question display this: {% endcomment %} + + {% endif %} + + {% if scores %} + + + + + + + + + + + {% for score in scores %} + {% comment %} TODO: Replace 'year-difference' for the actual value {% endcomment %} + + + + + + + {% endfor %} + +
CouncilScoreDifference 2023Evidence
+ + {{ score.plan_score.council.name }} + + + {{ score.score|floatformat:"-2" }}/{{ score.max_score }} + + ▼ {{ score.score|floatformat:"-2" }} + + {% if score.score != 0 %} + {% for evidence_link in score.evidence_links_cleaned %} + {% if not forloop.first %}
{% endif %} + {% if evidence_link|slice:":4" == "http" %} + {{ evidence_link|domain_human }} + {% else %} + {{ evidence_link }} + {% endif %} + {% endfor %} + {% endif %} +
+ {% endif %}
{% endblock %}