diff --git a/caps/templates/caps/icons/scorecards-star.html b/caps/templates/caps/icons/scorecards-star.html index 2983228b7..1606678e7 100644 --- a/caps/templates/caps/icons/scorecards-star.html +++ b/caps/templates/caps/icons/scorecards-star.html @@ -1 +1 @@ - + 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 5d47761d4..02ccac048 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/scss/main.scss b/scoring/static/scoring/scss/main.scss index 391513318..7913ac839 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 "percentage-ring"; diff --git a/scoring/static/scoring/scss/percentage-ring.scss b/scoring/static/scoring/scss/percentage-ring.scss new file mode 100644 index 000000000..ec19d664d --- /dev/null +++ b/scoring/static/scoring/scss/percentage-ring.scss @@ -0,0 +1,36 @@ +/* USAGE: +Always check how the ring will look at 100% and if there is an overlap between elements. + +
+
+ {% widthratio answer.council_count council_count 100%}% +
+
+*/ + +.progress-ring { + min-width: var(--ring-size, 150px); + height: var(--ring-size, 150px); + border-radius: 50%; + position: relative; + display: flex; + justify-content: center; + align-items: center; + background: conic-gradient( + var(--ring-primary-color, $primary) 0% calc(var(--ring-percentage) * 1%), + var(--ring-secondary-color, $primary-200) calc(var(--ring-percentage) * 1%) 100% + ); + + .percentage { + font-weight: bold; + color: var(--ring-primary-color, $primary); + position: absolute; + display: flex; + justify-content: center; + align-items: center; + width: calc(var(--ring-size, 150px) * 0.7); + height: calc(var(--ring-size, 150px) * 0.7); + background: white; + border-radius: 50%; + } +} diff --git a/scoring/static/scoring/scss/table-question-council.scss b/scoring/static/scoring/scss/table-question-council.scss index 4d6962798..6009bb550 100644 --- a/scoring/static/scoring/scss/table-question-council.scss +++ b/scoring/static/scoring/scss/table-question-council.scss @@ -21,6 +21,13 @@ } } + tbody { + // To make more obvious the separation between question and section row + tr.question-row:nth-child(2) td { + box-shadow: 0px -10px 5px rgba(0, 0, 0, 0.07); + } + } + // Accordion button .button-wrapper { padding: 0 !important; diff --git a/scoring/static/scoring/scss/variables.scss b/scoring/static/scoring/scss/variables.scss index 3186e6836..df4a0d647 100644 --- a/scoring/static/scoring/scss/variables.scss +++ b/scoring/static/scoring/scss/variables.scss @@ -32,7 +32,7 @@ $cyan: $color-scorecard-cyan; $light: $white; $primary: $color-scorecard-purple; $secondary: $color-scorecard-grey-800; -$success: $color-scorecard-green; +$success: darken($color-scorecard-green, 5%); // Pass contrast test $warning: $color-scorecard-red; $danger: $color-scorecard-red; $info: $color-scorecard-yellow; diff --git a/scoring/templates/scoring/council.html b/scoring/templates/scoring/council.html index f658703e4..e6b725f77 100644 --- a/scoring/templates/scoring/council.html +++ b/scoring/templates/scoring/council.html @@ -215,73 +215,245 @@

Visit us again on a bigger screen

- - + + + + + {% for comparison in comparisons %} - + {% endfor %} - - {% for section in sections %} + + + - {% if section.has_negative_points %} - - {% else %} - - {% endif %} + {% for comparison in comparisons %} + + {% endfor %} - + + + - {% if section.has_negative_points %} -
-

- {% include 'caps/icons/warning.html' with classes='me-1 mb-1' width='1.1em' height='1.1em' role='presentation' %} - Penalty marks -

- {% if section.only_negative %} - {{ council.name }} was only awarded penalty marks in this section - {% else %} - {{ council.name }} incurred a penalty of {{ section.negative_percent|floatformat:0 }}% in this section - {% endif %} -
+ {% for section in sections %} + + + + + + + {% if section.top_performer %} - {% else %} - {% endif %} + + {% for comparison in section.comparisons %} - {% endfor %} - - - + + {% for comparison in answer.comparisons %} - {% endfor %} - - {% endfor %} {% endfor %} - - - - - - - {% for comparison in comparisons %} - - {% endfor %} - - - - - -
Questions{{ council.name }}Questions + 2025 +

{{ council.name }}

+ 		+ Councils with full marks per question + {{ comparison.council.name }}{{ comparison.council.name }} - Councils with full marks per question -
+ Total score + +
+ {{ plan_score.weighted_total|floatformat:0 }}% + +
+
+

+ {% comment %} TODO check if it is a top performer that year {% endcomment %} + {% if section.top_performer %} + + {% include 'caps/icons/scorecards-star.html' with classes='text-info align-top' width='0.9em' height='0.9rem' role='presentation' %} + {% endif %} + 41% +

+

score in 2023

+
+ {% comment %} TODO display tcard his b instead of the previous onelock if question was not measured in 2023 {% endcomment %} +
+
+ Not measured in 2023 +
+
+
+ + {% comment %} ↓ {% endcomment %} + + {% comment %} TODO Update value {% endcomment %} + {% comment %} TODO Update aria-label, there are three scenarios: + - x% increase to compare with previous version of action Scorecards + - x% decrease to compare with previous version of action Scorecards + - No variation compare with previous version of action Scorecards + {% endcomment %} + {% comment %} Replace text-success when needed: + - positive variation: text-success + - negative variation: text-danger + - no change: text-muted + {% endcomment %} + 2% + compare to 2023 +
+
+
+
+ {{ comparison.weighted_total|floatformat:0 }}% + - {{ section.description }} +
+

{{ section.description }}

+ + {% if section.has_negative_points %} +
+

+ {% include 'caps/icons/warning.html' with classes='me-1 mb-1' width='1.1em' height='1.1em' role='presentation' %} + Penalty marks +

+ {% if section.only_negative %} + {{ council.name }} was only awarded penalty marks in this section + {% else %} + {{ council.name }} incurred a penalty of {{ section.negative_percent|floatformat:0 }}% in this section {% endif %} +
+ {% endif %} - - 		- {% include 'caps/icons/scorecards-star.html' with classes='text-info align-text-bottom me-1' width='1.2em' height='1.2rem' role='presentation' %} - {{ section.weighted_score|floatformat:0 }}% + +
+
+ {% include 'caps/icons/scorecards-star.html' with classes='text-info' width='1rem' height='1rem' role='presentation' %} + {{section.weighted_score|floatformat:0 }}% + Top perfomer + +
+
+
+

+ {% comment %} TODO check if it is a top performer that year {% endcomment %} + {% if section.top_performer %} + + {% include 'caps/icons/scorecards-star.html' with classes='text-info align-top' width='0.9em' height='0.9rem' role='presentation' %} + {% endif %} + 41% +

+

score in 2023

+
+
+ + {% comment %} ↓ {% endcomment %} + + {% comment %} TODO Update value {% endcomment %} + {% comment %} TODO Update aria-label, there are three scenarios: + - x% increase to compare with previous version of action Scorecards + - x% decrease to compare with previous version of action Scorecards + - No variation compare with previous version of action Scorecards + {% endcomment %} + {% comment %} Replace text-success when needed: + - positive variation: text-success + - negative variation: text-danger + - no change: text-muted + {% endcomment %} + 2% + compare to 2023 +
+
+
- {{section.weighted_score|floatformat:0 }}% - {% if section.has_negative_points %} -
- {{ section.score }} = Total score ({{ section.non_negative_max|floatformat:"-2" }}) − Penalty points ({{ section.negative_points }}) +
+
+ {{section.weighted_score|floatformat:0 }}% +
+
+

+ {% comment %} TODO check if it is a top performer that year {% endcomment %} + {% if section.top_performer %} + + {% include 'caps/icons/scorecards-star.html' with classes='text-info align-top' width='0.9em' height='0.9rem' role='presentation' %} + {% endif %} + 41% +

+

score in 2023

+
+
+ + {% comment %} ↓ {% endcomment %} + + {% comment %} TODO Update value {% endcomment %} + {% comment %} TODO Update aria-label, there are three scenarios: + - x% increase to compare with previous version of action Scorecards + - x% decrease to compare with previous version of action Scorecards + - No variation compare with previous version of action Scorecards + {% endcomment %} + {% comment %} Replace text-success when needed: + - positive variation: text-success + - negative variation: text-danger + - no change: text-muted + {% endcomment %} + 2% + compare to 2023 +
- {% endif %} +
+ + {% comment %} ERASE THIS {% endcomment %} +
+
+
+

+ Relative variation + +

+ + + {% comment %} ↓ {% endcomment %} + ↑ + 100% + +
+
+

+ Absolute variation + +

+ + + {% comment %} ↓ {% endcomment %} + ↑ + 4% + +
+
+
+ {% comment %} {% endcomment %} + + + {% if section.has_negative_points %} +
+ {{ section.score }} = Total score ({{ section.non_negative_max|floatformat:"-2" }}) − Penalty points ({{ section.negative_points }}) +
+ {% endif %} 		+ {{ comparison.weighted_score|floatformat:0 }}% - {{ answer.score }}/{{ answer.max }} + +
+
+

+ {{ answer.score }} + out of + {{ answer.max }} +

+
+ +
+
+

+ {{ answer.score }} + out of + {{ answer.max }} +

+

score in 2023

+
+
+

+ + {% comment %} - {% endcomment %} + + + 1 marks + compare to 2023 +

+
+
+ {% comment %} TODO display this card block instead of the previous one if question was not measured in 2023 {% endcomment %} +
+
+ Not measured in 2023 +
+
+
+ 		+
+
+
+ {% widthratio answer.council_count council_count 100%}% +
+
+

+ {% comment %} {{ answer.council_count }} out of {{ council_count }} {% endcomment %} + + {% if answer.type == "negative" %} + {% include 'caps/includes/authority_type.html' with group=authority_type %} + councils got no penalty marks for this question. + {% else %} + {% include 'caps/includes/authority_type.html' with group=authority_type %} + councils with full mark per question for 2025 + {% endif %} + +

+
+ {{ comparison.score }}/{{ comparison.max }} - - {{ answer.council_count }} out of {{ council_count }} - - - {% include 'caps/includes/authority_type.html' with group=authority_type %} - {% if answer.type == "negative" %} - councils got no penalty marks for this question. - {% else %} - councils got full marks for this question. - {% endif %} - -
- Total score - - {{ plan_score.weighted_total|floatformat:0 }}% - - {{ comparison.weighted_total|floatformat:0 }}% -