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

add program lines style mobile

Browse source
This commit is contained in:
isUnknown 2024-09-12 15:39:44 +02:00
parent 38da839b89
commit ea0cb004aa
6 changed files with 68 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -76,14 +76,17 @@
}
@media screen and (min-width: 800px) {
.session .left-column {
.session .left-column,
.session .right-column {
display: contents;
}
}
@media screen and (max-width: 800px) {
.collapsable__content .session {
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr !important;
column-gap: 9vw;
font-size: 1rem;
}
.collapsable__content .session .ticket-link,
@ -91,9 +94,6 @@
display: block;
}
.collapsable__content .session {
font-size: 1rem;
}
.collapsable__content .session .ticket-link {
font-size: 0.8rem;
text-align: right;
@ -105,4 +105,20 @@
.collapsable__content .session svg {
width: 1.8rem;
}
[data-template="program"] .collapsable__content .session__info--ticket {
order: -1;
}
[data-template="program"] .collapsable__content .right-column {
font-size: var(--font-size-s);
text-align: right;
}
.session .right-column {
justify-self: end;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}

7
assets/css/src/generic.css
View file

@ -200,7 +200,14 @@ img.show {
opacity: 1;
}
.mobile-group {
display: contents;
}
@media screen and (max-width: 800px) {
.mobile-group {
display: block;
}
.logo {
font-size: 6vw;
}

1
assets/css/src/variables.css
View file

@ -49,6 +49,7 @@
--font-size-h4: 1.25rem;
--font-size-h5: 1.25rem;
--font-size-m: 0.9375rem;
--font-size-s: 0.8125rem;
--padding-vertical: 1rem;
}

2
site/controllers/program.php
View file

@ -30,7 +30,7 @@ function createArraySession($event, $session) {
$arraySession = $session->toArray();
$arraySession['title'] = $event->title()->value();
$arraySession['authors'] = $event->authors();
$arraySession['authors'] = $event->authors()->inline();
$arraySession['place'] = $event->place();
$arraySession['public'] = $event->public();
$arraySession['event-url'] = $event->url();

2
site/snippets/header.php
View file

@ -32,7 +32,7 @@
<?php if ($page->color()->exists()): ?>
<style>
:root {
--color-accent: <?= $page->color() ?>;
--color-accent: <?= e($page->color()->isNotEmpty() == 'true', $page->color(), '#000') ?>;
}
</style>
<?php endif ?>

68
site/templates/program.php
View file

@ -101,39 +101,45 @@
?>
<template x-if="tab === 'Calendrier' || ('<?= $session['categories'] ?>'.length > 0 && tab.includes('<?= $session['categories'] ?>'))">
<li class="collapsable__item--padding session grid js-link" style="--color: <?= $session['color'] ?>">
<div class="session__info">
<p><?= $formattedDate ?></p>
<p><?= $session['time'] ?><?php e($endTime, ' - ' . $endTime) ?></p>
<div class="left-column">
<div class="session__info">
<p><?= $formattedDate ?></p>
<p><?= $session['time'] ?><?php e($endTime, ' - ' . $endTime) ?></p>
</div>
<div class="session__info">
<p><strong><?= $session['title'] ?></strong></p>
<p><?= $session['authors'] ?></p>
</div>
</div>
<div class="session__info">
<p><strong><?= $session['title'] ?></strong></p>
<p><?= $session['authors'] ?></p>
</div>
<div class="session__info">
<?php if (strlen($session['duration']) > 0 || strlen($session['public']) > 0): ?>
<p>
<?php if (strlen($session['duration']) > 0): ?>
Durée : <?= $session['duration'] ?><br />
<div class="right-column">
<div class="mobile-group">
<div class="session__info">
<?php if (strlen($session['duration']) > 0 || strlen($session['public']) > 0): ?>
<p>
<?php if (strlen($session['duration']) > 0): ?>
Durée : <?= $session['duration'] ?><br />
<?php endif ?>
<?php if (strlen($session['public']) > 0): ?>
<?= $session['public'] ?>
<?php endif ?>
</p>
<?php endif ?>
<?php if (strlen($session['public']) > 0): ?>
<?= $session['public'] ?>
<?php endif ?>
</p>
<?php endif ?>
</div>
<div class="session__info">
<p><?= $session['place'] ?></p>
</div>
<div class="session__info">
<?php if ($session['bookableStock'] === 'free'): ?>
<a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?>Entrée libre</a>
<?php elseif ($session['bookableStock'] == 0): ?>
<a class="ticket-link" title="Séance complète" disabled><?php snippet('ticket') ?>Complet</a>
<?php elseif ($session['bookableStock'] < (($session['totalStock'] / 100) * 25)): ?>
<a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?>Plus que quelques places !</a>
<?php else: ?>
<a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?>Billetterie</a>
<?php endif ?>
</div>
<div class="session__info">
<p><?= $session['place'] ?></p>
</div>
</div>
<div class="session__info session__info--ticket">
<?php if ($session['bookableStock'] === 'free'): ?>
<a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?>Entrée libre</a>
<?php elseif ($session['bookableStock'] == 0): ?>
<a class="ticket-link" title="Séance complète" disabled><?php snippet('ticket') ?>Complet</a>
<?php elseif ($session['bookableStock'] < (($session['totalStock'] / 100) * 25)): ?>
<a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?>Plus que quelques places !</a>
<?php else: ?>
<a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?>Billetterie</a>
<?php endif ?>
</div>
</div>
<a class="event-link" href="<?= $session['event-url'] ?>" title="En savoir plus"></a>
</li>