Gradient fix for transparent background medias and cards #2651

ludoboludo · 2023-05-17T16:33:03Z

PR Summary:

The issue that we're dealing with here is how gradients behave when animation is turned ON vs when it's OFF.

The animation is creating a new stacking context on elements receiving the animate--slide-in due to a transform being applied.
It means the gradient, which was matching the gradient applied on the general background is now based on the element size itself in which it is.

Here we're matching some of those new styles due to animation when no animation is applied so we have some consistency. It's a visual change!

Here is more context.
And a little gif comparison

Why are these changes introduced?

Fixes #2640

What approach did you take?

Because the issue introduced via the animations isn't something we have a fix for at the moment. We're wanting to still keep some consistency between the looks and therefor change how the gradient was applied in certain scenarios.

Other considerations

Decision log

#	Decision	Alternatives	Rationale	Downsides
1	A decision taken was to, for the time being, apply the same behaviour when animations are off. Instead of trying to fix some of the behaviours/changes when animations are on.

Here are some comparison with before and after. What it looked like without animation before and how it looks with the fixes in this PR:

Product cards:

Same color schemes, No gradient

Current:

With fix:

Same color schemes, scheme 1 gradient

Current:

With fix:

Different color schemes, scheme 1 & 2 gradients

Current:

With fix:

Image banner (with container):

Same color schemes, scheme 1 gradient

Different color schemes, scheme 1 & 2 gradients

Image with text:

Different schemes, scheme 1 & 2 gradients

Current:

With fix:

Same scheme, scheme 1 gradient, with shadows

Current:

With fix:

Different schemes, with overlap

Current:

With fix:

Same schemes, with overlap

Current:

With fix:

Multirow:

Scheme 1 with transparent image

Scheme 2 with transparent image

Visual impact on existing themes

Are impacted:

cards (products, blog, collections)
content containers in the image banner and slideshow section
image banner
multirow
collage (added support for gradient for the image and video block)
collapsible content (image background so PNGs work as expected)
video section (image background so PNGs work as expected)

Testing steps/scenarios

Step 1

Demo links

Editor

Checklist

Added PR summary for release notes
Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
Followed theme code principles
Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

ludoboludo · 2023-05-17T20:31:12Z

assets/collapsible-content.css

+.scroll-trigger .collapsible-content__media.gradient {
+  background: transparent;
+}


I wonder if the background transparency should also be applied when the animation isn't on:

Screenshot

Yeah, probably. 👍

Yeah, we should definitely apply transparency here. The full gradients are bound to look weird when they’re crammed into those short, long shapes:

...but also, we display those accordions as transparent within the product details, so making them transparent here would allow merchants to have the Collapsible Content section match that.

Oh sorry in my screenshots I meant for the image specifically and how the shadow either show or not behind the transparent image.

I think if the layout is set to row containers they shouldn't be set to transparent. Cause in this case you might as well set the layout to No container. I don't think it looks pretty, specifically with the radial gradient but that's up to the merchant to pick something nice.
With a different gradient it doesn't look bad:

Ha! I didn't even know that setting existed. 😅 Yeah, I think we're good on that then.

I do think we should make the shadow adjustment you suggested though. 👍

Change should be done for the image transparency 👍

ludoboludo · 2023-05-17T20:32:06Z

assets/video-section.css

+.scroll-trigger:where(.gradient.video-section__media) {
+  background: transparent;
+}


Video section with animation and without.

Comparison screenshot

Is this meant to document that there are no changes between before and after?

assets/component-card.css

ludoboludo · 2023-05-18T16:07:13Z

assets/component-image-with-text.css

+.image-with-text .gradient:not(.color-background-1) {
+  background-attachment: local;
+}


I think this should also be applied when it's .color-background-1 and set to Overlap. Also In that same situation, setting the image background to transparent maybe ? Checkout the border and background applied to the image with a transparent background:

cc: @kmeleta

Right, so in light of our decision to minimize (or completely avoid) background-1 type exceptions, I'm still opting to treat at least the overlap with local gradient in all cases for now. Additionally I feel making the content transparent can end up wonky pretty easily and making the media transparent without the content feels odd to me. But entirely possible still if we want to push back on that more.

Yeah, I'm leaning towards embracing transparent in more places personally. Especially in cases like this, where it's entirely behind a formerly transparent image.

So just to confirm we like what's there right now for overlap? Transparent image (for background-1) and local gradient for content? And local gradient for image and content when not background-1?

