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;
}
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;
}

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

@ -15,15 +15,14 @@
},
async updateDates() {
document.body.classList.toggle('progress')
this.dates = getDatesInMonth(this.monthNumb);
const daysNode = document.querySelector('.calendar-strip__days')
daysNode.classList.toggle('progress')
this.dates = getDatesInMonth(this.monthNumb);
this.dates = await getMergedDates(this.monthNumb, this.dates)
console.log('Merged dates', this.dates)
document.body.classList.toggle('progress')
document.querySelector('.calendar-strip__days').classList.toggle('progress')
},
handleDayHover() {
@ -48,7 +47,7 @@
</div>
<ul class="calendar-strip__days">
<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
:class="date.full === today ? 'today' : ''"
:disabled="date.sessions.length === 0 ? true : false"