Marijn/TijdVoorDeTest
1
0
Fork 0
mirror of https://github.com/MarijnDoeve/TijdVoorDeTest.git synced 2026-07-05 07:00:14 +02:00
Code Issues Packages Projects Releases Activity

Clean up templates and CSS

Browse Source 
- 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
This commit is contained in:
Marijn Doeve
2026-07-01 18:32:57 +02:00
parent cd63ef339f
commit d8b671046b
5 changed files with 69 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/backoffice.scss
+3
View File
@@ -0,0 +1,3 @@
.col-result-xs { width: 10%; }
.col-result-sm { width: 15%; }
.col-result-md { width: 20%; }
assets/styles/quiz.scss
+9 -6
View File
@@ -1,14 +1,17 @@
html, body { html {
height: 100%; height: 100%;
}
body {
min-height: 100%;
background-image: url("../img/background.png"); background-image: url("../img/background.png");
background-position: center center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: black; background-color: black;
color: white; color: white;
display: flex;
display: grid; flex-direction: column;
align-items: center; justify-content: center;
justify-self: center;
} }
.elimination-screen { .elimination-screen {
templates/backoffice/quiz/tab_overview.html.twig
+38 -48
View File
@@ -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"> <div data-controller="bo--quiz">
<h4 class="mb-3">{{ 'Quick actions'|trans }}</h4> <h4 class="mb-3">{{ 'Quick actions'|trans }}</h4>
<div class="mb-3 btn-group"> <div class="mb-3 btn-group">
@@ -66,53 +90,19 @@
{% endfor %} {% endfor %}
</div> </div>
{# Modal Clear #} {{ _self.confirm_modal(
<div class="modal fade" id="clearQuizModal" data-bs-backdrop="static" 'clearQuizModal',
tabindex="-1" 'clearModal',
data-bo--quiz-target="clearModal" 'Are you sure you want to clear all the results? This will also delete all the eliminations.'|trans,
aria-labelledby="staticBackdropLabel" aria-hidden="true"> path('tvdt_backoffice_quiz_clear', {quiz: quiz.id}),
<div class="modal-dialog"> csrf_token('clear_quiz'),
<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>
{# Modal Delete #} {{ _self.confirm_modal(
<div class="modal fade" id="deleteQuizModal" data-bs-backdrop="static" 'deleteQuizModal',
tabindex="-1" 'deleteModal',
data-bo--quiz-target="deleteModal" 'Are you sure you want to delete this quiz?'|trans,
aria-labelledby="staticBackdropLabel" aria-hidden="true"> path('tvdt_backoffice_quiz_delete', {quiz: quiz.id}),
<div class="modal-dialog"> csrf_token('delete_quiz'),
<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>
</div> </div>
templates/backoffice/quiz/tab_result.html.twig
+8 -17
View File
@@ -1,7 +1,6 @@
<h4 class="mb-3">{{ 'Score'|trans }}</h4> <h4 class="mb-3">{{ 'Score'|trans }}</h4>
<div class="btn-toolbar mb-3" role="toolbar"> <div class="btn-toolbar mb-3" role="toolbar">
<div class="btn-group me-2"> <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"> <form action="{{ path('tvdt_prepare_elimination', {seasonCode: season.seasonCode, quiz: quiz.id}) }}" method="POST">
<input type="hidden" name="_token" value="{{ csrf_token('prepare_elimination') }}"> <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> <button type="submit" class="btn btn-secondary rounded-0 rounded-start">{{ 'Prepare Custom Elimination'|trans }}</button>
@@ -20,15 +19,15 @@
</div> </div>
</div> </div>
<p class="mb-3">{{ 'Number of dropouts:'|trans }} {{ quiz.dropouts }} </p> <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> <thead>
<tr> <tr>
<th scope="col">{{ 'Candidate'|trans }}</th> <th scope="col">{{ 'Candidate'|trans }}</th>
<th style="width: 15%" scope="col">{{ 'Correct Answers'|trans }}</th> <th class="col-result-sm" scope="col">{{ 'Correct Answers'|trans }}</th>
<th style="width: 20%" scope="col">{{ 'Corrections'|trans }}</th> <th class="col-result-md" scope="col">{{ 'Corrections'|trans }}</th>
<th style="width: 20%" scope="col">{{ 'Penalty'|trans }}</th> <th class="col-result-md" scope="col">{{ 'Penalty'|trans }}</th>
<th style="width: 10%" scope="col">{{ 'Score'|trans }}</th> <th class="col-result-xs" scope="col">{{ 'Score'|trans }}</th>
<th style="width: 20%" scope="col">{{ 'Time'|trans }}</th> <th class="col-result-md" scope="col">{{ 'Time'|trans }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -40,32 +39,24 @@
<form method="post" <form method="post"
action="{{ path('tvdt_backoffice_modify_correction', {quiz: quiz.id, candidate: candidate.id}) }}"> action="{{ path('tvdt_backoffice_modify_correction', {quiz: quiz.id, candidate: candidate.id}) }}">
<input type="hidden" name="_token" value="{{ csrf_token('candidate_correction') }}"> <input type="hidden" name="_token" value="{{ csrf_token('candidate_correction') }}">
<div class="row"> <div class="d-flex gap-1">
<div class="col-8">
<input class="form-control form-control-sm" type="number" <input class="form-control form-control-sm" type="number"
value="{{ candidate.corrections }}" step="0.5" value="{{ candidate.corrections }}" step="0.5"
name="corrections"> name="corrections">
</div>
<div class="col-2">
<button class="btn btn-sm btn-primary" type="submit">{{ 'Save'|trans }}</button> <button class="btn btn-sm btn-primary" type="submit">{{ 'Save'|trans }}</button>
</div> </div>
</div>
</form> </form>
</td> </td>
<td> <td>
<form method="post" <form method="post"
action="{{ path('tvdt_backoffice_modify_penalty', {quiz: quiz.id, candidate: candidate.id}) }}"> action="{{ path('tvdt_backoffice_modify_penalty', {quiz: quiz.id, candidate: candidate.id}) }}">
<input type="hidden" name="_token" value="{{ csrf_token('candidate_penalty') }}"> <input type="hidden" name="_token" value="{{ csrf_token('candidate_penalty') }}">
<div class="row"> <div class="d-flex gap-1">
<div class="col-8">
<input class="form-control form-control-sm" type="number" <input class="form-control form-control-sm" type="number"
value="{{ candidate.penaltySeconds }}" step="1" value="{{ candidate.penaltySeconds }}" step="1"
name="penalty"> name="penalty">
</div>
<div class="col-2">
<button class="btn btn-sm btn-primary" type="submit">{{ 'Save'|trans }}</button> <button class="btn btn-sm btn-primary" type="submit">{{ 'Save'|trans }}</button>
</div> </div>
</div>
</form> </form>
</td> </td>
<td>{{ candidate.score|default('x') }}</td> <td>{{ candidate.score|default('x') }}</td>
templates/backoffice/season.html.twig
+3 -4
View File
@@ -14,7 +14,7 @@
<h2 class="mb-3">{{ 'Season'|trans }}: {{ season.name }}</h2> <h2 class="mb-3">{{ 'Season'|trans }}: {{ season.name }}</h2>
<div class="row"> <div class="row">
<div class="col-md-6 col-12"> <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> <h4 class="mb-0 pe-2">{{ 'Quizzes'|trans }}</h4>
<a class="link" <a class="link"
href="{{ path('tvdt_backoffice_quiz_add', {seasonCode: season.seasonCode}) }}">{{ 'Add'|trans }}</a> href="{{ path('tvdt_backoffice_quiz_add', {seasonCode: season.seasonCode}) }}">{{ 'Add'|trans }}</a>
@@ -29,7 +29,7 @@
</div> </div>
</div> </div>
<div class="col-md-3 col-12"> <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> <h4 class="mb-0 pe-2">{{ 'Candidates'|trans }}</h4>
<a class="link" <a class="link"
href="{{ path('tvdt_backoffice_add_candidates', {seasonCode: season.seasonCode}) }}">{{ 'Add Candidate'|trans }} href="{{ path('tvdt_backoffice_add_candidates', {seasonCode: season.seasonCode}) }}">{{ 'Add Candidate'|trans }}
@@ -40,11 +40,10 @@
<li>{{ candidate.name }}</li>{% endfor %} <li>{{ candidate.name }}</li>{% endfor %}
</ul> </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> <h4 class="mb-0 pe-2">{{ 'Settings'|trans }}</h4>
</div> </div>
{{ form(form) }} {{ form(form) }}
</div> </div>
<div class="col-12 col-md-3"></div>
</div> </div>
{% endblock body %} {% endblock body %}