🌸✨ SectionNavigation and Section: Show Section#hero_image (zinc…

…-collective#2188)
zinc-collective · Mar 25, 2024 · a90d951 · a90d951
1 parent b2aa796
commit a90d951
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 24 deletions.
diff --git a/app/components/card_component.html.erb b/app/components/card_component.html.erb
@@ -1,7 +1,14 @@
-<div <%==attributes(classes: "shadow rounded-lg bg-white group-hover:bg-slate-50 flex flex-col justify-between") %>>
- <% if header? %>
-  <%= header%>
- <%- end %>
+<div <%==attributes(classes: "shadow rounded-lg bg-white group-hover:bg-slate-50 flex flex-col justify-between overflow-hidden") %>>
+  <%- if head_image.present? %>
+    <figure>
+      <%= image_tag head_image, class: "rounded-t-lg w-full" %>
+      <figcaption class="px-2 pt-4 sm:px-4">
+        <%= header %>
+      </figcaption>
+    </figure>
+  <%- else %>
+    <%= header %>
+  <%- end %>
   <%#
     NOTE: content? is not always working as described, and is returning a proc in some cases rather than a boolean
   %>
@@ -10,7 +17,6 @@
       <%= content %>
     </div>
   <% end %>
-
   <% if footer? %>
     <%= footer %>
   <% end %>

diff --git a/app/components/card_component.rb b/app/components/card_component.rb
@@ -1,5 +1,16 @@
 class CardComponent < ApplicationComponent
-  HEADER_VARIANTS = {default: "p-2 sm:p-4", no_padding: ""}
+  attr_accessor :media
+
+  def initialize(media: nil, **kwargs)
+    super(**kwargs)
+
+    self.media = media
+  end
+
+  HEADER_VARIANTS = {
+    default: "p-2 sm:p-4",
+    no_padding: ""
+  }
   renders_one :header, ->(variant: :default, &block) {
     content_tag(:header, class: HEADER_VARIANTS.fetch(variant), &block)
   }
@@ -14,4 +25,8 @@ class CardComponent < ApplicationComponent
     classes += " rounded-t-none" unless content? || header?
     content_tag(:footer, class: classes, &block)
   }
+
+  def head_image
+    media&.upload&.variant(resize_to_fill: Media::FULL_WIDTH_16_BY_9)
+  end
 end
diff --git a/app/furniture/marketplace/marketplace_component.html.erb b/app/furniture/marketplace/marketplace_component.html.erb
@@ -1,9 +1,5 @@
 <div class="grid grid-cols-1 gap-6">
-
-
   <%= render delivery_area_component %>
-
   <%= render Marketplace::MenuComponent.new(marketplace:, cart:) %>
-
   <%= render cart %>
 </div>
diff --git a/app/furniture/marketplace/product_component.rb b/app/furniture/marketplace/product_component.rb
@@ -13,12 +13,8 @@ def edit_button
       super(title: t("marketplace.products.edit.link_to", name: name), href: location(:edit))
     end
 
-    # 16:9 of 1290 is 1290:725.625
-    # We rounded up.
-    # @see https://www.ios-resolution.com/
-    FULL_WIDTH_16_BY_9 = [1290, 726]
     def hero_image
-      product.photo.variant(resize_to_fill: FULL_WIDTH_16_BY_9)
+      product.photo.variant(resize_to_fill: Media::FULL_WIDTH_16_BY_9)
     end
 
     def tax_rates

diff --git a/app/furniture/section_navigation/section_navigations/_section_navigation.html.erb b/app/furniture/section_navigation/section_navigations/_section_navigation.html.erb
@@ -1,13 +1,8 @@
 <div class="grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
   <% policy_scope(section_navigation.rooms).each do |room| %>
     <%= link_to polymorphic_path(room.location), id: dom_id(room, :link_to), class: "group no-underline" do %>
-      <%= render CardComponent.new(classes:
-       "flex flex-col h-full justify-between") do |card| %>
-
-
+      <%= render CardComponent.new(media: room.hero_image, classes: "flex flex-col justify-between") do |card| %>
         <p><%= room.description %></p>
-
-
         <footer class="text-2xl text-justify font-semibold flex justify-between items-baseline">
           <h3>
             <%= room.name %>

diff --git a/app/models/media.rb b/app/models/media.rb
@@ -1,5 +1,10 @@
 # The Media resource manages file uploads to the platform
 class Media < ApplicationRecord
+  # 16:9 of 1290 is 1290:725.625
+  # We rounded up.
+  # @see https://www.ios-resolution.com/
+  FULL_WIDTH_16_BY_9 = [1290, 726]
+
   # NOTE: Dependent destroy is defaulted, but when it becomes important to
   # separate the destroy request and purge operations, let's add the
   # `dependent: :purge_later` option.

diff --git a/app/views/furnitures/_furniture.html.erb b/app/views/furnitures/_furniture.html.erb
@@ -1,7 +1,6 @@
 <% edit_href = nil %>
 <% edit_href = furniture.location(:edit) if furniture.configurable? %>
 <% edit_href = furniture.to_kind_class.location(:edit) if furniture.to_kind_class.has_controller_edit? %>
-
 <section id="<%= dom_id(furniture) %>" class="mt-4 relative">
   <%- if local_assigns[:editing] %>
     <header class="flex border-b border-dashed border-orange-500 justify-between">
@@ -16,15 +15,14 @@
                         title: t('.edit_title', name: furniture.furniture.model_name.human.titleize),
                         scheme: :secondary) %>
         <%- end %>
-
         <%= render ButtonComponent.new(
                       label: t('icons.destroy'),
                       href: [furniture.room.space, furniture.room, furniture],
                       title: t('.remove_title', name: furniture.furniture.model_name.human.titleize),
                       method: :delete,
                       confirm: t('.confirm_destroy'),
                       scheme: :secondary) %>
-        </div>
+      </div>
     </header>
     <%- if local_assigns[:include_form] %>
       <%= render partial: 'furnitures/form', locals: { furniture: furniture } %>

diff --git a/app/views/rooms/_room.html.erb b/app/views/rooms/_room.html.erb
@@ -1,6 +1,9 @@
 <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>