Skip to content

Commit cbe7960

Browse files
lucascumsillelucascumsille
committed
[Scorecards] Splits council columns into two
This will allow us to display the current score of the year and the variation
1 parent e7cdfd7 commit cbe7960

1 file changed

Lines changed: 84 additions & 75 deletions

File tree

‎scoring/templates/scoring/council.html‎

Lines changed: 84 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -228,24 +228,26 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
228228

229229
<table class="table-question-council my-4">
230230
<thead class="position-sticky z-index-3 top-0">
231-
<tr class="bg-white">
232-
<th style="padding: 0 !important;"></th>
233-
<th style="padding: 0 !important;" colspan="2">
234-
<div class="bg-primary-100 text-primary text-start fw-normal fs-7 px-3 py-2 my-1 rounded">
235-
<p class="mb-0">&#11045; Comparison with Action Scorecards 2023</p>
236-
</div>
237-
</th>
238-
</tr>
239231
<tr class="text-bg-primary">
240232
<th scope="col" class="w-50 text-start question-header-cell border-end border-opacity-25 border-primary">Questions</th>
241-
<th scope="col" class="current-council-score">{{ council.name }}</th>
233+
<th scope="col" colspan="2" class="current-council-score border-end border-opacity-25 border-primary">{{ council.name }}</th>
242234
{% for comparison in comparisons %}
243-
<th scope="col" class="d-none d-md-table-cell comparison-council">{{ comparison.council.name }}</th>
235+
<th scope="col" colspan="2" class="d-none d-md-table-cell comparison-council">{{ comparison.council.name }}</th>
244236
{% endfor %}
245237
<th scope="col" class="d-none d-md-table-cell">
246238
Councils with full marks per question
247239
</th>
248240
</tr>
241+
<tr class="bg-primary-100">
242+
<th scope="col" class="py-2 px-3 border-start"></th>
243+
<th scope="col" class="fs-7 py-2 px-3">2025</th>
244+
<th scope="col" class="fs-7 py-2 px-3">2023 Variation</th>
245+
{% for comparison in comparisons %}
246+
<th scope="col" class="d-none d-md-table-cell comparison-council py-2 px-3">2025</th>
247+
<th scope="col" class="d-none d-md-table-cell comparison-council py-2 px-3">Variation 2023</th>
248+
{% endfor %}
249+
<th class="py-2 px-3 border-end"></th>
250+
</tr>
249251
</thead>
250252

251253
{% for section in sections %}
@@ -284,42 +286,47 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
284286
<td class="score border-bottom border-opacity-25 border-primary is--section-score">
285287
{% include 'caps/icons/scorecards-star.html' with classes='text-info align-text-bottom me-1' width='1.2em' height='1.2rem' role='presentation' %}
286288
<span>{{ section.weighted_score|floatformat:0 }}%</span>
287-
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
288-
<!-- TODO: Change text-success to text-danger if comparison is negative -->
289-
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
290-
<!-- TODO: Change text-success to text-dark if there is no comparison -->
291-
<!-- TODO: If there is no comparison then display '-' -->
292-
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">
293-
<span class="bg-green-600 text-light p-1 rounded">Vs</span>
294-
+5%
295-
</button>
296-
</td>
289+
</td>
290+
<td>
291+
{% comment %} TODO: Change bg-green-100 to bg-red-100 if comparison is negative {% endcomment %}
292+
{% comment %} TODO: Change text-success to text-danger if comparison is negative {% endcomment %}
293+
{% comment %} TODO: Change &#8593; to &#8595; if comparison is negative {% endcomment %}
294+
{% comment %} TODO: Change bg-green-100 to bg-gray-100 if there is no comparison {% endcomment %}
295+
{% comment %} TODO: Change text-success to text-dark if there is no comparison {% endcomment %}
296+
{% comment %} TODO: If there is no comparison then display '-' {% endcomment %}
297+
<span class="badge align-text-bottom bg-green-100 text-success">&#8593; 5%</span>
298+
</td>
297299
{% else %}
298300
<td class="score border-bottom border-opacity-25 border-primary is--section-score">
299301
<span>{{section.weighted_score|floatformat:0 }}%</span>
300-
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
301-
<!-- TODO: Change text-success to text-danger if comparison is negative -->
302-
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
303-
<!-- TODO: Change text-success to text-dark if there is no comparison -->
304-
<!-- TODO: If there is no comparison then display '-' -->
305-
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">&#11045; +5%</button>
302+
</td>
303+
<td class="border-end border-bottom border-opacity-25 border-primary">
304+
{% comment %} TODO: Change bg-green-100 to bg-red-100 if comparison is negative {% endcomment %}
305+
{% comment %} TODO: Change text-success to text-danger if comparison is negative {% endcomment %}
306+
{% comment %} TODO: Change &#8593; to &#8595; if comparison is negative {% endcomment %}
307+
{% comment %} TODO: Change bg-green-100 to bg-gray-100 if there is no comparison {% endcomment %}
308+
{% comment %} TODO: Change text-success to text-dark if there is no comparison {% endcomment %}
309+
{% comment %} TODO: If there is no comparison then display '-' {% endcomment %}
310+
<span class="badge align-text-bottom bg-green-100 text-success">&#8593; 5%</span>
306311
</td>
307312
{% endif %}
308313

