raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-01 02:03:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update image and modal size

Browse Source 
Using a new 'fit' modal size.

On smaller screens, we need to allow the image to shrink. That's a good general rule, but I was hesitant to make it a global rule..
This commit is contained in:
David Cook
2024-02-07 12:35:23 +11:00
parent 98cfc68c3a
commit 5e4dd3864f
4 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/modal_component/modal_component.scss
View File

@@ -18,6 +18,12 @@
p {
margin-bottom: 0.5em;
}
img {
// Ensure image fits in container
max-width: 100%;
height: auto;
}
}
/* prevent arrow on selected admin menu item appearing above modal */

5
app/views/admin/products_v3/_edit_image.html.haml
View File

@@ -1,7 +1,8 @@
= render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true, close_button: false do
= render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true, close_button: false, modal_class: :fit do
%h2= t(".title")
%p= image_tag image.persisted? ? image.url(:product) : Spree::Image.default_image_url(:product)
-# Display image in the same way it appears in the shopfront popup
%p= image_tag image.persisted? ? image.url(:large) : Spree::Image.default_image_url(:large), width: 433, height: 433
-# Submit to controller, because StimulusReflex doesn't support file uploads
= form_for [:admin, product, image],

4
app/webpacker/css/admin/modals.scss
View File

@@ -168,6 +168,10 @@ dialog[open] {
dialog {
top: 6.25rem;
}
.reveal-modal.fit,
dialog.fit {
width: fit-content;
}
.reveal-modal.tiny,
dialog.tiny {
width: 30%;

6
spec/system/admin/products_v3/products_spec.rb
View File

@@ -343,7 +343,7 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
end
expect(page).to have_content /Image has been successfully (updated|created)/
expect(product.image.reload.url(:product)).to match /500.jpg$/
expect(product.image.reload.url(:large)).to match /500.jpg$/
within row_containing_name("Apples") do
expect_page_to_have_image('500.jpg')
@@ -353,14 +353,14 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
context "with existing image" do
let!(:product) { create(:product_with_image, name: "Apples") }
let(:current_img_url) { product.image.url(:product) }
let(:current_img_url) { product.image.url(:large) }
include_examples "updating image"
end
context "with default image" do
let!(:product) { create(:product, name: "Apples") }
let(:current_img_url) { Spree::Image.default_image_url(:product) }
let(:current_img_url) { Spree::Image.default_image_url(:large) }
include_examples "updating image"
end