Fix misalignment of total items in quick order list #2923

eugenekasimov · 2023-07-28T23:22:56Z

PR Summary:

This PR fixes:

misalignment of total items element in quick order list.
the issue when images were cut in the quick order list if the size of typography was increased higher than 100% .

Why are these changes introduced?

Fixes #2921.

What approach did you take?

Set a width for the .quick-order-list__total-itemselement same as the input component and add same margin as padding we use for the input in the table.
Changed a bit the way we calculate the padding of the input element to account for icon-info which is always 15px.
Added width: 100% to .variant-item__image

Visual impact on existing themes

Testing steps/scenarios

Go to a product page and add Quick Order List section.
Make sure that total items is aligned with the inputs in the table.
Play with different theme settings such as typography (heading and body font sizes), input border and make sure the total-items element is still aligned.
Make sure that images in the Quick Order List are not cut.

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

assets/quick-order-list.css

sections/quick-order-list.liquid

assets/quick-order-list.css

assets/quantity-popover.css

assets/quick-order-list.css

sections/quick-order-list.liquid

sofiamatulis

Looks good 🎉 Added small nitpicks

sofiamatulis · 2023-08-02T13:49:37Z

assets/quick-order-list.css

@@ -562,9 +563,14 @@ quick-order-list-remove-button:hover .icon-remove {
  }

  .quick-order-list__total-items {
-    padding-left: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)/ 4) + 4.5rem);
+    width: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)));


Since we are setting the width, perhaps it makes sense to center align total items to account for long translations:

https://screenshot.click/02-47-l0f8z-3y6qy.mp4

That sounds reasonable. Added here.

sections/quick-order-list.liquid

edmund-teh

Sorry, @eugenekasimov... I'm still seeing misalignment on products that have Volume pricing/quantity rules on some variants and not on others.

See reference here: https://screenshot.click/Still-misalignment.png
This product: A/ Image sizing test – 3D models and video
https://os2-demo.myshopify.com/products/test-3d-models-video

FYI, I'm testing and playing with font-scaling and different font styles too in the global settings.

eugenekasimov · 2023-08-02T17:34:42Z

Sorry, @eugenekasimov... I'm still seeing misalignment on products that have Volume pricing/quantity rules on some variants and not on others.

See reference here: https://screenshot.click/Still-misalignment.png This product: A/ Image sizing test – 3D models and video https://os2-demo.myshopify.com/products/test-3d-models-video

FYI, I'm testing and playing with font-scaling and different font styles too in the global settings.

Good catch @edmund-teh. I updated, it should be fine now.

@sofiamatulis just FYI due to this👆 issue I completely changed my approach and found a way to significantly simplify it. Most of the previous comments are not relevant anymore :)

I bit more context. Previously, the inputs were not aligned between rows if some of them had info-icon and some didn't. So, I aligned them no matter if they have info-icon or not and added the same calculation for total-items. It should good now.

edmund-teh

This is working really well now @eugenekasimov! Thanks so much.

sofiamatulis

Works well! I think well still need to address this: #2923 (comment)

andrewetchen

LGTM!

* upstream/main: (205 commits) Fix for small screens with large fonts don't fit all content (Shopify#2946) Adjust quantity rules margin (Shopify#2948) Update Social media settings defaults to remove Shopify links (Shopify#2830) added json to barcode to pass gtin as a json string (Shopify#2804) Fixed extra margin spacing in collage section when header is empty (Shopify#2770) Track state of mouseenter event (Shopify#2934) Fix misalignment of total items in quick order list (Shopify#2923) Hide vol pricing and qty rules when variant is unavailable (Shopify#2889) Fix font family for quick order list (Shopify#2888) v11.0.0 version bump and release notes (Shopify#2916) Revert "v11.0.0 version bump and release notes (Shopify#2906)" (Shopify#2915) Update quantity-popover.css v11.0.0 version bump and release notes (Shopify#2906) Fix social list styles loading (Shopify#2900) Fix an error (Shopify#2903) Fix hardcoded info color (Shopify#2893) Fix error misalignment for Quick order list (Shopify#2887) Replace generic section name with section ID. (Shopify#2884) Fix cart drawer for variant list and tablet spacing (Shopify#2880) Add missing shadow styles to inputs in Quick Order List (Shopify#2879) ...

* Fix font for quick order list * Update opacity * Set width and margin for total-items * Add width 100% to image * Add a rule for product with volume pricing * Add qty rules as a condition * Refactor liquid logic * Roll back changes. Account for 15px info icon. * Add center alignment for total items --------- Co-authored-by: Sofia Matulis <sofia.matulis@shopify.com>

