admin/e-ticket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate inline styles to CSS classes: error pages, attestation/not_found, register_success, email_verified

Browse Source 
- Add reusable CSS classes in app.scss: layout, headings, cards, flash messages, forms, buttons, tables, badges, section headers, dividers
- Migrate 5 templates to use CSS classes instead of inline styles

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-03-20 15:15:56 +01:00
parent 7b21923fe0
commit fbc7570a59
6 changed files with 78 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
assets/app.scss
View File

@@ -61,6 +61,63 @@ e-ticket-editor {
}
.ete-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
/* ===== Layout ===== */
.page-container { max-width: 50rem; margin: 0 auto; padding: 3rem 1rem; }
.page-container-lg { max-width: 60rem; margin: 0 auto; padding: 3rem 1rem; }
.page-container-sm { max-width: 36rem; margin: 0 auto; padding: 3rem 1rem; }
.page-container-xs { max-width: 28rem; margin: 0 auto; padding: 3rem 1rem; }
.page-container-md { max-width: 40rem; margin: 0 auto; padding: 3rem 1rem; }
/* ===== Headings ===== */
.heading-page { border-bottom: 4px solid #111827; display: inline-block; margin-bottom: 0.5rem; }
/* ===== Cards ===== */
.card-brutal { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 1.5rem; }
.card-brutal-lg { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 2.5rem; }
.card-brutal-green { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #d1fae5; padding: 1rem 1.5rem; }
.card-brutal-red { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fee2e2; padding: 1rem 1.5rem; }
.card-brutal-yellow { border: 4px solid #111827; background: #fabf04; padding: 1rem 1.5rem; }
.card-brutal-warn { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: #fef3c7; padding: 1.5rem; }
.card-brutal-info { border: 4px solid #111827; background: #f9fafb; padding: 1.5rem; box-shadow: 6px 6px 0 rgba(0,0,0,1); }
.card-brutal-error { border: 4px solid #991b1b; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: #fee2e2; padding: 1.5rem; }
/* ===== Flash messages ===== */
.flash-success { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #d1fae5; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
.flash-error { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fee2e2; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
/* ===== Forms ===== */
.form-label { display: block; margin-bottom: 0.5rem; }
.form-input { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; }
.form-textarea { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; resize: vertical; }
.form-file { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; background: white; }
.form-col { display: flex; flex-direction: column; gap: 1.5rem; }
.form-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.form-group { flex: 1; min-width: 200px; }
/* ===== Buttons ===== */
.btn-brutal { padding: 0.75rem 2rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fabf04; display: inline-block; cursor: pointer; }
.btn-brutal:hover { background: #4f46e5; color: white; }
.btn-brutal-full { width: 100%; padding: 0.75rem 2rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); cursor: pointer; }
.btn-brutal-dark { display: block; width: 100%; padding: 0.75rem 2rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); text-align: center; text-decoration: none; }
/* ===== Tables ===== */
.table-brutal { width: 100%; border-collapse: collapse; }
.table-brutal th { padding: 0.5rem 0; text-align: left; }
.table-brutal td { padding: 0.5rem 0; }
.table-brutal tr { border-bottom: 1px solid #e5e7eb; }
.table-brutal tr:last-child { border-bottom: none; }
/* ===== Badges ===== */
.badge-green { background: #d1fae5; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
.badge-red { background: #fee2e2; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
.badge-yellow { background: #fef3c7; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
/* ===== Section headers ===== */
.section-header { padding: 0.75rem 1.5rem; background: #111827; }
/* ===== Dividers ===== */
.divider { flex: 1; height: 3px; background: #111827; }
/* ===== Marquee ===== */
@keyframes marquee {
0% { transform: translateX(0); }

8
templates/attestation/not_found.html.twig
View File

@@ -3,11 +3,11 @@
{% block title %}Attestation introuvable - E-Ticket{% endblock %}
{% block body %}
<div style="max-width:40rem;margin:0 auto;padding:3rem 1rem;">
<h1 class="text-3xl font-black uppercase tracking-tighter italic" style="border-bottom:4px solid #111827;display:inline-block;margin-bottom:0.5rem;">Verification attestation</h1>
<div class="page-container-md">
<h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Verification attestation</h1>
<div style="border:4px solid #991b1b;box-shadow:6px 6px 0 rgba(0,0,0,1);background:#fee2e2;padding:1.5rem;margin-top:2rem;">
<p class="font-black text-sm" style="margin-bottom:0.5rem;color:#991b1b;">Attestation introuvable</p>
<div class="card-brutal-error mt-8">
<p class="font-black text-sm mb-2 text-red-800">Attestation introuvable</p>
<p class="text-sm text-gray-700">Ce document ne correspond a aucun virement enregistre dans notre systeme. Il est possible que l'attestation ait ete alteree ou falsifiee.</p>
</div>
</div>

2
templates/error/404.html.twig
View File

@@ -14,7 +14,7 @@
<div class="text-8xl font-black uppercase tracking-tighter mb-4">404</div>
<h1 class="text-3xl font-black uppercase tracking-tighter italic mb-4">Page introuvable</h1>
<p class="font-bold text-gray-500 italic mb-8">La page que vous cherchez n'existe pas ou a ete deplacee.</p>
<a href="/" style="padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fabf04;display:inline-block;" class="font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
<a href="/" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
Retour a l'accueil
</a>
</div>

2
templates/error/500.html.twig
View File

@@ -14,7 +14,7 @@
<div class="text-8xl font-black uppercase tracking-tighter mb-4">{{ status_code }}</div>
<h1 class="text-3xl font-black uppercase tracking-tighter italic mb-4">Erreur serveur</h1>
<p class="font-bold text-gray-500 italic mb-8">Une erreur inattendue s'est produite. Nos equipes ont ete notifiees.</p>
<a href="/" style="padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fabf04;display:inline-block;" class="font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
<a href="/" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
Retour a l'accueil
</a>
</div>

16
templates/security/email_verified.html.twig
View File

@@ -3,24 +3,24 @@
{% block title %}Email verifie - E-Ticket{% endblock %}
{% block body %}
<div style="max-width:36rem;margin:0 auto;padding:3rem 1rem;text-align:center;">
<div style="border:4px solid #111827;box-shadow:6px 6px 0 rgba(0,0,0,1);background:white;padding:2.5rem;">
<div style="font-size:3rem;margin-bottom:1rem;">&#10003;</div>
<h1 class="text-2xl font-black uppercase tracking-tighter italic" style="margin-bottom:1rem;">Email verifie !</h1>
<div class="page-container-sm text-center">
<div class="card-brutal-lg">
<div class="text-5xl mb-4">&#10003;</div>
<h1 class="text-2xl font-black uppercase tracking-tighter italic mb-4">Email verifie !</h1>
<div style="border:4px solid #111827;background:#d1fae5;padding:1rem 1.5rem;margin-bottom:1.5rem;">
<div class="card-brutal-green mb-6">
<p class="font-bold text-sm">Votre adresse email a ete verifiee avec succes.</p>
</div>
{% if isOrganizer %}
<div style="border:4px solid #111827;background:#fabf04;padding:1rem 1.5rem;margin-bottom:1.5rem;">
<div class="card-brutal-yellow mb-6">
<p class="font-bold text-sm">L'equipe E-Ticket va maintenant examiner votre demande de compte organisateur. Vous recevrez une reponse sous 48h.</p>
</div>
{% else %}
<p class="font-bold text-gray-500 text-sm" style="margin-bottom:1.5rem;">Votre compte est actif. Vous pouvez maintenant vous connecter.</p>
<p class="font-bold text-gray-500 text-sm mb-6">Votre compte est actif. Vous pouvez maintenant vous connecter.</p>
{% endif %}
<a href="{{ path('app_login') }}" style="display:inline-block;padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fabf04;" class="font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Se connecter</a>
<a href="{{ path('app_login') }}" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Se connecter</a>
</div>
</div>
{% endblock %}

14
templates/security/register_success.html.twig
View File

@@ -3,22 +3,22 @@
{% block title %}Compte cree - E-Ticket{% endblock %}
{% block body %}
<div style="max-width:36rem;margin:0 auto;padding:3rem 1rem;text-align:center;">
<div style="border:4px solid #111827;box-shadow:6px 6px 0 rgba(0,0,0,1);background:white;padding:2.5rem;">
<div style="font-size:3rem;margin-bottom:1rem;">&#10003;</div>
<h1 class="text-2xl font-black uppercase tracking-tighter italic" style="margin-bottom:1rem;">Compte cree avec succes !</h1>
<div class="page-container-sm text-center">
<div class="card-brutal-lg">
<div class="text-5xl mb-4">&#10003;</div>
<h1 class="text-2xl font-black uppercase tracking-tighter italic mb-4">Compte cree avec succes !</h1>
<div style="border:4px solid #111827;background:#d1fae5;padding:1rem 1.5rem;margin-bottom:1.5rem;">
<div class="card-brutal-green mb-6">
<p class="font-bold text-sm">Un email de verification vous a ete envoye. Veuillez cliquer sur le lien dans l'email pour activer votre compte.</p>
</div>
{% if isOrganizer %}
<div style="border:4px solid #111827;background:#fabf04;padding:1rem 1.5rem;margin-bottom:1.5rem;">
<div class="card-brutal-yellow mb-6">
<p class="font-bold text-sm">Une fois votre email verifie, l'equipe E-Ticket examinera votre demande de compte organisateur et vous donnera une reponse sous 48h.</p>
</div>
{% endif %}
<a href="{{ path('app_login') }}" style="display:inline-block;padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fabf04;" class="font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Aller a la connexion</a>
<a href="{{ path('app_login') }}" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Aller a la connexion</a>
</div>
</div>
{% endblock %}