Added variation placeholders

mysociety · Jan 22, 2025 · 0e4d660 · 0e4d660
1 parent 53b1bae
commit 0e4d660
Showing 1 changed file with 39 additions and 1 deletion.
diff --git a/scoring/templates/scoring/council.html b/scoring/templates/scoring/council.html
@@ -276,10 +276,24 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                 <td class="score border-bottom border-opacity-25 border-primary is--section-score">
                     {% include 'caps/icons/scorecards-star.html' with classes='text-info align-text-bottom me-1' width='1.2em' height='1.2rem' role='presentation' %}
                     <span>{{ section.weighted_score|floatformat:0 }}%</span>
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
+                    <!-- TODO: Change text-success to text-danger if variation is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
+                    <!-- TODO: Change text-success to text-dark if there is no variation -->
+                    <!-- TODO: If there is no variation then display '-' -->
+                    <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
+                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+5%</p>
                 </td>
               {% else %}
                 <td class="score border-bottom border-opacity-25 border-primary is--section-score">
-                  <span>{{section.weighted_score|floatformat:0 }}%</span>
+                    <span>{{section.weighted_score|floatformat:0 }}%</span>
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
+                    <!-- TODO: Change text-success to text-danger if variation is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
+                    <!-- TODO: Change text-success to text-dark if there is no variation -->
+                    <!-- TODO: If there is no variation then display '-' -->
+                    <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
+                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+5%</p>
                     {% if section.has_negative_points %}
                     <div class="fs-7 mt-2">
                         {{ section.score }} &equals; Total score ({{ section.non_negative_max|floatformat:"-2" }}) &minus; Penalty points ({{ section.negative_points }})
@@ -291,6 +305,14 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
               {% for comparison in section.comparisons %}
                 <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 %}">
                     {{ comparison.weighted_score|floatformat:0 }}%
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
+                    <!-- TODO: Change text-success to text-danger if variation is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
+                    <!-- TODO: Change text-success to text-dark if there is no variation -->
+                    <!-- TODO: If there is no variation then display '-' -->
+                    <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+                    <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
+                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">(+1)</p>
                 </td>
               {% endfor %}
 
@@ -311,11 +333,27 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
 
                 <td data-column="score" class="score border-bottom">
                     <span>{{ answer.score|format_mark }}/{{ answer.max }}</span>
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
+                    <!-- TODO: Change text-success to text-danger if variation is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
+                    <!-- TODO: Change text-success to text-dark if there is no variation -->
+                    <!-- TODO: If there is no variation then display '-' -->
+                    <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+                    <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
+                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">+1</p>
                 </td>
 
               {% for comparison in answer.comparisons %}
                 <td data-column="score" class="d-none d-md-table-cell score border-bottom">
                     <span>{{ comparison.score|format_mark }}/{{ comparison.max }}</span>
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
+                    <!-- TODO: Change text-success to text-danger if variation is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
+                    <!-- TODO: Change text-success to text-dark if there is no variation -->
+                    <!-- TODO: If there is no variation then display '-' -->
+                    <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+                    <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
+                    <p class="badge small ms-1 mb-0 align-text-bottom bg-green-100 text-success">(+1)</p>
                 </td>
               {% endfor %}