calendar strip mobile add nav arrows

assets/css/src/calendar-strip.css

@@ -22,6 +22,10 @@
   width: 100%;
 }
 
+.calendar-strip__change-week {
+  display: none;
+}
+
 .calendar-strip__days .week,
 .calendar-strip__days .week > ul {
   display: contents;
@@ -99,7 +103,15 @@
   }
 
   .calendar-strip__selector {
-    width: 7rem;
+    width: 6rem;
+  }
+  .calendar-strip__selector span {
+    margin: auto;
+  }
+
+  .calendar-strip__change-week {
+    font-size: 1.5rem;
+    display: block;
   }
 
   .calendar-strip__calendar-btn {

site/snippets/calendar-strip.php

@@ -79,6 +79,24 @@
       }
     },
 
+    prevWeek() {
+      if (this.currentWeekIndex === 0) {
+        this.prevMonth()
+        this.currentWeekIndex = this.currentWeeks.length - 1
+      } else {
+        this.currentWeekIndex--
+      }
+    },
+
+    nextWeek() {
+      if (this.currentWeekIndex === this.currentWeeks.length - 1) {
+        this.nextMonth()
+        this.currentWeekIndex = 0
+      } else {
+        this.currentWeekIndex++
+      }
+    },
+
     nextMonth() {
       if (this.currentMonthIndex == 12) {
         this.currentMonthIndex = 1
@@ -103,6 +121,8 @@
     <span x-text="monthName"></span>
     <button class="next-month" @click="nextMonth()" :disabled="currentMonthIndex === 8">→</button>
   </div>
+
+  <button @click="prevWeek()" class="calendar-strip__change-week calendar-strip__next-week">←</button>
   
   <ul class="calendar-strip__days">
     <template x-for="(week, weekIndex) in currentWeeks">
@@ -127,6 +147,8 @@
       </li>
     </template>
   </ul>
+
+  <button @click="nextWeek()" class="calendar-strip__change-week calendar-strip__next-week">→</button>
   
   <a href="<?= page('programme')->url() ?>" class="calendar-strip__calendar-btn">calendrier</a>
   

site/snippets/callout.php

@@ -1,4 +1,4 @@
-<section class="callout" style="--color: <?= $color ?>;">
-  <h4><?= $text ?></h4>
+<section class="callout" style="--color: <?= $site->calloutColor() ?>;">
+  <h4><?= $site->calloutText()->inline() ?></h4>
   <a class="ticket-link" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
 </section>

site/templates/event.php

@@ -153,4 +153,7 @@
 </section>
 
 <?php snippet('events-grid', ['title' => 'Pour aller plus loin', 'events' => $page->linkedPages()->toPages()]) ?>
+
+<?php snippet('callout') ?>
+
 <?php snippet('footer') ?>

site/templates/home.php

@@ -32,6 +32,6 @@
 
 <?php snippet('events-grid', ['title' => 'Prochainement', 'events' => $orderedEvents->slice(2, 3)]) ?>
 
-<?php snippet('callout', ['text' => $site->calloutText()->inline(), 'color' => $site->calloutColor()]) ?>
+<?php snippet('callout') ?>
 
 <?php snippet('footer') ?>