start program page

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

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

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;

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

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;

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

site/controllers/program.php

@@ -0,0 +1,35 @@
+<?php
+
+return function($page) {
+  $currentSeason = $page->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
+  ];
+};

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 @@
     <template x-for="(date, index) in dates">
       <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''">
         <button 
-          x-text="index" 
-          :disabled="date.length === 0 ? true : false" 
-          :title="date.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
+          :class="date.full === today ? 'today' : ''"
+          :disabled="date.sessions.length === 0 ? true : false" 
+          :title="date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
           @mouseenter="handleDayHover()"
-        ></button>
+        >
+        <span x-text="date.initial"></span>
+        <span x-text="index"></span>
+      </button>
       </li>
     </template>
   </ul>
@@ -62,19 +65,26 @@
   <div class="calendar-strip__date" :class="open ? 'open' : ''">
     <ul class="calendar-strip__sessions">
       <template x-for="session in targetSessions">
-        <li class="calendar-strip__session">
-          <div x-html="`${session.day} ${monthName}<br><br>${session.time}`"></div>
-          <div>
-            <p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
-            <p x-html="session.authors"></p>
-          </div>
-          <div x-text="`${session.duration}`"></div>
-          <div x-text="`${session.place}`"></div>
-          <template x-if="session.ticketingUrl">
+        <li class="calendar-strip__session" :style="'--color: ' + session.color">
+          <a :href="session.eventUrl" title="En savoir plus">
+            <div x-html="`${session.day} ${monthName}<br><br>${session.time}`"></div>
             <div>
-              <a :href="session.ticketingUrl" target="_blank" title="Accéder à la billetterie">Billetterie</a>
+              <p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
+              <p x-html="session.authors"></p>
             </div>
-          </template>
+            <div x-text="`${session.duration}`"></div>
+            <div x-text="`${session.place}`"></div>
+            <template x-if="session.ticketingUrl">
+              <div>
+                <a class="ticket-link" :href="session.ticketingUrl" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
+              </div>
+            </template>
+            <template x-if="!session.ticketingUrl">
+              <div>
+                <a class="ticket-link" target="_blank" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
+              </div>
+            </template>
+          </a>
         </li>
       </template>
     </ul>

site/snippets/events-grid.php

@@ -1,11 +1,18 @@
 <section class="events-grid">
-  <h4><?= $title ?></h4>
+  <?php if (isset($title)): ?>
+    <h4><?= $title ?></h4>
+  <?php endif ?>
   <div class="grid">
     <?php foreach($events as $event): ?>
         <?php 
-          $span = 4;
-          if ($events->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]) 
         ?>

site/templates/program.php

@@ -0,0 +1,13 @@
+<?php snippet('header') ?>
+<section class="page-title">
+  <h1>Programme</h1>
+</section>
+<section class="yellow">
+  <h2>À venir — <?= $page->children()->first()->title() ?></h2>
+</section>
+<?php snippet('events-grid', ['events' => $nextEvents, 'columns' => 3])  ?>
+<section class="yellow">
+  <h2>Événements passés</h2>
+</section>
+  <?php snippet('events-grid', ['events' => $previousEvents, 'columns' => 3])  ?>
+<?php snippet('footer') ?>