admin/e-ticket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6fab96ab44ed1062fbddb86bbff2c33b89f7ce56
e-ticket/templates/home/event_detail.html.twig

186 lines
14 KiB
Twig
Raw Normal View History

Add public events page, event detail route, copy URL button, organizer events list - Add /evenements public page with Meilisearch search, KnpPaginator (12/page), event cards grid - Add /evenement/{orgaSlug}/{id}-{eventSlug} public route with slug redirect - Add Event::getSlug() method - Update homepage stats with real event count - Update organizer detail page to list their public events - Update navbar: link Evenements to /evenements with active state - Add copy URL button on edit event page (visible only when online) - Add initCopyUrl() in app.js with clipboard API Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 17:54:02 +01:00
{% extends 'base.html.twig' %}
{% block title %}{{ event.title }} - E-Ticket{% endblock %}
{% block description %}{{ event.title }} - {{ event.startAt|date('d/m/Y') }} a {{ event.city }}{% endblock %}
{% block og_image %}
{% if event.eventMainPictureName %}
<meta property="og:image" content="{{ absolute_url('/uploads/events/' ~ event.eventMainPictureName) }}">
{% else %}
<meta property="og:image" content="https://ticket.e-cosplay.fr/logo.png">
{% endif %}
{% endblock %}
{% block body %}
Redesign event detail page: show title, address, date and organizer in hero Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 17:55:32 +01:00
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">
<section class="relative bg-white border-b-8 border-gray-900 px-4 pt-20 pb-16">
<div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
Full mobile responsive (320px) and tablet (768px) support across all templates - All text-[20rem] background text → text-[8rem] md:text-[20rem] - All text-8xl → text-5xl md:text-8xl - All text-5xl emojis → text-3xl md:text-5xl - edit_event: w-full md:w-[80%], poster column w-full lg:w-[350px] - account/index: tab bar overflow-x-auto, events table overflow-x-auto - admin/events: table overflow-x-auto - register: tab buttons overflow-x-auto - error 404/500: responsive padding p-6 md:p-12 - base footer: flex-col sm:flex-row for bottom bar - Add PWA bundle (spomky-labs/pwa-bundle) with composer require files Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 19:11:02 +01:00
<span class="text-[8rem] md:text-[20rem] font-black uppercase leading-none block -rotate-12 translate-y-10">EVENT</span>
Redesign event detail page: show title, address, date and organizer in hero Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 17:55:32 +01:00
</div>
<div class="max-w-4xl mx-auto relative z-10">
<h1 class="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-[0.85] mb-6">{{ event.title }}</h1>
<div class="flex flex-wrap gap-6 text-sm font-bold">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<span>{{ event.address }}, {{ event.zipcode }} {{ event.city }}</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
Show full dates (d/m/Y H:i), add OpenStreetMap embed below event description - Change date display from d/m/Y + H:i to "Du d/m/Y H:i au d/m/Y H:i" - Add map card with OSM iframe (300px), address text, and link to OpenStreetMap - Add openstreetmap.org to CSP frame-src Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:31:07 +01:00
<span>Du {{ event.startAt|date('d/m/Y H:i') }} au {{ event.endAt|date('d/m/Y H:i') }}</span>
Redesign event detail page: show title, address, date and organizer in hero Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 17:55:32 +01:00
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
<a href="{{ path('app_organizer_detail', {id: organizer.id, slug: organizer.slug}) }}" class="text-indigo-600 hover:underline">{{ organizer.companyName ?? organizer.firstName ~ ' ' ~ organizer.lastName }}</a>
</div>
</div>
</div>
</section>
<section class="py-12 px-4">
<div class="max-w-4xl mx-auto">
Add organizer info section and event contact form on event detail page - Left: organizer card with logo, name, city, social icons, email - Right: contact form (name, firstname, email, message) sent to organizer - Add /evenement/{id}/contact POST route with email to organizer (replyTo sender) - Create event_contact.html.twig email template - Add flash messages for success/error Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:17:17 +01:00
{% for message in app.flashes('success') %}
<div class="flash-success"><p class="font-black text-sm">{{ message }}</p></div>
{% endfor %}
{% for message in app.flashes('error') %}
<div class="flash-error"><p class="font-black text-sm">{{ message }}</p></div>
{% endfor %}
Event detail: poster 250px left, description right in two-column layout Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:29:30 +01:00
<div class="card-brutal overflow-hidden p-0">
<div class="flex flex-col md:flex-row">
<div class="md:w-[300px] flex-shrink-0">
{% if event.eventMainPictureName %}
Show full event poster without crop: object-contain instead of object-cover Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:44:07 +01:00
<img src="{{ ('/uploads/events/' ~ event.eventMainPictureName) | imagine_filter('medium') }}" alt="{{ event.title }}" class="w-full max-h-[300px] object-contain">
Event detail: poster 250px left, description right in two-column layout Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:29:30 +01:00
{% else %}
<div class="w-full h-[250px] bg-gray-100 flex items-center justify-center">
<span class="text-5xl opacity-20">&#128247;</span>
</div>
{% endif %}
</div>
<div class="p-6 flex-1">
{% if event.description %}
<div class="prose prose-sm max-w-none font-bold text-gray-700 leading-relaxed">
{{ event.description|raw }}
</div>
{% else %}
<p class="text-gray-400 font-bold italic">Aucune description pour cet evenement.</p>
{% endif %}
</div>
</div>
Redesign event detail page: show title, address, date and organizer in hero Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 17:55:32 +01:00
</div>
Show full dates (d/m/Y H:i), add OpenStreetMap embed below event description - Change date display from d/m/Y + H:i to "Du d/m/Y H:i au d/m/Y H:i" - Add map card with OSM iframe (300px), address text, and link to OpenStreetMap - Add openstreetmap.org to CSP frame-src Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:31:07 +01:00
<div class="card-brutal overflow-hidden p-0 mt-8">
<div class="section-header">
<h2 class="text-sm font-black uppercase tracking-widest text-white">Emplacement</h2>
</div>
Replace OSM iframe with Leaflet map: marker, zoom, geocoding via Nominatim - Add event-map.js module: loads Leaflet dynamically, geocodes address, renders map with marker at zoom 16 - Remove iframe, address text and OSM link below map - Add CSP entries for unpkg (Leaflet), tile.openstreetmap.org (tiles), nominatim (geocoding) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:35:54 +01:00
<div id="event-map" class="w-full h-[300px]" data-address="{{ event.address }}, {{ event.zipcode }} {{ event.city }}"></div>
Show full dates (d/m/Y H:i), add OpenStreetMap embed below event description - Change date display from d/m/Y + H:i to "Du d/m/Y H:i au d/m/Y H:i" - Add map card with OSM iframe (300px), address text, and link to OpenStreetMap - Add openstreetmap.org to CSP frame-src Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:31:07 +01:00
</div>
Redesign event detail page: show title, address, date and organizer in hero Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 17:55:32 +01:00
</div>
</section>
Add public events page, event detail route, copy URL button, organizer events list - Add /evenements public page with Meilisearch search, KnpPaginator (12/page), event cards grid - Add /evenement/{orgaSlug}/{id}-{eventSlug} public route with slug redirect - Add Event::getSlug() method - Update homepage stats with real event count - Update organizer detail page to list their public events - Update navbar: link Evenements to /evenements with active state - Add copy URL button on edit event page (visible only when online) - Add initCopyUrl() in app.js with clipboard API Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 17:54:02 +01:00
Add organizer info section and event contact form on event detail page - Left: organizer card with logo, name, city, social icons, email - Right: contact form (name, firstname, email, message) sent to organizer - Add /evenement/{id}/contact POST route with email to organizer (replyTo sender) - Create event_contact.html.twig email template - Add flash messages for success/error Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:17:17 +01:00
<section class="py-12 px-4">
<div class="max-w-4xl mx-auto flex flex-col lg:flex-row gap-8">
<div class="flex-1">
<div class="card-brutal overflow-hidden">
<div class="section-header">
<h2 class="text-sm font-black uppercase tracking-widest text-white">Organisateur</h2>
</div>
<div class="p-6">
<div class="flex items-center gap-4 mb-6">
{% if organizer.logoName %}
<div class="border-3 border-gray-900 overflow-hidden bg-white p-1 shadow-[4px_4px_0px_rgba(0,0,0,1)]">
<img src="{{ ('/uploads/logos/' ~ organizer.logoName) | imagine_filter('thumbnail') }}" alt="{{ organizer.companyName }}" class="h-[60px] w-auto object-contain">
</div>
{% else %}
<div class="w-16 h-16 bg-yellow-400 border-3 border-gray-900 flex items-center justify-center shadow-[4px_4px_0px_rgba(0,0,0,1)]">
<span class="text-2xl font-black">{{ organizer.firstName|first|upper }}{{ organizer.lastName|first|upper }}</span>
</div>
{% endif %}
<div>
<a href="{{ path('app_organizer_detail', {id: organizer.id, slug: organizer.slug}) }}" class="font-black text-lg uppercase tracking-tighter hover:text-indigo-600 transition-colors">{{ organizer.companyName ?? organizer.firstName ~ ' ' ~ organizer.lastName }}</a>
{% if organizer.city %}
<p class="text-xs font-bold text-gray-400 uppercase tracking-widest">{{ organizer.postalCode }} {{ organizer.city }}</p>
{% endif %}
</div>
</div>
{% if organizer.website or organizer.facebook or organizer.instagram or organizer.twitter or organizer.tiktok %}
<div class="flex gap-3 flex-wrap mb-4">
{% if organizer.website %}
<a href="{{ organizer.website }}" target="_blank" class="w-9 h-9 flex items-center justify-center border-2 border-gray-900 bg-gray-100 hover:bg-gray-900 hover:text-white transition-all" title="Site internet">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
</a>
{% endif %}
{% if organizer.facebook %}
<a href="{{ organizer.facebook }}" target="_blank" class="w-9 h-9 flex items-center justify-center border-2 border-gray-900 bg-[#1877F2] text-white hover:opacity-80 transition-all" title="Facebook">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
{% endif %}
{% if organizer.instagram %}
<a href="{{ organizer.instagram }}" target="_blank" class="w-9 h-9 flex items-center justify-center border-2 border-gray-900 bg-instagram text-white hover:opacity-80 transition-all" title="Instagram">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</a>
{% endif %}
{% if organizer.twitter %}
<a href="{{ organizer.twitter }}" target="_blank" class="w-9 h-9 flex items-center justify-center border-2 border-gray-900 bg-black text-white hover:opacity-80 transition-all" title="X (Twitter)">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
{% endif %}
{% if organizer.tiktok %}
<a href="{{ organizer.tiktok }}" target="_blank" class="w-9 h-9 flex items-center justify-center border-2 border-gray-900 bg-black text-white hover:opacity-80 transition-all" title="TikTok">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
</a>
{% endif %}
</div>
{% endif %}
{% if organizer.email %}
<p class="text-sm font-bold"><a href="mailto:{{ organizer.email }}" class="text-indigo-600 hover:underline">{{ organizer.email }}</a></p>
{% endif %}
</div>
</div>
</div>
<div class="flex-1">
<div class="card-brutal overflow-hidden">
<div class="section-header">
<h2 class="text-sm font-black uppercase tracking-widest text-white">Contacter l'organisateur</h2>
</div>
<div class="p-6">
<form method="post" action="{{ path('app_event_contact', {id: event.id}) }}" class="form-col">
<div class="form-row">
<div class="form-group">
<label for="contact_name" class="text-xs font-black uppercase tracking-widest form-label">Nom</label>
<input type="text" id="contact_name" name="name" required class="form-input focus:border-indigo-600" placeholder="Dupont">
</div>
<div class="form-group">
<label for="contact_firstname" class="text-xs font-black uppercase tracking-widest form-label">Prenom</label>
<input type="text" id="contact_firstname" name="firstname" required class="form-input focus:border-indigo-600" placeholder="Jean">
</div>
</div>
<div>
<label for="contact_email" class="text-xs font-black uppercase tracking-widest form-label">Email</label>
<input type="email" id="contact_email" name="email" required class="form-input focus:border-indigo-600" placeholder="jean.dupont@exemple.fr">
</div>
<div>
<label for="contact_message" class="text-xs font-black uppercase tracking-widest form-label">Message</label>
<textarea id="contact_message" name="message" required rows="4" class="form-textarea focus:border-indigo-600" placeholder="Votre question sur cet evenement..."></textarea>
</div>
<div>
<button type="submit" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
Envoyer
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
Add public events page, event detail route, copy URL button, organizer events list - Add /evenements public page with Meilisearch search, KnpPaginator (12/page), event cards grid - Add /evenement/{orgaSlug}/{id}-{eventSlug} public route with slug redirect - Add Event::getSlug() method - Update homepage stats with real event count - Update organizer detail page to list their public events - Update navbar: link Evenements to /evenements with active state - Add copy URL button on edit event page (visible only when online) - Add initCopyUrl() in app.js with clipboard API Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 17:54:02 +01:00
</div>
{% endblock %}
Reference in New Issue Copy Permalink