309314
{% for comparison in section.comparisons %}
310315
<td class="d-none d-md-table-cell score border-bottom border-opacity-25 border-primary is--section-score {% if comparison.top_performer %}top-performer{% endif %}">
311316
{{ comparison.weighted_score|floatformat:0 }}%
312-
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
313-
<!-- TODO: Change text-success to text-danger if comparison is negative -->
314-
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
315-
<!-- TODO: Change text-success to text-dark if there is no comparison -->
316-
<!-- TODO: If there is no comparison then display '-' -->
317-
<!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
318-
<button button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">&#11045; +5%</button>
317+
</td>
318+
<td class="border-end border-bottom border-opacity-25 border-primary">
319+
{% comment %} TODO: Change bg-green-100 to bg-red-100 if comparison is negative {% endcomment %}
320+
{% comment %} TODO: Change text-success to text-danger if comparison is negative {% endcomment %}
321+
{% comment %} TODO: Change &#8593; to &#8595; if comparison is negative {% endcomment %}
322+
{% comment %} TODO: Change bg-green-100 to bg-gray-100 if there is no comparison {% endcomment %}
323+
{% comment %} TODO: Change text-success to text-dark if there is no comparison {% endcomment %}
324+
{% comment %} TODO: If there is no comparison then display '-' {% endcomment %}
325+
<span class="badge align-text-bottom bg-green-100 text-success">&#8593; 5%</span>
319326
</td>
320327
{% endfor %}
321328

322-
<td class="d-none d-md-table-cell top-tier-score border-end border-bottom border-opacity-25 border-primary"></td>
329+
<td class="d-none d-md-table-cell top-tier-score border-end border-bottom border-opacity-25 border-primary border-primary"></td>
323330

324331
<td class="button-wrapper p-0 bg-white d-none d-md-table-cell text-start">
325332
<button type="button" class="btn btn-outline-primary js-toggle-council-question-table-section border-start-0 rounded-0" aria-label="Expand this section" title="Expand this section">
@@ -335,36 +342,33 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
335342
</td>
336343

337344
<td data-column="score" class="score border-bottom">
338-
<div class="d-flex flex-row gap-3 justify-content-end align-items-center">
339-
<p class="mb-0">
340-
<span class="fs-5">{{ answer.score|format_mark }} <span class="fs-7">out of </span> {{ answer.max }}
341-
</span>
342-
</p>
343-
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
344-
<!-- TODO: Change text-success to text-danger if comparison is negative -->
345-
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
346-
<!-- TODO: Change text-success to text-dark if there is no comparison -->
347-
<!-- TODO: If there is no comparison then display '-' -->
348-
<!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
349-
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">&#11045; +1</button>
350-
</div>
345+
<span class="fs-5">{{ answer.score|format_mark }} <span class="fs-7">out of </span> {{ answer.max }}
346+
</span>
347+
</td>
348+
<td class="border-end border-bottom border-opacity-25">
349+
{% comment %} TODO: Change bg-green-100 to bg-red-100 if comparison is negative {% endcomment %}
350+
{% comment %} TODO: Change text-success to text-danger if comparison is negative {% endcomment %}
351+
{% comment %} TODO: Change &#8593; to &#8595; if comparison is negative {% endcomment %}
352+
{% comment %} TODO: Change bg-green-100 to bg-gray-100 if there is no comparison {% endcomment %}
353+
{% comment %} TODO: Change text-success to text-dark if there is no comparison {% endcomment %}
354+
{% comment %} TODO: If there is no comparison then display '-' {% endcomment %}
355+
{% comment %} TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark {% endcomment %}
356+
<span class="badge small align-text-bottom bg-green-100 text-success">&#8593; 1</span>
351357
</td>
352358

