Fix misalignment of total items in quick order list #2923
Conversation
eugenekasimov
force-pushed
the
fix-total-misalignment-quick-order
branch
2 times, most recently
from
23d1a46
to
832236c
Compare
eugenekasimov
force-pushed
the
fix-total-misalignment-quick-order
branch
from
832236c
to
d00933f
Compare
| @@ -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))); | |||
There was a problem hiding this comment.
Since we are setting the width, perhaps it makes sense to center align total items to account for long translations:
There was a problem hiding this comment.
That sounds reasonable. Added here.
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
This is working really well now @eugenekasimov! Thanks so much.
There was a problem hiding this comment.
Works well! I think well still need to address this: #2923 (comment)
* 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>
PR Summary:
This PR fixes:
total itemselement in quick order list.Why are these changes introduced?
Fixes #2921.
What approach did you take?
.quick-order-list__total-itemselement same as the input component and add same margin as padding we use for the input in the table.inputelement to account foricon-infowhich is always15px.width: 100%to .variant-item__imageVisual impact on existing themes
Testing steps/scenarios
total itemsis aligned with the inputs in the table.total-itemselement is still aligned.Demo links
Checklist