Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor quick-order-list.css #3006

Merged
merged 8 commits into from
Oct 5, 2023
Merged

Refactor quick-order-list.css #3006

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
84fb998
Refactor `quick-order-list.css`
Sep 21, 2023
4ea7c1f
Add `max-height` and `overflow-y` to `quick-order-list__container`
Sep 22, 2023
55f9045
Add back middle vertical align to `quick-order-list__table`
Sep 28, 2023
f03782b
Fix `tax-note` margin and text alignment
Oct 2, 2023
371d56e
Add desktop-only rule for `quick-order-list__container`
Oct 3, 2023
9e0cab8
Adjust `quantity-popover` for desktop and mobile
Oct 3, 2023
7f95041
Revert: Adjust `quantity-popover` for desktop and mobile
Oct 4, 2023
3d64bb5
Remove `max-height` and `overflow-y` from `quick-order-list__container`
Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 18 additions & 114 deletions assets/quick-order-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ quick-order-list .quantity__button {
width: calc(3.5rem / var(--font-body-scale));
}

.quick-order-list__contents {
position: relative;
}

.quick-order-list__container {
padding-bottom: 4rem;
}
Expand All @@ -28,10 +24,6 @@ quick-order-list .quantity__button {
border-top: 0.1rem solid rgba(var(--color-foreground), .08);
}

.totals__product-total {
text-align: center;
}

.variant-item__quantity .quantity:before {
z-index: 0;
}
Expand All @@ -48,15 +40,6 @@ quick-order-list .quantity__button {
background-color: rgb(var(--color-background));
}

.totals__product-total {
text-align: right;
}

