events-grid - finish

assets/css/src/events-grid.css

@@ -10,14 +10,22 @@
   margin-bottom: calc(var(--space-m) / 2);
 }
 
+.event-card__infos h5 {
+  max-width: 95%;
+}
+
+.event-card__infos .ticket {
+  margin-top: 0.3rem;
+}
+
 .event-card__infos > div {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  display: flex;
+  justify-content: space-between;
 }
 .event-card__infos > div:first-child {
   margin-bottom: calc(var(--space-m) / 2);
 }
 
 .event-card__infos > div > *:not(h5):last-child {
-  place-self: end;
+  /* place-self: end; */
 }

assets/css/src/generic.css

@@ -5,6 +5,7 @@ body.progress * {
 .grid {
   --column-gap: calc(var(--space-m) * 1.5);
   --row-gap: calc(var(--space-m) / 2);
+  --row-length: calc(12 / var(--span));
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   column-gap: var(--column-gap);
@@ -16,8 +17,11 @@ body.progress * {
 }
 
 .grid__item picture {
-  --white-space: calc(var(--column-gap) + var(--space-m) * 2);
-  --width: calc((100vw - var(--white-space)) / 2);
+  --column-gap-nbr: var(--row-length) - 1;
+  --white-space: calc(
+    (var(--column-gap) * var(--column-gap-nbr)) + var(--space-m) * 2
+  );
+  --width: calc((100vw - var(--white-space)) / var(--row-length));
   height: calc(var(--width) / 1.4);
 }
 
@@ -59,6 +63,10 @@ body.progress * {
   }
 }
 
+.ticket {
+  display: inline-flex;
+}
+
 .ticket:hover svg {
   animation: vibrate 0.5s forwards;
 }

site/blueprints/pages/event.yml

@@ -35,6 +35,7 @@ tabs:
             width: 1/2
             placeholder: 1h20
             disabled: true
+            help: Nécessite **qu'une séance au moins ait une heure de fin** sur Mapado.
             when:
               isMapadoEvent: true
       - width: 1/2

site/snippets/event-card.php

@@ -1,17 +1,23 @@
 <div class="event-card grid__item" style="--span: <?= $span ?>">
-  <a href="<?= $event->url() ?>" title="Voir le détail">
+  <a href="<?= $event->url() ?>" title="Voir l'événément">
     <?php snippet('picture', ["file" => $event->gallery()->toFiles()->first()]) ?>
+  </a>
     <div class="event-card__infos">
       <div>
-        <h5><?= $event->title() ?></h5>
+        <a href="<?= $event->url() ?>" title="Voir l'événément">
+          <h5><?= $event->title() ?></h5>
+        </a>
         <?php if ($event->isMapadoEvent() == 'true'): ?>
           <?php snippet('ticket', ['link' => 'https://cdn-besancon.mapado.com/event/' . $event->mapadoSlug()]) ?>
         <?php endif ?>
       </div>
       <div>
-        <div class="event-card__authors"><?= $event->authors() ?></div>
-        <p><?= $event->schedule() ?></p>
+        <div class="event-card__authors">
+          <a href="<?= $event->url() ?>" title="Voir l'événément">
+            <?= $event->authors() ?>
+          </a>
+        </div>
+        <a href="<?= $event->url() ?>" title="Voir l'événément"><p><?= $event->schedule() ?></p></a>
       </div>
     </div>
-  </a>
 </div>

site/templates/home.php

@@ -23,9 +23,11 @@
     'asc'
   );
 
-  snippet('events-grid', ['events' => $orderedEvents->limit(2)]) 
+    snippet('events-grid', ['events' => $orderedEvents->slice(0, 2)]) 
 ?>
 
 <?php snippet('newsletter-section') ?>
 
+<?php snippet('events-grid', ['events' => $orderedEvents->slice(2, 5)]) ?>
+
 <?php snippet('footer') ?>