finish program calendrier

assets/css/src/calendar-strip.css

@@ -65,28 +65,3 @@
 .calendar-strip__date.open {
   max-height: 20rem;
 }
-
-.session:first-child > a {
-  border-top: var(--border) !important;
-}
-.session:not(:last-child) {
-  border-bottom: var(--border);
-}
-
-.session__event-link {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  padding: var(--padding-vertical) var(--space-m);
-}
-
-.session:hover {
-  background-color: var(--color);
-}
-
-.session__info {
-  width: 100%;
-}
-
-.session__info > p:not(:last-child) {
-  margin-bottom: 1rem;
-}

assets/css/src/collapsable-section.css

@@ -46,6 +46,10 @@
   grid-template-columns: 1fr 2fr 1fr 2fr;
 }
 
+.sessions--detailed .session {
+  grid-template-columns: 2fr 2.5fr 1fr 1fr 1fr !important;
+}
+
 .collapsable__content .production p:not(:last-child) {
   margin-bottom: 2rem;
 }

assets/css/src/generic.css

@@ -123,3 +123,29 @@
 .yellow {
   background-color: var(--color-yellow);
 }
+
+.session:first-child > a {
+  border-top: var(--border) !important;
+}
+.session:not(:last-child) {
+  border-bottom: var(--border);
+}
+
+.session__event-link {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  padding: var(--padding-vertical) var(--space-m);
+}
+
+.session:hover {
+  background-color: var(--color);
+  cursor: pointer;
+}
+
+.session__info {
+  width: 100%;
+}
+
+.session__info > p:not(:last-child) {
+  margin-bottom: 1rem;
+}

assets/js/script.js

@@ -9,11 +9,16 @@ document.addEventListener("DOMContentLoaded", () => {
     main: document.querySelector("main"),
     footer: document.querySelector(".main-footer"),
     nav: document.querySelector(".main-nav"),
+    jsLinks: document.querySelectorAll(".js-link"),
   };
 
   // Listeners
   nodes.burgerBtn.addEventListener("click", () => expandNav(nodes));
   nodes.closeNavBtn.addEventListener("click", () => closeNav(nodes));
+  nodes.jsLinks.forEach((jsLink) => {
+    const to = jsLink.dataset.href;
+    jsLink.addEventListener("click", () => (location.href = to));
+  });
 
   // Key shortcuts
   window.addEventListener("keyup", (event) => {

site/controllers/program.php

@@ -44,8 +44,10 @@ return function($page) {
       $arraySession['title'] = $event->title()->value();
       $arraySession['authors'] = $event->authors();
       $arraySession['place'] = $event->place();
+      $arraySession['public'] = $event->public();
+      $arraySession['event-url'] = $event->url();
       $arraySession['duration'] = $event->isMapadoEvent() == 'true' ? $event->remoteDuration() : $event->duration();
-      $arraySession['ticketingUrl'] = '';
+      $arraySession['ticketingUrl'] = $event->isMapadoEvent() == 'true' ? $session->ticketingUrl() : false;
       $arraySession['bookableStock'] = $event->isMapadoEvent() == 'true' ? $session->bookableStock()->value() : 'free';
       $arraySession['color'] = $event->color();
       $currentSeasonSessions[] = $arraySession;

site/templates/program.php

@@ -8,6 +8,10 @@
       const urlParams = new URLSearchParams(queryString);
       const tab = urlParams.get('tab');
       return tab;
+    },
+    goTo(event, href) {
+      if (event.target.tagName === 'A') return
+      location.href = href
     }
   }"
 >
@@ -67,7 +71,6 @@
       <div class="program-content__events">
         <section class="collapsable-sections">
           <?php foreach($currentSeasonSessions as $month => $sessions): ?>
-            
             <?php if (count($sessions) > 0): ?>
               <?php snippet('collapsable-section', ['title' => $month, 'sessions' => true], slots: true) ?>
                 <?php slot('content') ?>
@@ -84,40 +87,47 @@
                         throw new Exception($session['title'], 1);
                       }
                     ?>
-                    <li class="session" style="--color: <?= $session['color'] ?>">
+                    <li class="session grid js-link" style="--color: <?= $session['color'] ?>" @click="goTo(event, '<?= $session['event-url'] ?>')" title="En savoir plus">
-                      <a class="session__event-link">
+                      <div class="session__info">
-                        <div class="session__info">
+                        <p><?= $formattedDate ?></p>
-                          <p><?= $formattedDate ?></p>
+                        <p><?= $session['time'] ?><?php e($endTime, ' - ' . $endTime) ?></p>
-                          <p><?= $session['time'] ?><?php e($endTime, ' - ' . $endTime) ?></p>
+                      </div>
-                        </div>
+                      <div class="session__info">
-                        <div class="session__info">
+                        <p><strong><?= $session['title'] ?></strong></p>
-                          <p><strong><?= $session['title'] ?></strong></p>
+                        <p><?= $session['authors'] ?></p>
-                          <p><?= $session['authors'] ?></p>
+                      </div>
-                        </div>
+                      <div class="session__info">
-                        <div class="session__info">
+                        <?php if (strlen($session['duration']) > 0 || strlen($session['public']) > 0): ?>
-                          <p><?= $session['place'] ?></p>
+                          <p>
-                        </div>
+                            <?php if (strlen($session['duration']) > 0): ?>
-                        <div class="session__info">
+                              Durée : <?= $session['duration'] ?><br />
-                          <?php if ($session['bookableStock'] === 'free'): ?>
-                            <a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
-                          <?php else: ?>
-                            <?php if ($session['bookableStock'] == 0): ?>
-                              <a class="ticket-link" title="Plateforme de réservation" disabled><?php snippet('ticket') ?> Complet</a>
-                            <?php elseif ($session['bookableStock'] < option('stockThreshold')): ?>
-                              <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?> Plus que quelques places !</a>
-                            <?php else: ?>
-                              <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?> Billetterie</a>
                             <?php endif ?>
-                          <?php endif ?>
+                            <?php if (strlen($session['public']) > 0): ?>
-                        </div>
+                              <?= $session['public'] ?>
-                      </a>
+                            <?php endif ?>
+                          </p>
+                        <?php endif ?>
+                      </div>
+                      <div class="session__info">
+                        <p><?= $session['place'] ?></p>
+                      </div>
+                      <div class="session__info">
+                        <?php if ($session['bookableStock'] === 'free'): ?>
+                          <a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?>Entrée libre</a>
+                        <?php elseif ($session['bookableStock'] == 0): ?>
+                          <a class="ticket-link" title="Séance complète" disabled><?php snippet('ticket') ?>Complet</a>
+                        <?php elseif ($session['bookableStock'] < option('stockThreshold')): ?>
+                          <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?>Plus que quelques places !</a>
+                        <?php else: ?>
+                          <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?>Billetterie</a>
+                        <?php endif ?>
+                      </div>
                     </li>
                     <?php endforeach ?>
                   </ul>
                 <?php endslot() ?>
               <?php endsnippet() ?>
             <?php endif ?>
-          
           <?php endforeach ?>
         </section>
       </div>