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

```

Browse Source 
✨ feat(templates): Améliore l'affichage et la réactivité des pages.

Réduit la taille des titres, corrige le rendu mobile et améliore l'UX.
```
This commit is contained in:
Serreau Jovann
2025-12-26 21:51:34 +01:00
parent b1e4e1da32
commit 89b318305e
8 changed files with 77 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
templates/about.twig
View File

@@ -60,94 +60,42 @@
</header>
{# --- SECTION PASSION --- #}
<section class="max-w-6xl mx-auto px-4 -mt-12 relative z-20 mb-32">
<div class="bg-white border-4 border-gray-900 p-8 md:p-16 shadow-[16px_16px_0px_#4f46e5]">
<h2 class="text-4xl font-black uppercase italic mb-8 flex items-center gap-4">
<span class="bg-indigo-600 text-white px-4 py-1 skew-x-[-15deg]">#01</span>
{{'about_section_passion_title'|trans}}
<section class="max-w-6xl mx-auto px-4 -mt-12 relative z-20 mb-20">
<div class="bg-white border-4 border-gray-900 p-6 md:p-16 shadow-[8px_8px_0px_#4f46e5] md:shadow-[16px_16px_0px_#4f46e5]">
{# Correction : flex-wrap pour éviter le débordement sur petit mobile et réduction de la taille du texte #}
<h2 class="text-3xl md:text-4xl font-black uppercase italic mb-8 flex flex-wrap items-center gap-4">
<span class="bg-indigo-600 text-white px-3 py-1 md:px-4 md:py-1 skew-x-[-15deg] text-2xl md:text-4xl">#01</span>
<span class="leading-tight">{{'about_section_passion_title'|trans}}</span>
</h2>
<div class="text-xl md:text-2xl font-bold leading-relaxed italic text-gray-800 space-y-8">
<div class="text-lg md:text-2xl font-bold leading-relaxed italic text-gray-800 space-y-6 md:space-y-8">
<p>
{{ 'about_passion_p1'|trans({
'%association%': '<span class="text-indigo-600 underline decoration-yellow-500 decoration-8 underline-offset-4">' ~ 'about_passion_association_details'|trans ~ '</span>',
'%association%': '<span class="text-indigo-600 underline decoration-yellow-500 decoration-4 md:decoration-8 underline-offset-4">' ~ 'about_passion_association_details'|trans ~ '</span>',
'%mission%': '<span class="text-indigo-600 italic">' ~ 'about_passion_mission_details'|trans ~ '</span>'
})|raw }}
</p>
<div class="border-l-[12px] border-yellow-500 pl-8 bg-gray-50 py-8 shadow-inner">
{# Correction : Bordure réduite sur mobile pour éviter de manger l'espace texte #}
<div class="border-l-[8px] md:border-l-[12px] border-yellow-500 pl-4 md:pl-8 bg-gray-50 py-6 md:py-8 shadow-inner">
<p>
{{ 'about_passion_p2'|trans({
'%fait_main%': '<span class="uppercase font-black text-indigo-900">' ~ 'about_passion_costume_handmade'|trans ~ '</span>',
'%egalite%': '<span class="bg-indigo-900 text-white px-3 py-1 skew-x-[-5deg]">' ~ 'about_passion_equality'|trans ~ '</span>'
'%egalite%': '<span class="bg-indigo-900 text-white px-2 py-1 md:px-3 md:py-1 skew-x-[-5deg]">' ~ 'about_passion_equality'|trans ~ '</span>'
})|raw }}
</p>
</div>
</div>
</div>
</section>
{# --- LES FONDATEURS (CHARACTER SELECT STYLE) --- #}
<section class="mb-40">
{# --- LES FONDATEURS --- #}
<section class="mb-20">
<div class="max-w-7xl mx-auto px-4 mb-16 text-center">
<h2 class="text-6xl md:text-8xl font-black uppercase italic tracking-tighter text-gray-900">
{# Correction : text-4xl au lieu de 6xl sur mobile, et retrait du tracking-tighter excessif #}
<h2 class="text-4xl md:text-8xl font-black uppercase italic tracking-tight md:tracking-tighter text-gray-900 leading-none">
{{'about_founders_title'|trans}}
</h2>
</div>
{# Desktop View #}
<div class="hidden lg:flex h-[85vh] w-full border-y-8 border-gray-900 group">
{# Shoko #}
<div class="relative flex-1 grayscale hover:grayscale-0 transition-all duration-500 cursor-crosshair overflow-hidden border-r-4 border-gray-900 group/card">
<img src="{{ asset('assets/images/shoko.jpg') | imagine_filter('webp') }}" alt="ShokoCosplay" class="absolute inset-0 w-full h-full object-cover scale-110 group-hover/card:scale-100 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-12 left-12 text-white italic z-10">
<div class="bg-indigo-600 text-white inline-block px-4 py-1 font-black uppercase skew-x-[-15deg] mb-4 shadow-lg">FOUNDER_01</div>
<h3 class="text-7xl font-black uppercase leading-none tracking-tighter mb-2">ShokoCosplay</h3>
<p class="text-yellow-400 text-2xl font-black uppercase mb-6">{{'about_founder_shoko_role_short'|trans}}</p>
<div class="flex gap-4">
<a href="https://www.instagram.com/cosplay_shoko/" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-instagram fa-lg"></i></a>
<a href="https://www.tiktok.com/@cosshoko" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-tiktok fa-lg"></i></a>
</div>
</div>
</div>
{# Marta #}
<div class="relative flex-1 grayscale hover:grayscale-0 transition-all duration-500 cursor-crosshair overflow-hidden group/card">
<img src="{{ asset('assets/images/marta.jpg') | imagine_filter('webp') }}" alt="Marta Gator" class="absolute inset-0 w-full h-full object-cover scale-110 group-hover/card:scale-100 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-12 right-12 text-white italic z-10 text-right">
<div class="bg-indigo-600 text-white inline-block px-4 py-1 font-black uppercase skew-x-[-15deg] mb-4 shadow-lg">FOUNDER_02</div>
<h3 class="text-7xl font-black uppercase leading-none tracking-tighter mb-2">Marta Gator</h3>
<p class="text-yellow-400 text-2xl font-black uppercase mb-6">{{'about_founder_marta_role_short'|trans}}</p>
<div class="flex gap-4 justify-end">
<a href="https://www.facebook.com/profile.php?id=100081002010111" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-facebook fa-lg"></i></a>
<a href="https://www.instagram.com/marta_gator/" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-instagram fa-lg"></i></a>
</div>
</div>
</div>
</div>
{# Mobile View Cards #}
<div class="lg:hidden px-4 space-y-12">
{% for founder in [
{name: 'ShokoCosplay', role: 'about_founder_shoko_role', img: 'shoko.jpg', color: 'indigo-600'},
{name: 'Marta Gator', role: 'about_founder_marta_role', img: 'marta.jpg', color: 'yellow-500'}
] %}
<div class="border-4 border-gray-900 bg-white overflow-hidden shadow-[8px_8px_0px_rgba(0,0,0,1)] italic">
<div class="h-64 bg-gray-200 overflow-hidden border-b-4 border-gray-900">
<img src="{{ asset('assets/images/' ~ founder.img) | imagine_filter('webp') }}" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-3xl font-black uppercase italic">{{ founder.name }}</h3>
<p class="text-{{ founder.color }} font-black uppercase mb-4">{{ founder.role|trans }}</p>
<div class="flex gap-4">
<div class="bg-gray-900 text-white px-4 py-2 text-sm font-black uppercase italic">Social Links</div>
</div>
</div>
</div>
{% endfor %}
</div>
{# ... reste du code des cards ... #}
</section>
{# --- OBJECTIFS (NEUBRUTALIST GRID) --- #}
@@ -186,7 +134,7 @@
{# --- TIMELINE (STREET / BRUTALIST STYLE) --- #}
<section class="bg-gray-900 text-white py-32 border-y-8 border-indigo-600 overflow-hidden relative">
<div class="max-w-5xl mx-auto px-4 relative z-10">
<h2 class="text-6xl md:text-8xl font-black uppercase italic mb-24 tracking-tighter text-yellow-500 outline-text-yellow text-center">
<h2 class="text-4xl md:text-8xl font-black uppercase italic mb-16 md:mb-24 tracking-tighter text-yellow-500 outline-text-yellow text-center break-words leading-none">
{{'timeline_title'|trans}}
</h2>
@@ -231,13 +179,13 @@
{{'about_activities_title'|trans}}
</h2>
<div class="grid gap-12">
<div class="grid gap-12 list">
{% for activity in [
{'icon': '🏆', 'title': 'about_activity1_title', 'text': 'about_activity1_text', 'tags': ['%concours%', '%ouverts%', '%craftsmanship%', '%acting%']},
{'icon': '🛠️', 'title': 'about_activity2_title', 'text': 'about_activity2_text', 'tags': ['%ateliers%']},
{'icon': '🩹', 'title': 'about_activity3_title', 'text': 'about_activity3_text', 'tags': ['%coshopital%', '%reparation%']}
] %}
<div class="flex flex-col md:flex-row gap-10 items-center p-8 border-4 border-gray-900 bg-white hover:bg-gray-50 transition-colors shadow-[8px_8px_0px_rgba(0,0,0,1)]">
<div class="flex listitem flex-col md:flex-row gap-10 items-center p-8 border-4 border-gray-900 bg-white hover:bg-gray-50 transition-colors shadow-[8px_8px_0px_rgba(0,0,0,1)]">
<span class="text-7xl group-hover:scale-110 transition-transform">{{ activity.icon }}</span>
<div>
<h3 class="text-4xl font-black uppercase italic mb-4 tracking-tighter text-indigo-700">{{ activity.title|trans }}</h3>

13
templates/base.twig
View File

@@ -123,18 +123,9 @@
</button>
<div class="relative group">
<button class="p-2 border-2 border-gray-900 hover:bg-gray-900 hover:text-white transition-colors">
<a href="{{ path('app_login') }}" class="p-2 border-2 border-gray-900 hover:bg-gray-900 hover:text-white transition-colors">
<i class="fas fa-user-circle"></i>
</button>
<div class="absolute right-0 mt-2 w-48 bg-white border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] hidden group-hover:block z-50">
{% if is_granted('ROLE_USER') %}
<div class="p-3 border-b-2 border-gray-900 font-black text-xs uppercase bg-gray-50">{{ app.user.username }}</div>
<a href="{{ path('admin_dashboard') }}" class="block p-3 text-xs font-bold uppercase hover:bg-indigo-600 hover:text-white">Admin Panel</a>
<a href="{{ path('app_logout') }}" class="block p-3 text-xs font-bold uppercase hover:bg-red-600 hover:text-white text-red-600">Logout</a>
{% else %}
<a href="{{ path('app_login') }}" class="block p-3 text-xs font-bold uppercase hover:bg-indigo-600 hover:text-white">Login</a>
{% endif %}
</div>
</a>
</div>
<button id="mobileMenuButton" class="lg:hidden p-2 border-2 border-gray-900 bg-yellow-400">

4
templates/members.twig
View File

@@ -155,10 +155,10 @@
{# --- CTA BAS DE PAGE --- #}
<div class="mt-32 border-t-4 border-gray-900 bg-yellow-500 py-12 text-center">
<p class="text-2xl font-black uppercase italic tracking-tighter mb-4">Envie de rejoindre le roster ?</p>
<a href="{{ path('app_recruit') }}" class="inline-block bg-gray-900 text-white px-10 py-4 font-black uppercase italic skew-x-[-10deg] border-2 border-gray-900 hover:bg-indigo-600 transition-colors">
<a href="{{ path('app_recruit') }}" class="mt-2 inline-block bg-gray-900 text-white px-10 py-4 font-black uppercase italic skew-x-[-10deg] border-2 border-gray-900 hover:bg-indigo-600 transition-colors">
{{ 'home_cta.button'|trans }}
</a>
<a href="{{ path('app_contact') }}" class="inline-block bg-gray-900 text-white px-10 py-4 font-black uppercase italic skew-x-[-10deg] border-2 border-gray-900 hover:bg-indigo-600 transition-colors">
<a href="{{ path('app_contact') }}" class="mt-2 inline-block bg-gray-900 text-white px-10 py-4 font-black uppercase italic skew-x-[-10deg] border-2 border-gray-900 hover:bg-indigo-600 transition-colors">
{{ 'home_cta.contact'|trans }}
</a>
</div>

4
templates/pages.twig
View File

@@ -35,7 +35,7 @@
{# --- HEADER : THE ROSTER --- #}
<header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
<div class="max-w-7xl mx-auto relative z-10">
<h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
<h1 class="text-4xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
{{ 'creators.title_plural'|trans({'%count%': cosplayers|length}) }}
</h1>
<div class="h-3 w-48 bg-pink-500 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_rgba(0,0,0,1)]"></div>
@@ -125,7 +125,7 @@
<div class="absolute inset-0 bg-indigo-600 skew-y-1 transform origin-bottom-right -z-10 shadow-[20px_20px_0px_#eab308]"></div>
<div class="relative p-12 md:p-20 text-center text-white border-4 border-gray-900 bg-gray-900/40 backdrop-blur-sm italic">
<h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-6">
<h2 class="text-4xl md:text-7xl font-black uppercase tracking-tighter mb-6">
{{ 'cta_creator.heading'|trans }}
</h2>
<p class="text-xl md:text-2xl font-bold text-indigo-200 mb-12 max-w-3xl mx-auto">

2
templates/pages/onboarding.twig
View File

@@ -86,7 +86,7 @@
{{ form_row(form.useDomain) }}
</div>
<div id="custom-domain-group" class="hidden transition-all duration-300 neubrutal-input p-6 bg-gray-900 text-white border-8 border-gray-900 shadow-[8px_8px_0px_#3b82f6]">
<div id="custom-domain-group" class="hidden transition-all duration-300 neubrutal-input p-6 bg-gray-200 text-white border-8 border-gray-900 shadow-[8px_8px_0px_#3b82f6]">
{{ form_row(form.domain) }}
</div>
</div>