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>
This commit is contained in:
Serreau Jovann
2026-03-20 18:31:07 +01:00
parent de99ca5f62
commit bc2b386837
2 changed files with 21 additions and 1 deletions

View File

@@ -28,6 +28,7 @@ nelmio_security:
- 'https://cloudflare.com'
- 'https://*.cloudflareinsights.com'
- 'https://challenges.cloudflare.com'
- 'https://www.openstreetmap.org'
script-src:
- 'self'
- 'https://static.cloudflareinsights.com'

View File

@@ -28,7 +28,7 @@
</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>
<span>{{ event.startAt|date('d/m/Y') }} &bull; {{ event.startAt|date('H:i') }} - {{ event.endAt|date('H:i') }}</span>
<span>Du {{ event.startAt|date('d/m/Y H:i') }} au {{ event.endAt|date('d/m/Y H:i') }}</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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
@@ -69,6 +69,25 @@
</div>
</div>
</div>
<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>
<iframe
class="w-full h-[300px] border-0"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.openstreetmap.org/export/embed.html?bbox=&layer=mapnik#map=14&query={{ (event.address ~ ', ' ~ event.zipcode ~ ' ' ~ event.city)|url_encode }}"
></iframe>
<div class="p-4 bg-gray-50 border-t-2 border-gray-200">
<p class="text-sm font-bold text-gray-600">
<svg class="w-4 h-4 inline-block mr-1 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>
{{ event.address }}, {{ event.zipcode }} {{ event.city }}
</p>
<a href="https://www.openstreetmap.org/search?query={{ (event.address ~ ', ' ~ event.zipcode ~ ' ' ~ event.city)|url_encode }}" target="_blank" class="text-xs font-bold text-indigo-600 hover:underline mt-1 inline-block">Ouvrir dans OpenStreetMap</a>
</div>
</div>
</div>
</section>