diff --git a/app/components/card_component.html.erb b/app/components/card_component.html.erb index dd83e6f4f..860ab3ed4 100644 --- a/app/components/card_component.html.erb +++ b/app/components/card_component.html.erb @@ -1,7 +1,14 @@ -
> - <% if header? %> - <%= header%> - <%- end %> +
> + <%- if head_image.present? %> +
+ <%= image_tag head_image, class: "rounded-t-lg w-full" %> +
+ <%= header %> +
+
+ <%- 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 %>
<% end %> - <% if footer? %> <%= footer %> <% end %> diff --git a/app/components/card_component.rb b/app/components/card_component.rb index c305f9f8a..20ce1a2a2 100644 --- 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 index ecdc2adaf..b85e316a7 100644 --- a/app/furniture/marketplace/marketplace_component.html.erb +++ b/app/furniture/marketplace/marketplace_component.html.erb @@ -1,9 +1,5 @@
- - <%= render delivery_area_component %> - <%= render Marketplace::MenuComponent.new(marketplace:, cart:) %> - <%= render cart %>
diff --git a/app/furniture/marketplace/product_component.rb b/app/furniture/marketplace/product_component.rb index 0463c7aa0..e7ebc4fff 100644 --- 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 index 02024da27..e737fceec 100644 --- 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 @@
<% 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| %>

<%= room.description %>

- -
+
<%- 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 index af2c9ac43..e8da5a578 100644 --- a/app/views/rooms/_room.html.erb +++ b/app/views/rooms/_room.html.erb @@ -1,6 +1,9 @@
+ <%- 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) %>