Add .media-grid-auto media grid for best-fit column layout

TrestleAdmin · Jun 26, 2024 · 774264a · 774264a
1 parent 16b537e
commit 774264a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/app/assets/bundle/trestle/admin.css b/app/assets/bundle/trestle/admin.css
diff --git a/frontend/css/components/_media-grid.scss b/frontend/css/components/_media-grid.scss
@@ -3,7 +3,7 @@
 .media-grid {
   @include list-unstyled;
 
-  --media-grid-aspect-ratio: #{math.div(4, 3)};
+  --media-grid-aspect-ratio: 4 / 3;
   --media-grid-gap: #{$grid-gutter-width};
   --media-grid-columns: 2;
 
@@ -85,3 +85,9 @@
     --media-grid-columns: 3;
   }
 }
+
+.media-grid-auto {
+  --media-grid-item-size: 240px;
+
+  grid-template-columns: repeat(auto-fill, minmax(var(--media-grid-item-size), 1fr));
+}
diff --git a/sandbox/app/views/admin/components/media/index.html.erb b/sandbox/app/views/admin/components/media/index.html.erb
@@ -48,6 +48,22 @@
     </ul>
   <% end %>
 
+  <%= container do |c| %>
+    <% c.sidebar class: "order-first" do %>
+      <h2>Media Grid <small>(Auto)</small></h2>
+      <p>Add <code>.media-grid-auto</code> and set the <code>--media-grid-item-size</code> CSS variable for best-fit layout.</p>
+      <p>This example also shows specifying a custom aspect ratio using the <code>--media-grid-aspect-ratio</code> CSS variable.</p>
+    <% end %>
+
+    <ul class="media-grid media-grid-auto" style="--media-grid-aspect-ratio: 16 / 9">
+      <% 12.times do |i| %>
+        <li>
+          <figure class="fill"><%= random_image(320, 200, "4-#{i}") %></figure>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+
   <%= container do |c| %>
     <% c.sidebar class: "order-first" do %>
       <h2>Gallery</h2>
@@ -61,8 +77,8 @@
     <ul class="media-grid media-grid-sm" data-controller="gallery">
       <% 12.times do |i| %>
         <li>
-          <%= link_to random_image_url(1920, 1080, "4-#{i}"), data: { gallery_target: "image", width: 1920, height: 1080 } do %>
-            <figure class="fill zoom"><%= random_image(576, 324, "4-#{i}") %></figure>
+          <%= link_to random_image_url(1920, 1080, "5-#{i}"), data: { gallery_target: "image", width: 1920, height: 1080 } do %>
+            <figure class="fill zoom"><%= random_image(576, 324, "5-#{i}") %></figure>
           <% end %>
         </li>
       <% end %>
@@ -73,8 +89,8 @@
     <ul class="media-grid media-grid-sm">
       <% 4.times do |i| %>
         <li>
-          <%= link_to random_image_url(1920, 1080, "5-#{i}"), data: { controller: "lightbox", lightbox_animation_type_value: "fade", lightbox_animation_duration_value: 500, width: 1920, height: 1080 } do %>
-            <figure class="fill zoom"><%= random_image(576, 324, "5-#{i}") %></figure>
+          <%= link_to random_image_url(1920, 1080, "6-#{i}"), data: { controller: "lightbox", lightbox_animation_type_value: "fade", lightbox_animation_duration_value: 500, width: 1920, height: 1080 } do %>
+            <figure class="fill zoom"><%= random_image(576, 324, "6-#{i}") %></figure>
           <% end %>
         </li>
       <% end %>