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

Jump to bottom

Adjust cart styling #2104

Merged
merged 3 commits into from
Jan 17, 2020
Merged

Adjust cart styling #2104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f9386bb
Adjust cart styles
jimbo Jan 17, 2020
590d4c5
fix snap
sirugh Jan 17, 2020
d105c15
less padding on mobile for cart root
sirugh Jan 17, 2020
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
10 changes: 7 additions & 3 deletions packages/venia-ui/lib/components/Accordion/section.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,25 @@
}

.contents_container {
padding-left: 2em;
padding: 1.5rem;
}
.contents_container:empty {
display: none;
}

.title {
font-weight: 600;
}

.title_container {
cursor: pointer;
display: flex;
height: 4.5rem;
justify-content: space-between;
padding: 2em;
padding: 0 1.5rem;
width: 100%;
}

.title_container_open {
composes: title_container;
border-bottom: solid 1px rgb(var(--venia-border));
}
2 changes: 1 addition & 1 deletion ...ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ exports[`renders PriceSummary correctly 1`] = `
type="button"
>
<span>
PROCEED TO CHECKOUT
Proceed to Checkout
</span>
</button>
</div>
Expand Down
9 changes: 6 additions & 3 deletions packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
.root {
padding: 0 1rem 1rem 1rem;
}

.lineItems {
display: grid;
grid-row-gap: 0.75rem;
grid-template-columns: 50% 50%;
padding-bottom: 1rem;
line-height: 1.5rem;
}

Expand All @@ -29,5 +27,10 @@
}

.checkoutButton_container {
text-align: center;
align-items: center;
display: inline-flex;
justify-content: center;
margin-top: 1rem;
min-height: 5.5rem;
width: 100%;
}
2 changes: 1 addition & 1 deletion packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const PriceSummary = props => {
</div>
<div className={classes.checkoutButton_container}>
<Button priority={'high'} onClick={handleProceedToCheckout}>
{'PROCEED TO CHECKOUT'}
{'Proceed to Checkout'}
</Button>
</div>
</div>
Expand Down
32 changes: 20 additions & 12 deletions packages/venia-ui/lib/components/CartPage/cartPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.root {
padding-top: 1.5rem;
max-width: 64rem;
padding: 2.5rem 3rem;
Copy link
Contributor

Choose a reason for hiding this comment

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

I think 3rem is overkill on mobile.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It is. I see you've set it to 1.5rem, and that works. It may be able to go as low as 1rem.

max-width: 1080px;
margin: 0 auto;
}

.body {
display: grid;
gap: 2rem;
grid-template-columns: 66% auto;
grid-template-columns: 1fr 18rem;
/* The summary grid item spans the entire right column. */
grid-template-areas:
'items summary'
Expand All @@ -19,8 +19,7 @@
display: flex;
align-items: baseline;
justify-content: space-between;

margin-bottom: 1rem;
margin-bottom: 2rem;
}

.heading {
Expand All @@ -29,10 +28,14 @@

.items_container {
grid-area: items;

/* TEMPORARY STYLES FOR SCROLLABLE SUMMARY, CAN BE REMOVED */
height: 900px;
border: 1px dotted red;
align-items: center;
border: 1px solid rgb(var(--venia-border));
border-radius: 0.5rem;
color: rgb(var(--venia-text-hint));
display: flex;
height: 40rem;
justify-content: center;
}

.price_adjustments_container {
Expand All @@ -57,17 +60,22 @@
position: sticky;
/*
* TODO: Use CSS Properties (variables) or something instead of hardcoding this.
* - 3.5 rem = min-height of nav header. See the "toolbar" class in header.css.
* - 1 rem = Spacing just for the sticky container.
* - 3.5rem = min-height of nav header. See the "toolbar" class in header.css.
* - 2rem = padding-top of the cart page.
*/
top: calc(3.5rem + 1rem);
top: 5.5rem;
}

/*
* Mobile-specific styles.
*/

@media (max-width: 640px) {
@media (max-width: 960px) {
.root {
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.body {
/* Only one column in mobile view. */
grid-template-columns: 100%;
Expand Down