73 lines
3.1 KiB
Twig
73 lines
3.1 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}{{ parent() }} - Évènements{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<ul class="nav nav-pills mt-2 mb-4">
|
|
{% for key, name in days %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if date == key %}bg-dark text-white{% else %}text-dark{% endif %}" href="{{ path('events', {date: key}) }}">{{ name }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
{% for snapshot in snapshots %}
|
|
{% if date == snapshot.date.format('Y-m-d') %}
|
|
<div class="col-xs-1 col-sm-6 col-md-3 mb-4">
|
|
<a href="{{ asset(snapshot.movie ? snapshot.movie : snapshot.picture) }}" data-title="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="snapshot-link" data-template="{{ snapshot.movie ? '#snapshot-movie-template' : '#snapshot-picture-template' }}">
|
|
<img src="{{ asset(snapshot.thumbnail) }}?v={{ snapshot.thumbnailChecksum }}" alt="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="img-fluid shadow-sm p-3 bg-light rounded">
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="snapshot-view"></div>
|
|
|
|
<template id="snapshot-picture-template">
|
|
<div class="modal fade show" tabindex="-1" role="dialog" aria-hidden="true" style="display: block">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content bg-dark">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{title}</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img src="{src}" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-backdrop fade show"></div>
|
|
</template>
|
|
|
|
<template id="snapshot-movie-template">
|
|
<div class="modal fade show" tabindex="-1" role="dialog" aria-hidden="true" style="display: block">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content bg-dark">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{title}</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<video controls class="modal-movie border border-dark shadow-sm rounded-lg">
|
|
<source src="{src}" type="video/mp4" />
|
|
</video>
|
|
<a href="{{ path('download_snapshot') }}?src={src}">
|
|
<button class="btn btn-info">Télécharger</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-backdrop fade show"></div>
|
|
</template>
|
|
{% endblock %}
|