🌸 Section#hero_image: takes less screen real-estate

- zinc-collective#1961 - zinc-collective#2194 This brings the hero image to the Section, and makes it take up a reasonable amount of space.
zinc-collective · Mar 25, 2024 · c6310eb · c6310eb
1 parent 361f7cc
commit c6310eb
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss
@@ -5,7 +5,7 @@
   }
 
   main {
-    @apply mx-2 flex-1 flex flex-col;
+    @apply flex-1 flex flex-col;
     > :last-child {
       @apply mb-2;
     }

diff --git a/app/models/media.rb b/app/models/media.rb
@@ -4,6 +4,7 @@ class Media < ApplicationRecord
   # We rounded up.
   # @see https://www.ios-resolution.com/
   FULL_WIDTH_16_BY_9 = [1290, 726]
+  FULL_WIDTH_SHORT = [1728, 480]
 
   # NOTE: Dependent destroy is defaulted, but when it becomes important to
   # separate the destroy request and purge operations, let's add the

diff --git a/app/views/rooms/_room.html.erb b/app/views/rooms/_room.html.erb
@@ -1,9 +1,9 @@
+<%- if room.hero_image&.upload.present? %>
+  <%= image_tag room.hero_image&.upload&.variant(resize_to_fill: Media::FULL_WIDTH_SHORT), class: "w-full" %>
+<%- end %>
 <div class="flex flex-col content-between justify-end mx-auto max-w-7xl sm:px-6 lg:px-8">
   <div class="grow mx-auto w-full">
     <section id="furnitures">
-      <%- if room.hero_image&.upload.present? %>
-        <%= image_tag room.hero_image&.upload&.variant(resize_to_fill: Media::FULL_WIDTH_16_BY_9), class: "w-full" %>
-      <%- end %>
       <%= render room.gizmos.rank(:slot) %>
     </section>
   </div>