From ea0cb004aad64578c6ba855b8a0aa0cd7ed8e7e0 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 12 Sep 2024 15:39:44 +0200
Subject: [PATCH] add program lines style mobile

---
 assets/css/src/collapsable-section.css | 26 ++++++++--
 assets/css/src/generic.css             |  7 +++
 assets/css/src/variables.css           |  1 +
 site/controllers/program.php           |  2 +-
 site/snippets/header.php               |  2 +-
 site/templates/program.php             | 68 ++++++++++++++------------
 6 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/assets/css/src/collapsable-section.css b/assets/css/src/collapsable-section.css
index 9ba34c2..751d49c 100644
--- a/assets/css/src/collapsable-section.css
+++ b/assets/css/src/collapsable-section.css
@@ -76,14 +76,17 @@
 }
 
 @media screen and (min-width: 800px) {
-  .session .left-column {
+  .session .left-column,
+  .session .right-column {
     display: contents;
   }
 }
 
 @media screen and (max-width: 800px) {
   .collapsable__content .session {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr !important;
+    column-gap: 9vw;
+    font-size: 1rem;
   }
 
   .collapsable__content .session .ticket-link,
@@ -91,9 +94,6 @@
     display: block;
   }
 
-  .collapsable__content .session {
-    font-size: 1rem;
-  }
   .collapsable__content .session .ticket-link {
     font-size: 0.8rem;
     text-align: right;
@@ -105,4 +105,20 @@
   .collapsable__content .session svg {
     width: 1.8rem;
   }
+
+  [data-template="program"] .collapsable__content .session__info--ticket {
+    order: -1;
+  }
+
+  [data-template="program"] .collapsable__content .right-column {
+    font-size: var(--font-size-s);
+    text-align: right;
+  }
+
+  .session .right-column {
+    justify-self: end;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
 }
diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css
index 0364877..25a81d8 100644
--- a/assets/css/src/generic.css
+++ b/assets/css/src/generic.css
@@ -200,7 +200,14 @@ img.show {
   opacity: 1;
 }
 
+.mobile-group {
+  display: contents;
+}
+
 @media screen and (max-width: 800px) {
+  .mobile-group {
+    display: block;
+  }
   .logo {
     font-size: 6vw;
   }
diff --git a/assets/css/src/variables.css b/assets/css/src/variables.css
index ccebb59..74fa6ea 100644
--- a/assets/css/src/variables.css
+++ b/assets/css/src/variables.css
@@ -49,6 +49,7 @@
     --font-size-h4: 1.25rem;
     --font-size-h5: 1.25rem;
     --font-size-m: 0.9375rem;
+    --font-size-s: 0.8125rem;
 
     --padding-vertical: 1rem;
   }
diff --git a/site/controllers/program.php b/site/controllers/program.php
index 15b9827..2f92339 100644
--- a/site/controllers/program.php
+++ b/site/controllers/program.php
@@ -30,7 +30,7 @@ function createArraySession($event, $session) {
   $arraySession = $session->toArray();
   
   $arraySession['title'] = $event->title()->value();
-  $arraySession['authors'] = $event->authors();
+  $arraySession['authors'] = $event->authors()->inline();
   $arraySession['place'] = $event->place();
   $arraySession['public'] = $event->public();
   $arraySession['event-url'] = $event->url();
diff --git a/site/snippets/header.php b/site/snippets/header.php
index e33a8a8..cd8ba96 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -32,7 +32,7 @@
     <?php if ($page->color()->exists()): ?>
         <style>
           :root {
-            --color-accent: <?= $page->color() ?>;
+            --color-accent: <?= e($page->color()->isNotEmpty() == 'true', $page->color(), '#000') ?>;
           }
         </style>
     <?php endif ?>
diff --git a/site/templates/program.php b/site/templates/program.php
index 4b4c8ac..3048899 100644
--- a/site/templates/program.php
+++ b/site/templates/program.php
@@ -101,39 +101,45 @@
                   ?>
                     <template x-if="tab === 'Calendrier' || ('<?= $session['categories'] ?>'.length > 0 && tab.includes('<?= $session['categories'] ?>'))">
                     <li class="collapsable__item--padding session grid js-link" style="--color: <?= $session['color'] ?>">
-                      <div class="session__info">
-                        <p><?= $formattedDate ?></p>
-                        <p><?= $session['time'] ?><?php e($endTime, ' - ' . $endTime) ?></p>
+                      <div class="left-column">
+                        <div class="session__info">
+                          <p><?= $formattedDate ?></p>
+                          <p><?= $session['time'] ?><?php e($endTime, ' - ' . $endTime) ?></p>
+                        </div>
+                        <div class="session__info">
+                          <p><strong><?= $session['title'] ?></strong></p>
+                          <p><?= $session['authors'] ?></p>
+                        </div>
                       </div>
-                      <div class="session__info">
-                        <p><strong><?= $session['title'] ?></strong></p>
-                        <p><?= $session['authors'] ?></p>
-                      </div>
-                      <div class="session__info">
-                        <?php if (strlen($session['duration']) > 0 || strlen($session['public']) > 0): ?>
-                          <p>
-                            <?php if (strlen($session['duration']) > 0): ?>
-                              Durée : <?= $session['duration'] ?><br />
+                      <div class="right-column">
+                        <div class="mobile-group">
+                          <div class="session__info">
+                            <?php if (strlen($session['duration']) > 0 || strlen($session['public']) > 0): ?>
+                              <p>
+                                <?php if (strlen($session['duration']) > 0): ?>
+                                  Durée : <?= $session['duration'] ?><br />
+                                <?php endif ?>
+                                <?php if (strlen($session['public']) > 0): ?>
+                                  <?= $session['public'] ?>
+                                <?php endif ?>
+                              </p>
                             <?php endif ?>
-                            <?php if (strlen($session['public']) > 0): ?>
-                              <?= $session['public'] ?>
-                            <?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'] < (($session['totalStock'] / 100) * 25)): ?>
-                          <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>
+                          <div class="session__info">
+                            <p><?= $session['place'] ?></p>
+                          </div>
+                        </div>
+                        <div class="session__info session__info--ticket">
+                          <?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'] < (($session['totalStock'] / 100) * 25)): ?>
+                            <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>
                       </div>
                       <a class="event-link" href="<?= $session['event-url'] ?>" title="En savoir plus"></a>
                     </li>