Merge pull request #58 from thekid/feature/odd-preview

Balance layout for odd number of preview images
thekid · Feb 25, 2024 · 676e974 · 676e974
2 parents 314f78e + 9bdbd19
commit 676e974
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
@@ -514,14 +514,18 @@
       grid-template-columns: 1fr;
     }
 
-    .images.size-1 {
+    .images.is-single {
       grid-template-columns: 1fr;
     }
 
-    .images.size-1 video {
+    .images.is-single video {
       aspect-ratio: auto;
     }
 
+    .images:where(.is-odd) .image:first-child {
+      grid-column: 1 / 3;
+    }
+
     .image img, .image video {
       aspect-ratio: 15 / 10;
       object-fit: cover;
@@ -665,6 +669,10 @@
         grid-template-columns: 1fr;
       }
 
+      .images .image:first-child {
+        grid-column: 1;
+      }
+
       .images.overview {
         grid-template-columns: 1fr 1fr;
       }

diff --git a/src/main/handlebars/partials/images.handlebars b/src/main/handlebars/partials/images.handlebars
@@ -1,4 +1,4 @@
-<div class="images {{style}} size-{{size in.images}}">
+<div class="images {{style}} is-{{size-class (size in.images)}}">
   {{#each in.images}}
     <div class="image">
       {{#if is.video}}

diff --git a/src/main/php/de/thekid/dialog/Helpers.php b/src/main/php/de/thekid/dialog/Helpers.php
@@ -32,6 +32,15 @@ public function helpers() {
       if ($time > $until) return 'passed';
       return 'current';
     };
+    yield 'size-class' => function($node, $context, $options) {
+      $s= (int)$options[0];
+      return match {
+        0 === $s => 'empty',
+        1 === $s => 'single',
+        1 === $s % 2 => 'odd',
+        default => 'even',
+      };
+    };
     yield 'route' => function($node, $context, $options) {
       $entry= $options[0];
       if (isset($entry['is']['journey'])) {