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

calendar strip add animation

Browse source
This commit is contained in:
isUnknown 2024-08-30 15:39:40 +02:00
parent ab59e097a0
commit ea052d22f0
2 changed files with 22 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,23 @@
display: none; display: none;
} }
body.progress * { @keyframes loading {
from,
to {
opacity: 1;
}
50% {
opacity: 0;
}
}
.calendar-strip__days.progress {
cursor: progress !important;
}
.calendar-strip__days.progress > li {
animation: loading 0.3s;
}
.calendar-strip__days.progress button {
cursor: progress !important; cursor: progress !important;
} }

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

@ -15,15 +15,14 @@
}, },
async updateDates() { async updateDates() {
document.body.classList.toggle('progress') const daysNode = document.querySelector('.calendar-strip__days')
daysNode.classList.toggle('progress')
this.dates = getDatesInMonth(this.monthNumb); this.dates = getDatesInMonth(this.monthNumb);
this.dates = await getMergedDates(this.monthNumb, this.dates) this.dates = await getMergedDates(this.monthNumb, this.dates)
console.log('Merged dates', this.dates) console.log('Merged dates', this.dates)
document.body.classList.toggle('progress') document.querySelector('.calendar-strip__days').classList.toggle('progress')
}, },
handleDayHover() { handleDayHover() {
@ -48,7 +47,7 @@
</div> </div>
<ul class="calendar-strip__days"> <ul class="calendar-strip__days">
<template x-for="(date, index) in dates"> <template x-for="(date, index) in dates">
<li class="calendar-strip__day" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''"> <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + index * 0.03 + 's'">
<button <button
:class="date.full === today ? 'today' : ''" :class="date.full === today ? 'today' : ''"
:disabled="date.sessions.length === 0 ? true : false" :disabled="date.sessions.length === 0 ? true : false"