I think so, yes. Especially for this overlap version.

In general though, I'm starting to get the feeling that we should make a few more exceptions for background-1. Use cases like this, as well as maybe product cards feel like they could benefit from that.

I know that breaks our consistency decision a little bit, but seeing this in action, I think we'll have slightly better visual outcomes if we make a few more exceptions. I'll do some more testing in the morning and form a more cohesive opinion.

Just closing the loop here: I think we're fine with the cards approach as-is. If merchants want to have the backgrounds be transparent, they can change from "Card" to "Standard" in most cases.

ludoboludo · 2023-05-18T16:18:16Z

assets/component-image-with-text.css

-  width: 100%;
-  height: 100%;


This was not doing anything, that's why we're removing it ?

Removing it fixes a small bug with the placeholder shadow that was preexisting and unrelated to this PR, but it's much uglier when removing persistent gradient on the media like we're doing in this PR https://screenshot.click/19-59-lvmkd-swxu2.mp4

Adding some additional context here since the Image with text section will use newer placeholder images. As far as I can tell, the removal of the width and height here doesn't affect it:

kmeleta · 2023-05-18T16:38:40Z

assets/component-image-with-text.css

+.image-with-text:not(.image-with-text--overlap) .color-background-1 {
+  background: transparent;
+}
+
+.image-with-text .gradient:not(.color-background-1) {
+  background-attachment: local;
+}


This first style is to preserve some of the background-1 cases that are possible in image with text, like these..

The second rule basically removes the fixed global gradient look for all non-background-1 cases so image with text displays the same with and without animations enabled https://screenshot.click/18-32-mrcd0-5ujji.mp4

Can you remind me of the downside to making the background transparent elsewhere (like on Product cards) too? It seems like it would minimize the overall changes for merchants today. If I recall, we had some concerns about shadows overlapping text, but if merchants keep the shadows reasonable I think we'll be okay. 🤔

Example

Before After

For cards I didn't think there were too many concerns other than potential shadow stuff. Though I thought we were interested in "correcting" the way gradients were applied to card style cards anyway so that the gradient was applied in a more expected way. I can be convinced of either. @ludoboludo any thoughts?

Either way is ok for me.
The overlapping shadow was a concern like you said as well as the "continuity" of how the gradient/styles are applied with and without animation.
We wanted to limit the visual differences between those two scenarios so the merchant experience isn't too odd.

As noted above, I think we're good for now. 👍

assets/section-image-banner.css

kmeleta · 2023-05-19T19:22:24Z

assets/component-image-with-text.css

+.image-with-text.image-with-text--overlap .gradient {
+  background-attachment: local;
+}
+


Reminder for us to hopefully comment some of these once we're settled on the specifics.

kjellr · 2023-05-23T19:07:40Z

Thanks for all this! It looks a little wild with some of the more intense gradients, but when you tone things down to some more subtle gradients the overall impression is not too bad.

My main priority in terms of testing before doing a UX approval is making sure our existing themes that use gradients (Sense, Publisher) look alright with these changes. I haven't tested those yet, but I think they'll be mostly okay.

Running low on time to test those scenarios today, but I'll dedicate some time in the morning to dive in. 👍

kjellr · 2023-05-26T11:51:34Z

👋 I found one more small use case I think we should make transparent:

When the card style is set to "Standard" and the color scheme is the background-1, we should make the background behind the images transparent. This is in line with what we do for the Image with Text section — it takes something that's supposed to appear transparent against the background and maintains that appearance.

Current	Expected

melissaperreault · 2023-05-26T15:03:42Z

🔍 I found a bug on Image banner and Slideshow where we don't preserve the color scheme on the container for Scheme 2 and beyond, it stays transparent. Video reference for Slideshow

kmeleta · 2023-05-26T15:23:11Z

I found a bug on Image banner and Slideshow where we don't preserve the color scheme on the container for Scheme 2 and beyond, it stays transparent. Video reference for Slideshow

Oops, should have scoped my other image banner change to background-1. Should be fixed now in this commit 813f863
cc @melissaperreault

ludoboludo · 2023-05-26T15:34:12Z

assets/component-card.css