eugenekasimov changed the base branch from main to font July 28, 2023 23:23

eugenekasimov requested a review from sofiamatulis July 31, 2023 15:25

sofiamatulis reviewed Jul 31, 2023

View reviewed changes

assets/quick-order-list.css Show resolved Hide resolved

eugenekasimov requested a review from sofiamatulis August 1, 2023 06:23

sofiamatulis reviewed Aug 1, 2023

View reviewed changes

sections/quick-order-list.liquid Outdated Show resolved Hide resolved

sofiamatulis reviewed Aug 1, 2023

View reviewed changes

assets/quick-order-list.css Show resolved Hide resolved

sofiamatulis force-pushed the font branch from 7ebc5b3 to 7dfe962 Compare August 1, 2023 15:25

sofiamatulis added 2 commits August 1, 2023 11:26

Fix font for quick order list

e50e09a

Update opacity

dd05f12

sofiamatulis force-pushed the font branch from 7dfe962 to dd05f12 Compare August 1, 2023 15:26

sofiamatulis reviewed Aug 1, 2023

View reviewed changes

assets/quantity-popover.css Outdated Show resolved Hide resolved

sofiamatulis reviewed Aug 1, 2023

View reviewed changes

assets/quick-order-list.css Show resolved Hide resolved

sofiamatulis reviewed Aug 1, 2023

View reviewed changes

sections/quick-order-list.liquid Outdated Show resolved Hide resolved

eugenekasimov added 4 commits August 1, 2023 18:12

Set width and margin for total-items

bcbeb66

Add width 100% to image

4729e6e

Add a rule for product with volume pricing

a94cc30

Add qty rules as a condition

06e3a91

eugenekasimov force-pushed the fix-total-misalignment-quick-order branch 2 times, most recently from 23d1a46 to 832236c Compare August 2, 2023 01:38

Refactor liquid logic

d00933f

eugenekasimov force-pushed the fix-total-misalignment-quick-order branch from 832236c to d00933f Compare August 2, 2023 01:42

eugenekasimov requested a review from sofiamatulis August 2, 2023 01:46

sofiamatulis approved these changes Aug 2, 2023

View reviewed changes

sofiamatulis requested review from andrewetchen and edmund-teh August 2, 2023 14:07

edmund-teh requested changes Aug 2, 2023

View reviewed changes

Roll back changes. Account for 15px info icon.

1a90ae0

sofiamatulis self-requested a review August 2, 2023 17:47

edmund-teh approved these changes Aug 2, 2023

View reviewed changes

Add center alignment for total items

cfad5a8

sofiamatulis approved these changes Aug 2, 2023

View reviewed changes

sofiamatulis self-assigned this Aug 2, 2023

andrewetchen approved these changes Aug 3, 2023

View reviewed changes

Base automatically changed from font to main August 3, 2023 14:36

eugenekasimov merged commit 42071b5 into main Aug 3, 2023

eugenekasimov deleted the fix-total-misalignment-quick-order branch August 3, 2023 20:10

sofiamatulis mentioned this pull request Aug 8, 2023

Quick order list: Font size scaling affects 'Total items' column alignment, as well as other alignments with the section #2908

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix misalignment of total items in quick order list #2923

Fix misalignment of total items in quick order list #2923

eugenekasimov commented Jul 28, 2023 •

edited

Loading

sofiamatulis left a comment

sofiamatulis Aug 2, 2023

eugenekasimov Aug 2, 2023

edmund-teh left a comment

eugenekasimov commented Aug 2, 2023 •

edited

Loading

edmund-teh left a comment

sofiamatulis left a comment

andrewetchen left a comment

Fix misalignment of total items in quick order list #2923

Fix misalignment of total items in quick order list #2923

Conversation

eugenekasimov commented Jul 28, 2023 • edited Loading

PR Summary:

Why are these changes introduced?

What approach did you take?

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

sofiamatulis left a comment

Choose a reason for hiding this comment

sofiamatulis Aug 2, 2023

Choose a reason for hiding this comment

eugenekasimov Aug 2, 2023

Choose a reason for hiding this comment

edmund-teh left a comment

Choose a reason for hiding this comment

eugenekasimov commented Aug 2, 2023 • edited Loading

edmund-teh left a comment

Choose a reason for hiding this comment

sofiamatulis left a comment

Choose a reason for hiding this comment

andrewetchen left a comment

Choose a reason for hiding this comment

eugenekasimov commented Jul 28, 2023 •

edited

Loading

eugenekasimov commented Aug 2, 2023 •

edited

Loading