From d8b671046b0e6ea1ca4ec00f20e06c831ca36f10 Mon Sep 17 00:00:00 2001
From: Marijn Doeve <marijn@doeve.me>
Date: Wed, 1 Jul 2026 18:32:57 +0200
Subject: [PATCH] Clean up templates and CSS

- season.html.twig: remove dead empty column, drop redundant flex-row
- tab_overview.html.twig: extract Twig macro for confirm modals, fix duplicate aria-labelledby IDs
- tab_result.html.twig: remove dead comment, replace inline widths with CSS classes, simplify nested row/col forms to d-flex gap-1
- backoffice.scss: add col-result-xs/sm/md column width classes
- quiz.scss: replace broken display:grid + justify-self:center with flexbox centering
---
 assets/styles/backoffice.scss                 |  3 +
 assets/styles/quiz.scss                       | 15 ++--
 .../backoffice/quiz/tab_overview.html.twig    | 86 ++++++++-----------
 .../backoffice/quiz/tab_result.html.twig      | 41 ++++-----
 templates/backoffice/season.html.twig         |  7 +-
 5 files changed, 69 insertions(+), 83 deletions(-)

diff --git a/assets/styles/backoffice.scss b/assets/styles/backoffice.scss
index e69de29..4ab8c9f 100644
--- a/assets/styles/backoffice.scss
+++ b/assets/styles/backoffice.scss
@@ -0,0 +1,3 @@
+.col-result-xs { width: 10%; }
+.col-result-sm { width: 15%; }
+.col-result-md { width: 20%; }
diff --git a/assets/styles/quiz.scss b/assets/styles/quiz.scss
index 4fb76ee..14a112f 100644
--- a/assets/styles/quiz.scss
+++ b/assets/styles/quiz.scss
@@ -1,14 +1,17 @@
-html, body {
+html {
     height: 100%;
+}
+
+body {
+    min-height: 100%;
     background-image: url("../img/background.png");
-    background-position: center center;
+    background-position: center;
     background-repeat: no-repeat;
     background-color: black;
     color: white;
-
-    display: grid;
-    align-items: center;
-    justify-self: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .elimination-screen {
diff --git a/templates/backoffice/quiz/tab_overview.html.twig b/templates/backoffice/quiz/tab_overview.html.twig
index 3ab04c2..6db7316 100644
--- a/templates/backoffice/quiz/tab_overview.html.twig
+++ b/templates/backoffice/quiz/tab_overview.html.twig
@@ -1,3 +1,27 @@
+{% macro confirm_modal(id, target, body, formAction, csrfToken) %}
+    <div class="modal fade" id="{{ id }}" data-bs-backdrop="static"
+         tabindex="-1"
+         data-bo--quiz-target="{{ target }}"
+         aria-labelledby="{{ id }}Label" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="{{ id }}Label">{{ 'Please Confirm'|trans }}</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">{{ body }}</div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'No'|trans }}</button>
+                    <form action="{{ formAction }}" method="POST">
+                        <input type="hidden" name="_token" value="{{ csrfToken }}">
+                        <button type="submit" class="btn btn-danger">{{ 'Yes'|trans }}</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endmacro %}
+
 <div data-controller="bo--quiz">
     <h4 class="mb-3">{{ 'Quick actions'|trans }}</h4>
     <div class="mb-3 btn-group">
@@ -66,53 +90,19 @@
         {% endfor %}
     </div>
 
-    {# Modal Clear #}
-    <div class="modal fade" id="clearQuizModal" data-bs-backdrop="static"
-         tabindex="-1"
-         data-bo--quiz-target="clearModal"
-         aria-labelledby="staticBackdropLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ 'Please Confirm'|trans }}</h1>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    {{ 'Are you sure you want to clear all the results? This will also delete all the eliminations.'|trans }}
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'No'|trans }}</button>
-                    <form action="{{ path('tvdt_backoffice_quiz_clear', {quiz: quiz.id}) }}" method="POST">
-                        <input type="hidden" name="_token" value="{{ csrf_token('clear_quiz') }}">
-                        <button type="submit" class="btn btn-danger">{{ 'Yes'|trans }}</button>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
+    {{ _self.confirm_modal(
+        'clearQuizModal',
+        'clearModal',
+        'Are you sure you want to clear all the results? This will also delete all the eliminations.'|trans,
+        path('tvdt_backoffice_quiz_clear', {quiz: quiz.id}),
+        csrf_token('clear_quiz'),
+    ) }}
 
-    {# Modal Delete #}
-    <div class="modal fade" id="deleteQuizModal" data-bs-backdrop="static"
-         tabindex="-1"
-         data-bo--quiz-target="deleteModal"
-         aria-labelledby="staticBackdropLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ 'Please Confirm'|trans }}</h1>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    {{ 'Are you sure you want to delete this quiz?'|trans }}
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'No'|trans }}</button>
-                    <form action="{{ path('tvdt_backoffice_quiz_delete', {quiz: quiz.id}) }}" method="POST">
-                        <input type="hidden" name="_token" value="{{ csrf_token('delete_quiz') }}">
-                        <button type="submit" class="btn btn-danger">{{ 'Yes'|trans }}</button>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
+    {{ _self.confirm_modal(
+        'deleteQuizModal',
+        'deleteModal',
+        'Are you sure you want to delete this quiz?'|trans,
+        path('tvdt_backoffice_quiz_delete', {quiz: quiz.id}),
+        csrf_token('delete_quiz'),
+    ) }}
 </div>
