start event card content and add schedule method

assets/css/src/events-grid.css

@@ -1 +1,7 @@
+.events-grid {
+  padding: var(--space-m);
+}
 
+.events-grid h4 {
+  margin-bottom: 1rem;
+}

assets/css/src/generic.css

@@ -4,5 +4,11 @@ body.progress * {
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--space-m);
+  row-gap: calc(var(--space-m) / 2);
+}
+
+.grid__item {
+  grid-column: span var(--span);
 }

assets/css/src/text.css

@@ -9,7 +9,7 @@
   font-weight: bold;
 }
 body {
-  font-family: "Joker";
+  font-family: "Joker", sans-serif;
   font-size: var(--font-size-body);
 }
 
@@ -30,3 +30,9 @@ h3,
   font-size: var(--font-size-h3);
   font-weight: normal;
 }
+
+h4,
+.h4 {
+  font-size: var(--font-size-h4);
+  font-weight: bold;
+}

assets/css/src/vanilla.css

@@ -0,0 +1,17 @@
+picture {
+  background-color: #ddd;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
+picture img {
+  z-index: 1;
+}
+
+picture svg {
+  position: absolute;
+  opacity: 1;
+  transition: var(--transition-image-opacity);
+  z-index: 0;
+}

assets/css/src/variables.css

@@ -2,6 +2,7 @@
   --border: 1px solid #000;
 
   --font-size-body: 1.25rem;
+  --font-size-h4: 1.5625rem;
   --font-size-h3: 1.5625rem;
   --font-size-h2: 1.875rem;
   --font-size-h1: 2.8125rem;

assets/css/style.css

@@ -2,6 +2,7 @@
 @import url("src/variables.css");
 @import url("src/text.css");
 @import url("src/generic.css");
+@import url("src/vanilla.css");
 @import url("src/nav.css");
 @import url("src/hero.css");
 @import url("src/calendar-strip.css");

site/blueprints/files/default.yml

@@ -0,0 +1,12 @@
+title: Image
+fields:
+  alt:
+    label: Texte alternatif
+    type: text
+    maxlength: 120
+    help: |
+      **Décrivez l'image avec précision et concision.**
+      - affiché à la place de l'image lorsqu'elle ne peut pas être chargée
+      - lu par les lecteurs d'écran des personnes malvoyantes 
+      - lu par les robots des moteurs de recherche
+      [Plus d'infos](https://duckduckgo.com/?q=balise+alt&t=ffab&ia=web)

site/config/config.php

@@ -38,5 +38,9 @@ return [
   ],
   'hooks' => [
     'page.update:after' => require_once(__DIR__ . '/hooks/update-mapado-event.php')
-  ]
+  ],
+  'date'  => [
+    'handler' => 'intl'
+  ],
+  'locale' => 'fr_FR.UTF-8'
 ];

site/models/event.php

@@ -0,0 +1,25 @@
+<?php
+
+class EventPage extends Page {
+  public function schedule() {
+    $sessions = $this->isMapadoEvent() != 'true' ? $this->sessions()->toStructure() : $this->remoteSessions()->toStructure();
+    
+    try {
+      $firstSession = $sessions->first()->date();
+      $lastSession = $sessions->last()->date();
+    } catch (\Throwable $th) {
+      throw new Exception('Can\'t define sessions for event "' . $this->title()->value() . '".', 1);
+    }
+
+    $startDay = intval($firstSession->toDate('d'));
+    $startMonth = $firstSession->toDate('MMMM');
+    $endDay = intval($lastSession->toDate('d'));
+    $endMonth = $lastSession->toDate('MMMM');
+
+    if ($firstSession->toDate('y-M') === $lastSession->toDate('y-M')) {
+      return $startDay . ' - ' . $endDay . ' ' . $endMonth;
+    } else {
+      return $startDay . ' ' . $startMonth . ' - ' . $endDay . ' ' . $endMonth;
+    }
+  }
+}

site/snippets/event-card.php

@@ -1,3 +1,13 @@
-<div class="event-card">
-  <?php snippet('picture', ["file" => $event->files()->first()]) ?>
+<div class="event-card grid__item" style="--span: <?= $span ?>">
+  <?php snippet('picture', ["file" => $event->gallery()->toFiles()->first()]) ?>
+  <div class="event-card__infos">
+    <div>
+      <h5><?= $event->title() ?></h5>
+      <?= svg('assets/images/icons/ticket.svg') ?>
+    </div>
+    <div>
+      <p class="event-card__authors"><?= $event->authors() ?></p>
+      <p><?= $event->schedule() ?></p>
+    </div>
+  </div>
 </div>

site/snippets/events-grid.php

@@ -1,5 +1,8 @@
-<div class="events-grid grid" style="--span: <?= $events->count() ?>;">
-  <?php foreach($events as $event): ?>
-      <?php snippet('event-card', ["event" => $event]) ?>
-  <?php endforeach ?>
-</div>
+<section class="events-grid">
+  <h4>À venir</h4>
+  <div class="grid">
+    <?php foreach($events as $event): ?>
+        <?php snippet('event-card', ["event" => $event, "span" => 12 / $events->count()]) ?>
+    <?php endforeach ?>
+  </div>
+</section>

site/snippets/picture.php

@@ -1,7 +1,7 @@
 <?php
 
 $sizes = '(min-width: 1200px) 25vw, (min-width: 900px) 33vw, (min-width: 600px) 50vw, 100vw';
-$alt = method_exists($file, 'alt') ? $file->alt() : 'Fragment de carte de la France';
+$alt = $file->alt();
 $crop = $crop ?? false;
 
 $webPSrcset = $crop === 'banner' ? $file->crop(1600, 800)->srcset('webp') : $file->srcset('webp');