Add breadcrumbs and UI consistency updates across backoffice templates

templates/backoffice/quiz/tab_candidates.html.twig

@@ -17,7 +17,7 @@
         {% endif %}
     </div>
 
-    <h3 class="mb-0">{{ currentIndex + 1 }}. {{ question }}</h3>
+    <h4 class="mb-0">{{ currentIndex + 1 }}. {{ question }}</h4>
 
     <div>
         {% if currentIndex is not null and currentIndex < (questions|length - 1) %}
@@ -31,12 +31,12 @@
 </div>
 
 <form method="post">
-    <table class="table table-hover table-striped">
+    <table class="table table-hover table-striped mb-3">
         <thead>
             <tr>
                 <th scope="col">{{ 'Candidate'|trans }}</th>
                 {% for answer in question.answers %}
-                    <th>{{ answer }}</th>
+                    <th scope="col">{{ answer }}</th>
                 {% endfor %}
             </tr>
         </thead>

templates/backoffice/quiz/tab_overview.html.twig

@@ -1,5 +1,5 @@
-<h4 class="py-2">Quick actions</h4>
-<div class="py-2 btn-group" data-controller="bo--quiz">
+<h4 class="mb-3">Quick actions</h4>
+<div class="mb-3 btn-group" data-controller="bo--quiz">
 
     {% if quiz is same as (season.activeQuiz) %}
         <a class="btn btn-secondary"
@@ -16,8 +16,7 @@
     </button>
 </div>
 
-<div id="questions">
-    <h4 class="py-2">{{ 'Questions'|trans }}</h4>
+<h4 class="mb-3">{{ 'Questions'|trans }}</h4>
     <div class="accordion">
         {%~ for question in quiz.questions ~%}
             <div class="accordion-item">
@@ -27,12 +26,8 @@
                             data-bs-toggle="collapse"
                             data-bs-target="#question-{{ loop.index0 }}"
                             aria-controls="question-{{ loop.index0 }}">
-                        {% set questionErrors = question.getErrors %}
-                        {%~ if questionErrors -%}
-                            <span data-bs-toggle="tooltip"
-                                  title="{{ questionErrors }}"
-                                  class="badge text-bg-danger rounded-pill me-2">!</span>
-                        {% endif %}
+                        {% set questionError = questionErrors[question.id.toString] ?? null %}
+                        <span class="badge rounded-pill me-2{% if questionError %} text-bg-danger{% else %} invisible{% endif %}"{% if questionError %} data-bs-toggle="tooltip" title="{{ questionError }}"{% endif %}>!</span>
                         {{~ loop.index -}}. {{ question.question -}}
                     </button>
                 </h2>
@@ -60,7 +55,6 @@
             {{ 'EMPTY'|trans }}
         {% endfor %}
     </div>
-</div>
 
 {# Modal Clear #}
 <div class="modal fade" id="clearQuizModal" data-bs-backdrop="static"

templates/backoffice/quiz/tab_result.html.twig

@@ -1,7 +1,6 @@
-<div class="scores">
-    <h4 class="py-2">{{ 'Score'|trans }}</h4>
-    <div class="btn-toolbar" role="toolbar">
-        <div class="btn-group btn-group-lg me-2">
+<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> #}
             <a href="{{ path('tvdt_prepare_elimination', {seasonCode: season.seasonCode, quiz: quiz.id}) }}"
                class="btn btn-secondary">{{ 'Prepare Custom Elimination'|trans }}</a>
@@ -18,8 +17,8 @@
             {% endif %}
         </div>
     </div>
-    <p>{{ 'Number of dropouts:'|trans }}  {{ quiz.dropouts }} </p>
-    <table class="table table-hover">
+    <p class="mb-3">{{ 'Number of dropouts:'|trans }}  {{ quiz.dropouts }} </p>
+    <table class="table table-hover mb-3">
         <thead>
         <tr>
             <th scope="col">{{ 'Candidate'|trans }}</th>
@@ -75,4 +74,3 @@
         {% endfor %}
         </tbody>
     </table>
-</div>