+  /* Needed for gradient continuity with or without animation */
+  background-attachment: local;
+}
+
 .card .card__inner .card__media {


👋 I found one more small use case I think we should make transparent:

When the card style is set to "Standard" and the color scheme is the background-1, we should make the background behind the images transparent. This is in line with what we do for the Image with Text section — it takes something that's supposed to appear transparent against the background and maintains that appearance.

Current Expected

So the reason this wasn't done was because of image padding on cards. Just for context sharing, say you have a background-1 gradient on the theme. And a section that is using a different colour scheme background. If your cards are using scheme 1 and have some image padding, you'd expect to maybe see that scheme-1 come up. But it wouldn't in this scenario.

But it's probably less likely of a scenario to have all those combinations compared to having PNG images...

Here it is for reference:

And the after version would look like this:

I pushed the fix you suggested 👍

The origin of the Image padding setting is for use cases where a PNG is too close to the container and needs more breathing room so if you display a border to outline each image it's not sitting on the edge of it.

Cool, thanks for the clarification. Yeah, I think what you pushed here makes sense. Merchants can always add a border if they want one. 👍

Yeah or create a specific scheme they can use in that scenario 👌

andrewetchen

Things are looking good. Thanks for all of the comparison screenshots!

Leaving some feedback now but I'll do another pass 👍🏼

andrewetchen · 2023-05-29T16:56:24Z

assets/component-image-with-text.css

-  width: 100%;
-  height: 100%;


Adding some additional context here since the Image with text section will use newer placeholder images. As far as I can tell, the removal of the width and height here doesn't affect it:

assets/collage.css

andrewetchen

Other than the feedback below, I couldn't find anything else that needs attention -- these changes look good to me. Before I approve though, I'd like to get your thoughts on whether this is something that should be tackled now or later.

andrewetchen · 2023-05-29T18:57:50Z

assets/component-image-with-text.css

+.image-with-text .gradient:not(.color-background-1),
+.image-with-text.image-with-text--overlap .gradient {
+  /* Needed for gradient continuity with or without animation */
+  background-attachment: local;


This isn't a blocker. Something I noticed on Safari for the Multirow section is that it seems like the Container color scheme doesn't get 'hidden' from the border 🤔 -- Chrome and FireFox are 🆗

I've added the above Multirow section to the editor link and also, let me know if I'm missing any context here 👍🏼

Desktop Safari

Mobile Safari

andrewetchen

Thanks for updating all of the css comments.

melissaperreault

To be discussed

~~Product image lightbox is not considering the corner radius anymore~~ Edit*: Exists on main

Not a blocker

Little corner visible when we have 3D Lift hover effect turned on. Not a blocker to me! (Video reference)
Product image lightbox is not considering the corner radius anymore

ludoboludo · 2023-05-30T21:56:58Z

To be discussed

Product image lightbox is not considering the corner radius anymore

Not a blocker

Little corner visible when we have 3D Lift hover effect turned on. Not a blocker to me! (Video reference)

Since the product image thing noted has been present for the past few version, it won't be considered a blocker here 👍

kjellr

The remaining issues are all pretty minor (I honestly had trouble figuring out how to reproduce them), so I think they're fine to follow up on later. In the meantime, I think we're good to go.

* Fix color for image in password (#2608) * [Image behavior] fixed background jitter fix on mobile (#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (#2621) * Update reverse scheme (#2626) * [Footer] Remove Global Media settings inheritance from images (#2631) * Send timezone offset as string instead of integer (#2636) * Fix slider scrolling issue (#2635) * Fix background gradient for Related Products. (#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (#2657) * Add default values for color scheme group (#2660) * Revert unwanted changes (#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (#2651) * Fix media, product, and collection cards placeholder (#2682) * Fix missing else for collection cards (#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* made the test/default blog post 3 by default * blog default posts are not mobile responsive and on a slider. created snippet for blog-placeholder that renders into featured-blog with changable arguments * removed commented out code * default blog posts now are modifiable by post-limit and column number presets * reformated code, reverted header back to h1, removed snippet, and made changes as suggested * noticed the blog section needs a margin bottom when color scheme is applied * removed padding from blog and removed date and author presets * Fix link formatting in Related Products heading (#2680) * fix default UI for dropdown and mega menu (#2644) * added vertical padding and made l2 bold to mega menu * added vertical padding to drop down * fixed default UI for dropdown and mega menu * added hover effect to all l2 links and fixed overlapping or mega menu * adding padding to l3 links and fixed hover effect for dropdown * reverted the mega menu back to the current setting * changed horizontal grid gap on mega menu and vertical paddings on dropdown menu * made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container * removed the unnecessary lines of code * removed the text-thickness that was making l2/l3 links a different size from l1 links * added a hover effect over active link * removed uneccessary link size and white space * Add release/v10.0.0 branch fixes to main (#2693) * Fix color for image in password (#2608) * [Image behavior] fixed background jitter fix on mobile (#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (#2621) * Update reverse scheme (#2626) * [Footer] Remove Global Media settings inheritance from images (#2631) * Send timezone offset as string instead of integer (#2636) * Fix slider scrolling issue (#2635) * Fix background gradient for Related Products. (#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (#2657) * Add default values for color scheme group (#2660) * Revert unwanted changes (#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (#2651) * Fix media, product, and collection cards placeholder (#2682) * Fix missing else for collection cards (#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * made the test/default blog post 3 by default * added updated placeholder image * added the different placeholder images, while maintaining ability to edit with presets * blog card theme settings work on default blog posts * removed css that wasn't being used * reverted to original code without theme settings * fixed prettier error by removing extra quotation mark and made test blog default instead of news --------- Co-authored-by: Jon Neill <jonathan.neill@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* Fix color for image in password (Shopify#2608) * [Image behavior] fixed background jitter fix on mobile (Shopify#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (Shopify#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (Shopify#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (Shopify#2621) * Update reverse scheme (Shopify#2626) * [Footer] Remove Global Media settings inheritance from images (Shopify#2631) * Send timezone offset as string instead of integer (Shopify#2636) * Fix slider scrolling issue (Shopify#2635) * Fix background gradient for Related Products. (Shopify#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (Shopify#2657) * Add default values for color scheme group (Shopify#2660) * Revert unwanted changes (Shopify#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (Shopify#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (Shopify#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (Shopify#2651) * Fix media, product, and collection cards placeholder (Shopify#2682) * Fix missing else for collection cards (Shopify#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* made the test/default blog post 3 by default * blog default posts are not mobile responsive and on a slider. created snippet for blog-placeholder that renders into featured-blog with changable arguments * removed commented out code * default blog posts now are modifiable by post-limit and column number presets * reformated code, reverted header back to h1, removed snippet, and made changes as suggested * noticed the blog section needs a margin bottom when color scheme is applied * removed padding from blog and removed date and author presets * Fix link formatting in Related Products heading (Shopify#2680) * fix default UI for dropdown and mega menu (Shopify#2644) * added vertical padding and made l2 bold to mega menu * added vertical padding to drop down * fixed default UI for dropdown and mega menu * added hover effect to all l2 links and fixed overlapping or mega menu * adding padding to l3 links and fixed hover effect for dropdown * reverted the mega menu back to the current setting * changed horizontal grid gap on mega menu and vertical paddings on dropdown menu * made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container * removed the unnecessary lines of code * removed the text-thickness that was making l2/l3 links a different size from l1 links * added a hover effect over active link * removed uneccessary link size and white space * Add release/v10.0.0 branch fixes to main (Shopify#2693) * Fix color for image in password (Shopify#2608) * [Image behavior] fixed background jitter fix on mobile (Shopify#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (Shopify#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (Shopify#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (Shopify#2621) * Update reverse scheme (Shopify#2626) * [Footer] Remove Global Media settings inheritance from images (Shopify#2631) * Send timezone offset as string instead of integer (Shopify#2636) * Fix slider scrolling issue (Shopify#2635) * Fix background gradient for Related Products. (Shopify#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (Shopify#2657) * Add default values for color scheme group (Shopify#2660) * Revert unwanted changes (Shopify#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (Shopify#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (Shopify#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (Shopify#2651) * Fix media, product, and collection cards placeholder (Shopify#2682) * Fix missing else for collection cards (Shopify#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * made the test/default blog post 3 by default * added updated placeholder image * added the different placeholder images, while maintaining ability to edit with presets * blog card theme settings work on default blog posts * removed css that wasn't being used * reverted to original code without theme settings * fixed prettier error by removing extra quotation mark and made test blog default instead of news --------- Co-authored-by: Jon Neill <jonathan.neill@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

ludoboludo added 7 commits May 16, 2023 17:49

Gradient fix for transparent medias

ffd3c40

make cards be the same whether animation is enabled or not

19f6ec0

Merge branch 'release/10.0.0' into gradient-fix-for-media

3d7ccb0

change css selectors to apply even when animation is off for continuity

6b9015a

remove class to edit existing styling and z-index

f27c14e

move CSS in right files

d1890f7

Remove unused CSS

badcfe7

ludoboludo commented May 17, 2023

View reviewed changes

assets/component-card.css Outdated Show resolved Hide resolved

ludoboludo changed the title ~~Gradient fix for transparent medias and cards~~ Gradient fix for transparent background medias and cards May 17, 2023

Add image with text exceptions

e9de3e6

ludoboludo commented May 18, 2023

View reviewed changes

kmeleta reviewed May 18, 2023

View reviewed changes

ludoboludo added 3 commits May 18, 2023 14:11

Merge branch 'release/10.0.0' into gradient-fix-for-media

56c8bf2

fix gradient for cards so shadows aren't overlapping

a17ccdc

tweak background attachement for cards and banner box

6c76131

ludoboludo commented May 18, 2023

View reviewed changes

assets/section-image-banner.css Outdated Show resolved Hide resolved

Image with text tweaks

38492cb

kmeleta assigned ludoboludo and kmeleta May 19, 2023

More iwt tweaks

afef87c

kmeleta reviewed May 19, 2023

View reviewed changes

LucasLacerdaUX self-requested a review May 19, 2023 21:23

ludoboludo marked this pull request as ready for review May 23, 2023 14:01

ludoboludo requested review from kjellr and melissaperreault May 23, 2023 14:02

Merge branch 'release/10.0.0' into gradient-fix-for-media

7a2378c

eugenekasimov self-requested a review May 23, 2023 14:50

Fix image banner mobile style

813f863

ludoboludo commented May 26, 2023

View reviewed changes

ludoboludo and others added 2 commits May 26, 2023 11:38

fix card--standard with transparent background

6bb3269

Merge branch 'release/10.0.0' into gradient-fix-for-media

e008469

andrewetchen self-requested a review May 29, 2023 15:31

andrewetchen reviewed May 29, 2023

View reviewed changes

change CSS comments

f3ae3ab

andrewetchen approved these changes May 29, 2023

View reviewed changes

eugenekasimov approved these changes May 29, 2023

View reviewed changes

switch fix approach to use a transform

af062da

andrewetchen approved these changes May 30, 2023

View reviewed changes

eugenekasimov approved these changes May 30, 2023

View reviewed changes

melissaperreault reviewed May 30, 2023

View reviewed changes

LucasLacerdaUX removed their request for review May 31, 2023 14:01

kjellr approved these changes May 31, 2023

View reviewed changes

ludoboludo merged commit 7e970bd into release/10.0.0 May 31, 2023

ludoboludo deleted the gradient-fix-for-media branch May 31, 2023 14:41

ludoboludo added a commit that referenced this pull request Jun 5, 2023

Gradient fix for transparent background medias and cards (#2651)

b7af052

LucasLacerdaUX mentioned this pull request Jun 21, 2023

[Image with Text] Fixed background position #2530

Closed

14 tasks

SmolSoftBoi pushed a commit to m-k-enterprises/dawn that referenced this pull request Feb 18, 2024

Gradient fix for transparent background medias and cards (Shopify#2651)

79fba65

Gradient fix for transparent background medias and cards #2651

Gradient fix for transparent background medias and cards #2651

Conversation

ludoboludo commented May 17, 2023 • edited by kimberlyoleiro Loading

PR Summary:

Why are these changes introduced?

What approach did you take?

Other considerations

Decision log

Product cards:

Image banner (with container):

Image with text:

Multirow:

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr commented May 23, 2023

kjellr commented May 26, 2023 • edited Loading

melissaperreault commented May 26, 2023 • edited Loading

kmeleta commented May 26, 2023

ludoboludo May 26, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewetchen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewetchen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Desktop Safari

Mobile Safari

andrewetchen left a comment

Choose a reason for hiding this comment

melissaperreault left a comment • edited Loading

Choose a reason for hiding this comment

ludoboludo commented May 30, 2023

kjellr left a comment • edited Loading

Choose a reason for hiding this comment

ludoboludo commented May 17, 2023 •

edited by kimberlyoleiro

Loading

kjellr commented May 26, 2023 •

edited

Loading

melissaperreault commented May 26, 2023 •

edited

Loading

ludoboludo May 26, 2023 •

edited

Loading

melissaperreault left a comment •

edited

Loading

kjellr left a comment •

edited

Loading