studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile - style event page

Browse source
This commit is contained in:
isUnknown 2024-09-10 16:55:01 +02:00
parent dd04bac95e
commit db77e09c61
3 changed files with 58 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

32
assets/css/src/collapsable-section.css
View file

@ -74,3 +74,35 @@
position: absolute;
inset: 0;
}
@media screen and (min-width: 800px) {
.session .left-column {
display: contents;
}
}
@media screen and (max-width: 800px) {
.collapsable__content .session {
grid-template-columns: 1fr 1fr;
}
.collapsable__content .session .ticket-link,
.collapsable__content .session .ticket {
display: block;
}
.collapsable__content .session {
font-size: 1rem;
}
.collapsable__content .session .ticket-link {
font-size: 0.8rem;
text-align: right;
}
.collapsable__content .session .ticket-link figure {
margin: 0;
margin-bottom: 0.6rem;
}
.collapsable__content .session svg {
width: 1.8rem;
}
}

9
assets/css/src/swiper.css
View file

@ -27,3 +27,12 @@
.swiper-button-prev:hover {
cursor: url(../../images/icons/arrow-prev.svg) 10 20, auto !important;
}
@media screen and (max-width: 800px) {
#swiper picture {
height: 100%;
}
#swiper picture img {
object-fit: contain;
}
}

28
site/templates/event.php
View file

@ -47,14 +47,18 @@
$formattedDate = $formatter->format($date);
?>
<div class="session collapsable__item--padding grid">
<p><?= $formattedDate ?></p>
<p><?= e($session->timeComplement()->isEmpty() == 'true', $session->time(), $session->time() . ' ' . $session->timeComplement()) ?></p>
<p><?= $page->place() ?></p>
<?php if ($page->bookingUrl()->isEmpty()): ?>
<a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
<?php else: ?>
<a class="ticket-link" href="<?= $page->bookingUrl()->url() ?>" target="_blank" title="Plateforme de réservation"><?php snippet('ticket') ?> Réserver</a>
<?php endif ?>
<div class="left-column">
<p><?= $formattedDate ?></p>
<p><?= e($session->timeComplement()->isEmpty() == 'true', $session->time(), $session->time() . ' ' . $session->timeComplement()) ?></p>
<p><?= $page->place() ?></p>
</div>
<div class="right-column">
<?php if ($page->bookingUrl()->isEmpty()): ?>
<a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
<?php else: ?>
<a class="ticket-link" href="<?= $page->bookingUrl()->url() ?>" target="_blank" title="Plateforme de réservation"><?php snippet('ticket') ?> Réserver</a>
<?php endif ?>
</div>
</div>
<?php endforeach ?>
</div>
@ -91,9 +95,11 @@
}"
class="collapsable__item--padding session grid"
>
<p x-text="dateToFrench(session.date)"></p>
<p x-text="session.time"></p>
<p><?= $page->place() ?></p>
<div class="left-column">
<p x-text="dateToFrench(session.date)"></p>
<p x-text="session.time"></p>
<p><?= $page->place() ?></p>
</div>
<template x-if="session.bookableStock === 0">
<a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> Complet</a>
</template>