From 3694b553577e225696e035d9547310e901672537 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Wed, 28 Aug 2024 19:11:58 +0200 Subject: [PATCH] start program page --- assets/css/src/calendar-strip.css | 34 +++++++++++++++++---- assets/css/src/generic.css | 12 +++++--- assets/css/src/nav.css | 4 +-- assets/css/src/ticket.css | 16 +++++----- assets/js/calendar.js | 9 ++++-- site/config/routes/month-dates.php | 16 +++++----- site/controllers/program.php | 35 ++++++++++++++++++++++ site/snippets/calendar-strip.php | 48 ++++++++++++++++++------------ site/snippets/events-grid.php | 15 +++++++--- site/templates/program.php | 13 ++++++++ 10 files changed, 150 insertions(+), 52 deletions(-) create mode 100644 site/controllers/program.php diff --git a/assets/css/src/calendar-strip.css b/assets/css/src/calendar-strip.css index 1e7e099..222ee79 100644 --- a/assets/css/src/calendar-strip.css +++ b/assets/css/src/calendar-strip.css @@ -5,6 +5,7 @@ width: 100%; display: flex; align-items: center; + z-index: 2; } .calendar-strip__selector { @@ -21,10 +22,25 @@ } .calendar-strip__day { + font-size: var(--font-size-s); transition: opacity 0.2s ease-in-out; } -.calendar-strip__day.active { +.calendar-strip__day button { + text-align: center; +} +.calendar-strip__day button.today { + color: var(--color-salmon); + opacity: 1 !important; +} +.calendar-strip__day button span { + display: block; +} +.calendar-strip__day span:nth-child(1) { + margin-bottom: 0.2rem; +} + +.calendar-strip__day.active span:nth-child(2) { text-decoration: underline; } @@ -41,7 +57,6 @@ top: 100%; width: 100%; max-height: 0; - padding: 0 calc(var(--space-m)); background-color: #fff; z-index: 0; transition: max-height 0.3s ease-in-out; @@ -51,14 +66,23 @@ max-height: 20rem; } -.calendar-strip__sessions { - padding: var(--padding-vertical) 0; +.calendar-strip__session:first-child > a { + border-top: var(--border) !important; +} +.calendar-strip__session:not(:last-child) { + border-bottom: var(--border); } -.calendar-strip__session { +.calendar-strip__session > a { display: grid; grid-template-columns: repeat(5, 1fr); + padding: var(--padding-vertical) var(--space-m); } + +.calendar-strip__session:hover { + background-color: var(--color); +} + .calendar-strip__session:not(:last-child) { margin-bottom: 4rem; } diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css index 818f5c6..352a47d 100644 --- a/assets/css/src/generic.css +++ b/assets/css/src/generic.css @@ -7,7 +7,7 @@ body.progress * { } .grid { - --column-gap: calc(var(--space-m) * 1.5); + --column-gap: calc(var(--space-m) * 1.1); --row-gap: calc(var(--space-m) / 2); --row-length: calc(12 / var(--span)); display: grid; @@ -26,7 +26,7 @@ body.progress * { (var(--column-gap) * var(--column-gap-nbr)) + var(--space-m) * 2 ); --width: calc((100vw - var(--white-space)) / var(--row-length)); - height: calc(var(--width) / 1.4); + height: calc(var(--width) / 1.2); } .grid__item picture img { @@ -36,7 +36,7 @@ body.progress * { .logo { font-weight: normal; font-size: var(--font-size-h2); - transition: font-size 0.3s ease-in-out; + transition: font-size 0.1s cubic-bezier(0.23, 1, 0.32, 1); line-height: 1; } @@ -46,7 +46,7 @@ body.progress * { .logo > *:not(:first-child) { margin-left: 2.27ch; - transition: margin 0.3s ease-in-out; + transition: margin 0.1s cubic-bezier(0.23, 1, 0.32, 1); } .social-icons { @@ -103,3 +103,7 @@ body.progress * { .ticket-link > figure { margin-right: 1rem; } + +.yellow { + background-color: var(--color-yellow); +} diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css index db25b0c..ac1501b 100644 --- a/assets/css/src/nav.css +++ b/assets/css/src/nav.css @@ -2,7 +2,7 @@ position: sticky; top: 0; background-color: #fff; - z-index: 2; + z-index: 3; } /* Nav */ @@ -13,7 +13,7 @@ width: 100%; box-sizing: border-box; top: -34rem; - z-index: 2; + z-index: 4; background-color: var(--color-brown-light); display: grid; grid-template-columns: 2fr 8fr 1fr; diff --git a/assets/css/src/ticket.css b/assets/css/src/ticket.css index 305a2f8..6db5268 100644 --- a/assets/css/src/ticket.css +++ b/assets/css/src/ticket.css @@ -36,25 +36,25 @@ display: inline-flex; } -a:not([disabled]):hover .ticket svg, -.ticket:hover svg { +a:not([disabled]):hover > .ticket svg, +.ticket:not(a[disabled] .ticket):hover svg { animation: vibrate 0.5s forwards; } -.ticket:hover svg path:not(.dot), -a:not([disabled]):hover .ticket svg path:not(.dot) { +.ticket:not(a[disabled] .ticket):hover svg path:not(.dot), +a:not([disabled]):hover > .ticket svg path:not(.dot) { fill: var(--color-salmon); stroke: var(--color-salmon); } -a.to-blank:hover .ticket svg path:not(.dot) { +a.to-blank:hover > .ticket svg path:not(.dot) { fill: #fff; stroke: #fff; } -.ticket:hover svg path.dot, -a:not([disabled]):hover .ticket svg path.dot { +.ticket:not(a[disabled] .ticket):hover svg path.dot, +a:not([disabled]):hover > .ticket svg path.dot { fill: #fff; } -a.to-blank:hover .ticket svg path.dot { +a.to-blank:hover > .ticket svg path.dot { fill: var(--color-salmon); } diff --git a/assets/js/calendar.js b/assets/js/calendar.js index 94a06ab..9619b2a 100644 --- a/assets/js/calendar.js +++ b/assets/js/calendar.js @@ -2,12 +2,17 @@ dayjs.locale("fr"); function getDatesInMonth(month) { const year = dayjs().month(month).year(); - const daysInMonth = dayjs(new Date(year, month, 0)).daysInMonth() + 1; + const daysInMonth = dayjs(new Date(year, month, 0)).daysInMonth(); const dates = {}; for (let day = 1; day <= daysInMonth; day++) { const currentDay = dayjs(new Date(year, month, day)); - dates[parseInt(currentDay.format("DD"))] = []; + const dayInitial = currentDay.format("dd")[0].toUpperCase(); // Get the initial of the day in French + dates[parseInt(currentDay.format("DD"))] = { + sessions: [], + full: currentDay.format("DD-MM-YYYY"), + initial: dayInitial, + }; } return dates; diff --git a/site/config/routes/month-dates.php b/site/config/routes/month-dates.php index e6c42ad..f4a285f 100644 --- a/site/config/routes/month-dates.php +++ b/site/config/routes/month-dates.php @@ -42,10 +42,13 @@ return [ $sessionMonth = $session->date()->toDate('Y-MM'); if ($sessionMonth === $requestMonth) { $day = intval($session->date()->toDate('d')); - $dates[$day][] = array_merge($eventInfos, [ + $dates[$day]['sessions'][] = array_merge($eventInfos, [ + "color" => $event->color()->value(), "day" => $day, "time" => $session->time()->value(), + "place" => $event->place()->value(), "duration" => $event->duration()->value(), + "eventUrl" => $event->url(), ]); }; } @@ -75,18 +78,15 @@ return [ $duration = getTimeDifference($startTime, $endTime); } - $dates[$day][] = array_merge($eventInfos, [ + $dates[$day]['sessions'][] = array_merge($eventInfos, [ + "color" => $event->color()->value(), "day" => $day, "time" => str_replace(':', 'h', $startTime), "duration" => $duration, + "place" => $event->place()->value(), + "eventUrl" => $event->url(), "ticketingUrl" => $ticketingUrl ]); - - $sessionsToSave[] = [ - "date" => substr($session->startDate, 0, 10), - "time" => str_replace(':', 'h', $startTime), - "ticketingUrl" => $ticketingUrl - ]; } } diff --git a/site/controllers/program.php b/site/controllers/program.php new file mode 100644 index 0000000..6ff6aff --- /dev/null +++ b/site/controllers/program.php @@ -0,0 +1,35 @@ +children()->first(); + $today = date('Ymd'); + + $previousEvents = new Pages(); + $nextEvents = new Pages(); + + foreach ($currentSeason->children() as $event) { + $sessions = $event->isMapadoEvent() == 'true' ? $event->remoteSessions() : $event->sessions(); + + $isStillShowing = false; + + foreach ($sessions->toStructure() as $session) { + $sessionDate = str_replace('-', '', $session->date()->toDate('YMMdd')); + + if ($sessionDate >= $today) { + $isStillShowing = true; + break; + } + } + + if ($isStillShowing) { + $nextEvents->add($event); + } else { + $previousEvents->add($event); + } + } + + return [ + 'previousEvents' => $previousEvents, + 'nextEvents' => $nextEvents + ]; +}; \ No newline at end of file diff --git a/site/snippets/calendar-strip.php b/site/snippets/calendar-strip.php index 441c4a9..e2159e1 100644 --- a/site/snippets/calendar-strip.php +++ b/site/snippets/calendar-strip.php @@ -8,6 +8,7 @@ dates: [], targetSessions: [], open: false, + today: dayjs().format('DD-MM-YYYY'), get monthName() { return dayjs().month(this.monthNumb).format('MMMM'); @@ -26,13 +27,12 @@ }, handleDayHover() { - - if (this.date.length > 0) { - this.targetSessions = this.date; + if (this.date.sessions.length > 0) { + this.targetSessions = this.date.sessions; this.open = true } else { setTimeout(() => { - this.targetSessions = this.date; + this.targetSessions = this.date.sessions; }, 100) this.open = false } @@ -50,11 +50,14 @@ @@ -62,19 +65,26 @@
diff --git a/site/snippets/events-grid.php b/site/snippets/events-grid.php index 63fc194..a4c6cdd 100644 --- a/site/snippets/events-grid.php +++ b/site/snippets/events-grid.php @@ -1,11 +1,18 @@
-

+ +

+
count() === 4) { - $span = 3; + $span = null; + if (isset($columns)) { + $span = 12 / $columns; + } else { + $span = 4; + if ($events->count() === 4) { + $span = 3; + } } snippet('event-card', ["event" => $event, "span" => $span]) ?> diff --git a/site/templates/program.php b/site/templates/program.php index e69de29..9fbb9a8 100644 --- a/site/templates/program.php +++ b/site/templates/program.php @@ -0,0 +1,13 @@ + +
+

Programme

+
+
+

À venir — children()->first()->title() ?>

+
+ $nextEvents, 'columns' => 3]) ?> +
+

Événements passés

+
+ $previousEvents, 'columns' => 3]) ?> + \ No newline at end of file