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

Add breadcrumbs and UI consistency updates across backoffice templates

Browse Source
This commit is contained in:
Marijn Doeve
2026-03-09 22:37:24 +01:00
parent 45f11f3564
commit b6a227febe
19 changed files with 298 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/backoffice/base.html.twig
+11
View File
@@ -2,3 +2,14 @@
{% block importmap %}{{ importmap('backoffice') }}{% endblock %}
{% block title %}Tijd voor de test | {% endblock %}
{% block nav %}{{ include('backoffice/nav.html.twig') }}{% endblock %}
{% block main %}
<div class="container">
<div class="mt-3">
{% block breadcrumbs %}{% endblock %}
</div>
{{ include('flashes.html.twig') }}
{% block body %}
{% endblock body %}
</div>
{% endblock %}
templates/backoffice/index.html.twig
+11 -3
View File
@@ -2,9 +2,17 @@
{% block title %}{{ parent() }}Backoffice{% endblock %}
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">{{ 'Home'|trans }}</li>
</ol>
</nav>
{% endblock %}
{% block body %}
<div class="d-flex flex-row align-items-center">
<h2 class="py-2 pe-2">
<div class="d-flex flex-row align-items-center mb-3">
<h2 class="mb-0 pe-2">
{{ is_granted('ROLE_ADMIN') ? 'All Seasons'|trans : 'Your Seasons'|trans }}
</h2>
<a class="link" href="{{ path('tvdt_backoffice_season_add') }}">
@@ -12,7 +20,7 @@
</a>
</div>
{% if seasons %}
<table class="table table-hover">
<table class="table table-hover mb-3">
<thead>
<tr>
{% if is_granted('ROLE_ADMIN') %}
templates/backoffice/prepare_elimination/index.html.twig
+14 -17
View File
@@ -1,20 +1,17 @@
{% extends 'backoffice/base.html.twig' %}
{% block body %}
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_index') }}">Home</a></li>
<li class="breadcrumb-item"><a
href="{{ path('tvdt_backoffice_season', {seasonCode: elimination.quiz.season.seasonCode}) }}">{{ elimination.quiz.season.name }}</a>
</li>
<li class="breadcrumb-item"><a
href="{{ path('tvdt_backoffice_quiz', {seasonCode: elimination.quiz.season.seasonCode, quiz: elimination.quiz.id}) }}">{{ elimination.quiz.name }}</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Prepare Elimination</li>
</ol>
</nav>
</div>
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_index') }}">{{ 'Home'|trans }}</a></li>
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_season', {seasonCode: elimination.quiz.season.seasonCode}) }}">{{ elimination.quiz.season.name }}</a></li>
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_quiz', {seasonCode: elimination.quiz.season.seasonCode, quiz: elimination.quiz.id}) }}">{{ elimination.quiz.name }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ 'Prepare Elimination'|trans }}</li>
</ol>
</nav>
{% endblock %}
{% block body %}
<div class="row">
<div class="col-12 col-md-6">
<form method="post">
@@ -32,7 +29,7 @@
</div>
</div>
{% endfor %}
<div class="btn-group py-2">
<div class="btn-group mb-3">
<button type="submit" class="btn btn-primary" name="start" value="0">{{ 'Save'|trans }}</button>
<button type="submit" class="btn btn-success" name="start"
value="1">{{ 'Save and start elimination'|trans }}</button>
@@ -42,7 +39,7 @@
</form>
</div>
<div class="col-12 col-md-6">
<p>Hier kan dus weer wat uitleg komen</p>
<p class="mb-3">{{ 'Help text for preparing elimination'|trans }}</p>
</div>
</div>
{% endblock %}
templates/backoffice/quiz.html.twig
+12 -2
View File
@@ -2,6 +2,16 @@
{% block title %}{{ parent() }}{{ season.name }}{% endblock %}
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_index') }}">{{ 'Home'|trans }}</a></li>
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_season', {seasonCode: season.seasonCode}) }}">{{ season.name }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ quiz.name }}</li>
</ol>
</nav>
{% endblock %}
{% block body %}
{% set tabs = [
{id: 'overview', label: 'Overview'|trans, route: 'tvdt_backoffice_quiz_overview'},
@@ -9,8 +19,8 @@
{id: 'candidates', label: 'Candidates'|trans, route: 'tvdt_backoffice_quiz_candidates'},
] %}
<h2 class="py-2">{{ 'Quiz'|trans }}: {{ season.name }} - {{ quiz.name }}</h2>
<ul class="nav nav-tabs pt-2">
<h2 class="mb-3">{{ 'Quiz'|trans }}: {{ season.name }} - {{ quiz.name }}</h2>
<ul class="nav nav-tabs mb-3">
{% for tab in tabs %}
<li class="nav-item">
<a class="nav-link{{ activeTab == tab.id ? ' active' }}" href="{{ path(tab.route, {seasonCode: season.seasonCode, quiz: quiz.id}) }}">
templates/backoffice/quiz/tab_candidates.html.twig
+3 -3
View File
@@ -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
+5 -11
View File
@@ -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
+5 -7
View File
@@ -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>
templates/backoffice/quiz_add.html.twig
+13 -5
View File
@@ -1,9 +1,19 @@
{% extends 'backoffice/base.html.twig' %}
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_index') }}">{{ 'Home'|trans }}</a></li>
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_season', {seasonCode: season.seasonCode}) }}">{{ season.name }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ 'Add Quiz'|trans }}</li>
</ol>
</nav>
{% endblock %}
{% block body %}
<div class="row">
<div class="col-md-6 col-12">
<h2 class="py-2">{{ t('Add a quiz to %name%', {'%name%': season.name})|trans }} </h2>
<h2 class="mb-3">{{ t('Add a quiz to %name%', {'%name%': season.name})|trans }} </h2>
{{ form_start(form) }}
{{ form_row(form.name) }}
{{ form_row(form.sheet) }}
@@ -11,13 +21,11 @@
{{ form_end(form) }}
</div>
<div class="col-md-6 col-12">
<p class="pt-5">
Hier kan nog tekst komen met wat uitleg
<p class="mb-3">
{{ 'Help text for adding a quiz'|trans }}
</p>
</div>
</div>
{% endblock %}
{% block title %}
templates/backoffice/season.html.twig
+20 -10
View File
@@ -1,37 +1,47 @@
{% extends 'backoffice/base.html.twig' %}
{% block title %}{{ parent() }}{{ season.name }}{% endblock %}
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_index') }}">{{ 'Home'|trans }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ season.name }}</li>
</ol>
</nav>
{% endblock %}
{% block body %}
<h2 class="py-2">{{ 'Season'|trans }}: {{ season.name }}</h2>
<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">
<h4 class="py-2 pe-2">{{ 'Quizzes'|trans }}</h4>
<div class="d-flex flex-row 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>
</div>
<div class="list-group">
<div class="list-group mb-3">
{% for quiz in season.quizzes %}
<a class="list-group-item list-group-item-action{% if season.activeQuiz == quiz %} active{% endif %}"
href="{{ path('tvdt_backoffice_quiz', {seasonCode: season.seasonCode, quiz: quiz.id}) }}">{{ quiz.name }}</a>
{% else %}
No quizzes
{{ 'No quizzes'|trans }}
{% endfor %}
</div>
</div>
<div class="col-md-3 col-12">
<div class="d-flex flex-row align-items-center">
<h4 class="py-2 pe-2">{{ 'Candidates'|trans }}</h4>
<div class="d-flex flex-row 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 }}
</a>
</div>
<ul>
<ul class="mb-3">
{% for candidate in season.candidates %}
<li>{{ candidate.name }}</li>{% endfor %}
</ul>
<div class="d-flex flex-row align-items-center">
<h4 class="py-2 pe-2">{{ 'Settings'|trans }}</h4>
<div class="d-flex flex-row align-items-center mb-3">
<h4 class="mb-0 pe-2">{{ 'Settings'|trans }}</h4>
</div>
{{ form(form) }}
</div>
templates/backoffice/season_add.html.twig
+12 -3
View File
@@ -1,17 +1,26 @@
{% extends 'backoffice/base.html.twig' %}
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_index') }}">{{ 'Home'|trans }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ 'Create a season'|trans }}</li>
</ol>
</nav>
{% endblock %}
{% block body %}
<div class="row">
<div class="col-md-6 col-12">
<h2 class="py-2">{{ 'Create a season'|trans }}</h2>
<h2 class="mb-3">{{ 'Create a season'|trans }}</h2>
{{ form_start(form) }}
{{ form_row(form.name) }}
<button type="submit" class="btn btn-primary">{{ 'Submit'|trans }}</button>
{{ form_end(form) }}
</div>
<div class="col-md-6 col-12">
<p class="pt-5">
Hier kan nog tekst komen met wat uitleg
<p class="mb-3">
{{ 'Help text for creating a season'|trans }}
</p>
</div>
</div>
templates/backoffice/season_add_candidates.html.twig
+13 -3
View File
@@ -1,17 +1,27 @@
{% extends 'backoffice/base.html.twig' %}
{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_index') }}">{{ 'Home'|trans }}</a></li>
<li class="breadcrumb-item"><a href="{{ path('tvdt_backoffice_season', {seasonCode: season.seasonCode}) }}">{{ season.name }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ 'Add Candidates'|trans }}</li>
</ol>
</nav>
{% endblock %}
{% block body %}
<div class="row">
<div class="col-md-6 col-12">
<h2 class="py-2">{{ 'Add Candidates'|trans }}</h2>
<h2 class="mb-3">{{ 'Add Candidates'|trans }}</h2>
{{ form_start(form) }}
{{ form_row(form.candidates) }}
<button type="submit" class="btn btn-primary">{{ 'Submit'|trans }}</button>
{{ form_end(form) }}
</div>
<div class="col-md-6 col-12">
<p class="pt-5">
Hier kan nog tekst komen met wat uitleg
<p class="mb-3">
{{ 'Help text for adding candidates'|trans }}
</p>
</div>
</div>