diff --git a/templates/backoffice/quiz/tab_result.html.twig b/templates/backoffice/quiz/tab_result.html.twig
index d1c9101..cef5e6e 100644
--- a/templates/backoffice/quiz/tab_result.html.twig
+++ b/templates/backoffice/quiz/tab_result.html.twig
@@ -1,7 +1,6 @@
 <h4 class="mb-3">{{ 'Score'|trans }}</h4>
 <div class="btn-toolbar mb-3" role="toolbar">
     <div class="btn-group me-2">
-        {# <a class="btn btn-primary">{{ 'Start Elimination'|trans }}</a> #}
         <form action="{{ path('tvdt_prepare_elimination', {seasonCode: season.seasonCode, quiz: quiz.id}) }}" method="POST">
             <input type="hidden" name="_token" value="{{ csrf_token('prepare_elimination') }}">
             <button type="submit" class="btn btn-secondary rounded-0 rounded-start">{{ 'Prepare Custom Elimination'|trans }}</button>
@@ -20,15 +19,15 @@
     </div>
 </div>
 <p class="mb-3">{{ 'Number of dropouts:'|trans }}  {{ quiz.dropouts }} </p>
-<table class="table table-hover mb-3">
+<table class="table table-hover table-result mb-3">
     <thead>
     <tr>
         <th scope="col">{{ 'Candidate'|trans }}</th>
-        <th style="width: 15%" scope="col">{{ 'Correct Answers'|trans }}</th>
-        <th style="width: 20%" scope="col">{{ 'Corrections'|trans }}</th>
-        <th style="width: 20%" scope="col">{{ 'Penalty'|trans }}</th>
-        <th style="width: 10%" scope="col">{{ 'Score'|trans }}</th>
-        <th style="width: 20%" scope="col">{{ 'Time'|trans }}</th>
+        <th class="col-result-sm" scope="col">{{ 'Correct Answers'|trans }}</th>
+        <th class="col-result-md" scope="col">{{ 'Corrections'|trans }}</th>
+        <th class="col-result-md" scope="col">{{ 'Penalty'|trans }}</th>
+        <th class="col-result-xs" scope="col">{{ 'Score'|trans }}</th>
+        <th class="col-result-md" scope="col">{{ 'Time'|trans }}</th>
     </tr>
     </thead>
     <tbody>
@@ -40,15 +39,11 @@
                 <form method="post"
                       action="{{ path('tvdt_backoffice_modify_correction', {quiz: quiz.id, candidate: candidate.id}) }}">
                     <input type="hidden" name="_token" value="{{ csrf_token('candidate_correction') }}">
-                    <div class="row">
-                        <div class="col-8">
-                            <input class="form-control form-control-sm" type="number"
-                                   value="{{ candidate.corrections }}" step="0.5"
-                                   name="corrections">
-                        </div>
-                        <div class="col-2">
-                            <button class="btn btn-sm btn-primary" type="submit">{{ 'Save'|trans }}</button>
-                        </div>
+                    <div class="d-flex gap-1">
+                        <input class="form-control form-control-sm" type="number"
+                               value="{{ candidate.corrections }}" step="0.5"
+                               name="corrections">
+                        <button class="btn btn-sm btn-primary" type="submit">{{ 'Save'|trans }}</button>
                     </div>
                 </form>
             </td>
@@ -56,15 +51,11 @@
                 <form method="post"
                       action="{{ path('tvdt_backoffice_modify_penalty', {quiz: quiz.id, candidate: candidate.id}) }}">
                     <input type="hidden" name="_token" value="{{ csrf_token('candidate_penalty') }}">
-                    <div class="row">
-                        <div class="col-8">
-                            <input class="form-control form-control-sm" type="number"
-                                   value="{{ candidate.penaltySeconds }}" step="1"
-                                   name="penalty">
-                        </div>
-                        <div class="col-2">
-                            <button class="btn btn-sm btn-primary" type="submit">{{ 'Save'|trans }}</button>
-                        </div>
+                    <div class="d-flex gap-1">
+                        <input class="form-control form-control-sm" type="number"
+                               value="{{ candidate.penaltySeconds }}" step="1"
+                               name="penalty">
+                        <button class="btn btn-sm btn-primary" type="submit">{{ 'Save'|trans }}</button>
                     </div>
                 </form>
             </td>
diff --git a/templates/backoffice/season.html.twig b/templates/backoffice/season.html.twig
index 9b5d88f..166931d 100644
--- a/templates/backoffice/season.html.twig
+++ b/templates/backoffice/season.html.twig
@@ -14,7 +14,7 @@
     <h2 class="mb-3">{{ 'Season'|trans }}: {{ season.name }}</h2>
     <div class="row">
         <div class="col-md-6 col-12">
-            <div class="d-flex flex-row align-items-center mb-3">
+            <div class="d-flex align-items-center mb-3">
                 <h4 class="mb-0 pe-2">{{ 'Quizzes'|trans }}</h4>
                 <a class="link"
                    href="{{ path('tvdt_backoffice_quiz_add', {seasonCode: season.seasonCode}) }}">{{ 'Add'|trans }}</a>
@@ -29,7 +29,7 @@
             </div>
         </div>
         <div class="col-md-3 col-12">
-            <div class="d-flex flex-row align-items-center mb-3">
+            <div class="d-flex align-items-center mb-3">
                 <h4 class="mb-0 pe-2">{{ 'Candidates'|trans }}</h4>
                 <a class="link"
                    href="{{ path('tvdt_backoffice_add_candidates', {seasonCode: season.seasonCode}) }}">{{ 'Add Candidate'|trans }}
@@ -40,11 +40,10 @@
                     <li>{{ candidate.name }}</li>{% endfor %}
             </ul>
 
-            <div class="d-flex flex-row align-items-center mb-3">
+            <div class="d-flex align-items-center mb-3">
                 <h4 class="mb-0 pe-2">{{ 'Settings'|trans }}</h4>
             </div>
             {{ form(form) }}
         </div>
-        <div class="col-12 col-md-3"></div>
     </div>
 {% endblock body %}