.variant__items {
max-height: 90rem;
overflow-y: auto;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed this was introduced on this PR https://screenshot.click/29-56-4zuwn-hkbg9.mp4

the popover is showing behind

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's strange is that this is coming from this: 7e2238a

#3006 (comment)

quick-order-list-container.mp4

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think it's due to the overflow-y. https://screenshot.click/03-43-z9vco-k9eqv.mp4

Have you seen if there is a way around it?

We should test it with a long list of variants that has qty rules/vol pricing

Copy link
Contributor Author

@andrewetchen andrewetchen Oct 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's the first thing I noticed while testing this. When I remove the overflow-y from the following it works as expected:

.quick-order-list__container {
  padding-bottom: 4rem;
  max-height: 90rem;
  overflow-y: auto;
}

Have you seen if there is a way around it?

I'll try to tweak things 👍🏼

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's a solution to fix this -- let me know what you think: 7d26147

.variant-item__quantity-wrapper--no-info,
.variant-item__error {
padding-left: calc(15px + 3.4rem);
Expand Down Expand Up @@ -142,10 +125,6 @@ quick-order-list .quantity__button {
display: flex;
}

.quick-order-list__table .variant-item__inner.variant-item__inner--no-sku {
vertical-align: middle;
}

.variant-item__discounted-prices {
justify-content: flex-end;
}
Expand All @@ -161,7 +140,6 @@ quick-order-list .quantity__button {
max-width: 30rem;
}


.variant-item__info {
position: relative;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -208,12 +186,6 @@ quick-order-list .quantity__button {
font-weight: 400;
}

.product-option {
font-size: 1.4rem;
word-break: break-word;
line-height: calc(1 + 0.5 / var(--font-body-scale));
}

.variant-item__sold-out {
opacity: 0.7;
font-size: 1.6rem;
Expand All @@ -222,7 +194,7 @@ quick-order-list .quantity__button {

quick-order-list-remove-button {
display: flex;
margin-left: 1rem;
margin: 0 0 0 1.2rem;
align-self: center;
}

Expand All @@ -242,14 +214,7 @@ quick-order-list-remove-button {
margin-top: 1rem;
}

.quick-order-list-buttons {
display: flex;
justify-content: space-between;
flex-direction: column;
}

.quick-order-list-total__column {
display: flex;
flex-wrap: wrap;
}

Expand All @@ -266,18 +231,10 @@ quick-order-list-remove-button .button {
margin: 0 0.1rem 0.1rem 0;
}


quick-order-list-remove-button .button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}

@media screen and (min-width: 990px) {
quick-order-list-remove-button .button {
min-width: 1.5rem;
min-height: 1.5rem;
}
}

quick-order-list-remove-button .icon-remove {
height: 1.5rem;
width: 1.5rem;
Expand All @@ -292,6 +249,11 @@ quick-order-list-remove-button .icon-remove {
padding: 0;
}

.variant-remove-total {
position: relative;
align-self: center;
}

.variant-remove-total .button--tertiary {
width: max-content;
}
Expand All @@ -302,16 +264,16 @@ quick-order-list-remove-button .icon-remove {
margin-right: 0.8rem;
}

.quick-order-list__message svg {
margin-right: 1rem;
width: 1.3rem;
}

.quick-order-list__message {
margin-top: 1rem;
display: block;
}

.quick-order-list__message svg {
margin-right: 1rem;
width: 1.3rem;
}

.quick-order-list-error {
margin-top: 1rem;
display: flex;
Expand Down Expand Up @@ -350,11 +312,6 @@ quick-order-list-remove-button:hover .icon-remove {
text-underline-offset: 0.3rem;
}

.variant-remove-total {
position: relative;
align-self: center;
}

.variant-item .loading-overlay:not(.hidden)~*,
.variant-remove-total .loading-overlay:not(.hidden)~* {
visibility: hidden;
Expand Down Expand Up @@ -385,15 +342,6 @@ quick-order-list-remove-button:hover .icon-remove {
display: none;
}

.product-option+.product-option {
margin-top: 0.4rem;
}

.product-option * {
display: inline;
margin: 0;
}

.quick-order-list__table thead th {
text-transform: uppercase;
}
Expand Down Expand Up @@ -472,17 +420,12 @@ quick-order-list-remove-button:hover .icon-remove {
text-align: center;
}

.quick-order-list-total__column {
.quick-order-list-total__column,
.quick-order-list-buttons {
display: flex;
flex-direction: column;
align-items: center;
}

.quick-order-list-buttons {
width: 100%;
align-items: center;
display: flex;
flex-direction: column;
}

.quick-order-list__button {
Expand All @@ -497,10 +440,6 @@ quick-order-list-remove-button:hover .icon-remove {
margin-top: -2rem;
}

.quick-order-list-total__confirmation .button--tertirary {
margin-left: 2rem;
}

@media screen and (min-width: 990px) {
.quick-order-list__table {
border-spacing: 0;
Expand All @@ -514,10 +453,6 @@ quick-order-list-remove-button:hover .icon-remove {
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.quick-order-list__table thead th:first-child {
width: 20%;
}

.quick-order-list__table th+th {
padding-left: 5.4rem;
}
Expand All @@ -529,16 +464,14 @@ quick-order-list-remove-button:hover .icon-remove {

.quick-order-list__table td {
padding-top: 1.6rem;
vertical-align: middle;
}

.quick-order-list__table .desktop-row-error td {
padding-top: 0;
}

.quick-order-list__table .variant-item--unit-price td {
vertical-align: top;

vertical-align: middle;
}

.variant-item {
Expand All @@ -559,37 +492,21 @@ quick-order-list-remove-button:hover .icon-remove {
margin-right: 3rem;
}

.quick-order-list-total__column {
width: 20%;
}

.quick-order-list__total-items {
width: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)));
margin-left: calc(15px + 3.4rem);
flex-direction: column;
}
}

quick-order-list-remove-button {
margin: 0 0 0 1.2rem;
}

@media screen and (min-width: 990px) {
.variant-item .variant-item__quantity {
padding-left: 0;
}

.quick-order-list__table thead th:first-child {
width: 37%;
}

.quick-order-list__table thead th:first-child,
.quick-order-list-total__column {
width: 37%;
}

.quick-order-list-buttons {
display: flex;
align-self: flex-start;
}

quick-order-list-remove-all-button {
Expand Down Expand Up @@ -629,21 +546,13 @@ quick-order-list-remove-button {
min-height: 10rem;
}

.quick-order-list-total {
padding-top: 2rem;
border-top: 0.1rem solid rgba(var(--color-foreground), .08);
}

.quick-order-list-total__price {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
width: min-content;
}

.quick-order-list-total__price {
flex-grow: 1;
text-align: right;
width: min-content;
}

.quick-order-list-total__price .button {
Expand All @@ -660,7 +569,6 @@ quick-order-list-remove-button {
.totals__product-total {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
align-items: center;
padding-bottom: 2rem;
Expand Down Expand Up @@ -689,22 +597,18 @@ quick-order-list-remove-button {
margin-top: 2rem;
}

.quick-order-list-total__column {
width: 100%;
}

.quick-order-list__button-confirm {
width: 100%;
max-width: 36rem;
}

quick-order-list .tax-note {
text-align: center
text-align: center;
}
}

quick-order-list .tax-note {
margin-bottom: 2rem;
margin: 0 0 2rem;
display: block;
width: 100%;
}