353359
{% for comparison in answer.comparisons %}
354360
<td data-column="score" class="d-none d-md-table-cell score border-bottom">
355-
<div class="d-flex flex-row gap-3 justify-content-end align-items-center">
356-
<p class="mb-0">
357-
<span class="fs-5">{{ comparison.score|format_mark }} <span class="fs-7">out of </span> {{ comparison.max }}
358-
</span>
359-
</p>
360-
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
361-
<!-- TODO: Change text-success to text-danger if comparison is negative -->
362-
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
363-
<!-- TODO: Change text-success to text-dark if there is no comparison -->
364-
<!-- TODO: If there is no comparison then display '-' -->
365-
<!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
366-
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">&#11045; +1</button>
367-
</div>
361+
<span class="fs-5">{{ comparison.score|format_mark }} <span class="fs-7">out of </span> {{ comparison.max }}
362+
</td>
363+
<td>
364+
{% comment %} TODO: Change bg-green-100 to bg-red-100 if comparison is negative {% endcomment %}
365+
{% comment %} TODO: Change text-success to text-danger if comparison is negative {% endcomment %}
366+
{% comment %} TODO: Change &#8593; to &#8595; if comparison is negative {% endcomment %}
367+
{% comment %} TODO: Change bg-green-100 to bg-gray-100 if there is no comparison {% endcomment %}
368+
{% comment %} TODO: Change text-success to text-dark if there is no comparison {% endcomment %}
369+
{% comment %} TODO: If there is no comparison then display '-' {% endcomment %}
370+
{% comment %} TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark {% endcomment %}
371+
<span class="badge small align-text-bottom bg-green-100 text-success">&#8593; 1</span>
368372
</td>
369373
{% endfor %}
370374

@@ -398,30 +402,35 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
398402
</td>
399403
<td class="score border-bottom border-opacity-25 border-primary is--section-score">
400404
{{ plan_score.weighted_total|floatformat:0 }}%
401-
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
402-
<!-- TODO: Change text-success to text-danger if comparison is negative -->
403-
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
404-
<!-- TODO: Change text-success to text-dark if there is no comparison -->
405-
<!-- TODO: If there is no comparison then display '-' -->
405+
406406
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">&#11045; +5%</button>
407407
</td>
408+
<td>
409+
{% comment %} TODO: Change bg-green-100 to bg-red-100 if comparison is negative {% endcomment %}
410+
{% comment %} TODO: Change text-success to text-danger if comparison is negative {% endcomment %}
411+
{% comment %} TODO: Change &#8593; to &#8595; if comparison is negative {% endcomment %}
412+
{% comment %} TODO: Change bg-green-100 to bg-gray-100 if there is no comparison {% endcomment %}
413+
{% comment %} TODO: Change text-success to text-dark if there is no comparison {% endcomment %}
414+
{% comment %} TODO: If there is no comparison then display '-' {% endcomment %}
415+
<span class="badge align-text-bottom bg-green-100 text-success">&#8593; 5%</span>
416+
</td>
408417

409418
{% for comparison in comparisons %}
410419
<td class="d-none d-md-table-cell score border-bottom border-opacity-25 border-primary is--section-score">
411420
{{ comparison.weighted_total|floatformat:0 }}%
412-
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
413-
<!-- TODO: Change text-success to text-danger if comparison is negative -->
414-
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
415-
<!-- TODO: Change text-success to text-dark if there is no comparison -->
416-
<!-- TODO: If there is no comparison then display '-' -->
417-
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">
418-
<span class="bg-green-600 text-light p-1 rounded">Vs</span>
419-
+5%
420-
</button>
421+
</td>
422+
<td>
423+
{% comment %} TODO: Change bg-green-100 to bg-red-100 if comparison is negative {% endcomment %}
424+
{% comment %} TODO: Change text-success to text-danger if comparison is negative {% endcomment %}
425+
{% comment %} TODO: Change &#8593; to &#8595; if comparison is negative {% endcomment %}
426+
{% comment %} TODO: Change bg-green-100 to bg-gray-100 if there is no comparison {% endcomment %}
427+
{% comment %} TODO: Change text-success to text-dark if there is no comparison {% endcomment %}
428+
{% comment %} TODO: If there is no comparison then display '-' {% endcomment %}
429+
<span class="badge align-text-bottom bg-green-100 text-success">&#8593; 5%</span>
421430
</td>
422431
{% endfor %}
423432

424-
<td class="d-none d-md-table-cell top-tier-score border-end border-bottom border-opacity-25 border-primary"></td>
433+
<td class="d-none d-md-table-cell top-tier-score border-end border-bottom border-opacity-25 border-primary border-primary"></td>
425434
<td class="button-wrapper p-0 bg-white d-none d-md-table-cell"></td>
426435
</tr>
427436
</tbody>

0 commit comments

Comments
 (0)