melvin-leveque/interface-kaznautes
2
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: amélioration du design global (ajout d'une couleur de fond pour le body, optimisation des messages flash, ajustements du pied-de-page)

Browse Source
This commit is contained in:
maurine
2026-04-09 22:22:08 +02:00
parent d2ffdcbc0d
commit bf3439587e
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
templates/base.html.twig
View File

@@ -16,7 +16,7 @@
{% endblock %}
</head>
<body class="min-h-screen flex flex-col font-sora antialiased text-text">
<body class="min-h-screen flex flex-col font-sora antialiased text-text bg-bg-primaire">
{% block navbar %}
{{ include('_navbar.html.twig') }}
@@ -24,10 +24,12 @@
{# Contenu principal #}
<main class="flex-grow">
{# Affichage des messages flash (Succès ou Erreur) #}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
{# Gestion du responsive sur toutes les pages #}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{# Affichage des messages flash (Succès ou Erreur) #}
{% for label, messages in app.flashes %}
{% for message in messages %}
{# Réglages des couleurs que prendront les messages en fonction de leur(s) paramètre(s) #}
{% set colorClasses = {
'success': 'bg-green-50 border-green-200 text-green-800',
'error': 'bg-red-50 border-red-200 text-red-800',
@@ -35,6 +37,7 @@
'info': 'bg-blue-50 border-blue-200 text-blue-800'
} %}
{# Affichage du message de la couleur définie par sa fonction #}
<div
class="flex items-center p-4 mb-4 rounded-lg border shadow-sm {{ colorClasses[label] ?? colorClasses['info'] }}"
role="alert">
@@ -42,6 +45,7 @@
{{ message }}
</div>
{# Affichage du boutton "x" pour fermer le message flash #}
<button type="button"
onclick="this.parentElement.remove()"
class="ml-4 hover:opacity-50 transition-opacity"
@@ -56,11 +60,12 @@
{% endfor %}
</div>
{# Affichage du body spécifique à chaque page #}
{% block body %}{% endblock %}
</main>
{# Gestion du pied-de-page du site #}
<footer class="bg-white border-t border-gris-clair py-8 w-full">
<footer class="w-full bg-white border-t border-gris-clair mt-auto">
<div
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-3 text-sm text-gris-fonce text-center md:text-left">
@@ -76,8 +81,8 @@
class="hover:text-bouton transition-colors">Mentions légales</a></li>
<li><a href="https://status.kaz.bzh/status/kaz" target="_blank"
class="hover:text-bouton transition-colors">État des services</a></li>
<li><a href="https://kaz.bzh/contact/" target="_blank" class="hover:text-bouton transition-colors">Contact</a>
</li>
<li><a href="https://kaz.bzh/contact/" target="_blank"
class="hover:text-bouton transition-colors">Contact</a></li>
</ul>
</nav>
</div>