From db77e09c61862856a27dce19179dadaa5cdbdcd7 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 10 Sep 2024 16:55:01 +0200
Subject: [PATCH] mobile - style event page

---
 assets/css/src/collapsable-section.css | 32 ++++++++++++++++++++++++++
 assets/css/src/swiper.css              |  9 ++++++++
 site/templates/event.php               | 28 +++++++++++++---------
 3 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/assets/css/src/collapsable-section.css b/assets/css/src/collapsable-section.css
index 3b2057a..9ba34c2 100644
--- a/assets/css/src/collapsable-section.css
+++ b/assets/css/src/collapsable-section.css
@@ -74,3 +74,35 @@
   position: absolute;
   inset: 0;
 }
+
+@media screen and (min-width: 800px) {
+  .session .left-column {
+    display: contents;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .collapsable__content .session {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .collapsable__content .session .ticket-link,
+  .collapsable__content .session .ticket {
+    display: block;
+  }
+
+  .collapsable__content .session {
+    font-size: 1rem;
+  }
+  .collapsable__content .session .ticket-link {
+    font-size: 0.8rem;
+    text-align: right;
+  }
+  .collapsable__content .session .ticket-link figure {
+    margin: 0;
+    margin-bottom: 0.6rem;
+  }
+  .collapsable__content .session svg {
+    width: 1.8rem;
+  }
+}
diff --git a/assets/css/src/swiper.css b/assets/css/src/swiper.css
index fcabc4f..89d33fe 100644
--- a/assets/css/src/swiper.css
+++ b/assets/css/src/swiper.css
@@ -27,3 +27,12 @@
 .swiper-button-prev:hover {
   cursor: url(../../images/icons/arrow-prev.svg) 10 20, auto !important;
 }
+
+@media screen and (max-width: 800px) {
+  #swiper picture {
+    height: 100%;
+  }
+  #swiper picture img {
+    object-fit: contain;
+  }
+}
diff --git a/site/templates/event.php b/site/templates/event.php
index 11edf81..5ea0445 100644
--- a/site/templates/event.php
+++ b/site/templates/event.php
@@ -47,14 +47,18 @@
           $formattedDate = $formatter->format($date);
       ?>
         <div class="session collapsable__item--padding grid">
-          <p><?= $formattedDate ?></p>
-          <p><?= e($session->timeComplement()->isEmpty() == 'true', $session->time(), $session->time() . ' ' . $session->timeComplement()) ?></p>
-          <p><?= $page->place() ?></p>              
-          <?php if ($page->bookingUrl()->isEmpty()): ?>
-            <a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
-          <?php else: ?>
-            <a class="ticket-link" href="<?= $page->bookingUrl()->url() ?>" target="_blank" title="Plateforme de réservation"><?php snippet('ticket') ?> Réserver</a>
-          <?php endif ?>
+          <div class="left-column">
+            <p><?= $formattedDate ?></p>
+            <p><?= e($session->timeComplement()->isEmpty() == 'true', $session->time(), $session->time() . ' ' . $session->timeComplement()) ?></p>
+            <p><?= $page->place() ?></p> 
+          </div>
+          <div class="right-column">
+            <?php if ($page->bookingUrl()->isEmpty()): ?>
+              <a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
+            <?php else: ?>
+              <a class="ticket-link" href="<?= $page->bookingUrl()->url() ?>" target="_blank" title="Plateforme de réservation"><?php snippet('ticket') ?> Réserver</a>
+            <?php endif ?>
+          </div>     
         </div>
       <?php endforeach ?>
       </div>
@@ -91,9 +95,11 @@
             }"  
             class="collapsable__item--padding session grid"
           >
-            <p x-text="dateToFrench(session.date)"></p>
-            <p x-text="session.time"></p>
-            <p><?= $page->place() ?></p>
+            <div class="left-column">
+              <p x-text="dateToFrench(session.date)"></p>
+              <p x-text="session.time"></p>
+              <p><?= $page->place() ?></p>
+            </div>
             <template x-if="session.bookableStock === 0">
               <a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> Complet</a>
             </template>