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

fix calendar-strip hover

Browse source
This commit is contained in:
isUnknown 2024-09-12 13:05:44 +02:00
parent 988ab96bfb
commit 11bba7b1ff
3 changed files with 45 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/css/src/calendar-strip.css
View file

@ -5,7 +5,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 2; z-index: 4;
} }
.calendar-strip__selector { .calendar-strip__selector {
@ -40,7 +40,7 @@
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.calendar-strip__day.active span:nth-child(2) { .calendar-strip__day.active span:nth-child(3) {
text-decoration: underline; text-decoration: underline;
} }
@ -66,6 +66,19 @@
max-height: 20rem; max-height: 20rem;
} }
.calendar-strip .session {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 0.5fr 1.5fr 1.5fr;
padding: var(--padding-vertical) var(--space-m);
}
.calendar-strip .session__event-link {
position: absolute;
inset: 0;
z-index: 1;
}
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.calendar-strip { .calendar-strip {
margin-top: 2rem; margin-top: 2rem;

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

@ -138,12 +138,6 @@
border-bottom: var(--border); border-bottom: var(--border);
} }
.session__event-link {
display: grid;
grid-template-columns: 1fr 1fr 0.5fr 1.5fr 1.5fr;
padding: var(--padding-vertical) var(--space-m);
}
.session:hover { .session:hover {
background-color: var(--color); background-color: var(--color);
} }

61
site/snippets/calendar-strip.php
View file

@ -93,7 +93,7 @@
</ul> </ul>
<a href="<?= page('programme')->url() ?>" class="calendar-strip__calendar-btn">calendrier</a> <a href="<?= page('programme')->url() ?>" class="calendar-strip__calendar-btn">calendrier</a>
<div class="calendar-strip__date" :class="open ? 'open' : ''"> <div class="calendar-strip__date" :class="open ? 'open' : ''">
<ul class="sessions sessions--detailed"> <ul class="sessions">
<template x-for="session in targetSessions"> <template x-for="session in targetSessions">
<li <li
x-data="{ x-data="{
@ -102,38 +102,37 @@
:style="'--color: ' + session.color" :style="'--color: ' + session.color"
class="session" class="session"
> >
<a class="session__event-link" :href="session.eventUrl" title="En savoir plus"> <a class="session__event-link" :href="session.eventUrl" title="En savoir plus"></a>
<div class="session__info session__info--slot"> <div class="session__info session__info--slot">
<p x-html="`${session.day} ${monthName}`"></p> <p x-html="`${session.day} ${monthName}`"></p>
<p x-html="session.time"></p> <p x-html="session.time"></p>
</div>
<div class="session__info session__info--title">
<p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
<p x-html="session.authors"></p>
</div>
<div x-text="session.duration ? session.duration : ''" class="session__info session__info--duration"></div>
<div x-text="`${session.place}`" class="session__info session__info--place"></div>
<template x-if="!session.ticketingUrl">
<div class="session__info session__info--book">
<a class="ticket-link" target="_blank" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
</div> </div>
<div class="session__info session__info--title"> </template>
<p><strong x-html="`<strong>${session.title}</strong>`"></strong></p> <template x-if="session.bookableStock === 0">
<p x-html="session.authors"></p> <div class="session__info session__info--book">
<a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> Complet</a>
</div> </div>
<div x-text="session.duration ? session.duration : ''" class="session__info session__info--duration"></div> </template>
<div x-text="`${session.place}`" class="session__info session__info--place"></div> <template x-if="session.bookableStock > stockThreshold">
<template x-if="!session.ticketingUrl"> <div class="session__info">
<div class="session__info session__info--book"> <a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Billetterie</a>
<a class="ticket-link" target="_blank" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a> </div>
</div> </template>
</template> <template x-if="session.bookableStock !== 0 && session.bookableStock < stockThreshold">
<template x-if="session.bookableStock === 0"> <div class="session__info">
<div class="session__info session__info--book"> <a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Plus que quelques places !</a>
<a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> Complet</a> </div>
</div> </template>
</template>
<template x-if="session.bookableStock > stockThreshold">
<div class="session__info">
<a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Billetterie</a>
</div>
</template>
<template x-if="session.bookableStock !== 0 && session.bookableStock < stockThreshold">
<div class="session__info">
<a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Plus que quelques places !</a>
</div>
</template>
</a>
</li> </li>
</template> </template>
</ul> </ul>