From f9386bbaa191863e0f8d440cec1d42777b665ac8 Mon Sep 17 00:00:00 2001 From: Jimmy Sanford Date: Thu, 16 Jan 2020 17:13:48 -0700 Subject: [PATCH 1/3] Adjust cart styles --- .../lib/components/Accordion/section.css | 10 ++++--- .../CartPage/PriceSummary/priceSummary.css | 9 ++++--- .../CartPage/PriceSummary/priceSummary.js | 2 +- .../lib/components/CartPage/cartPage.css | 27 ++++++++++--------- 4 files changed, 29 insertions(+), 19 deletions(-) diff --git a/packages/venia-ui/lib/components/Accordion/section.css b/packages/venia-ui/lib/components/Accordion/section.css index e03400e23e..e9dde04d91 100644 --- a/packages/venia-ui/lib/components/Accordion/section.css +++ b/packages/venia-ui/lib/components/Accordion/section.css @@ -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)); } diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.css b/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.css index 889631605b..54c34f075d 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.css +++ b/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.css @@ -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; } @@ -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%; } diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js b/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js index e2610b8e57..c001b38017 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js +++ b/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js @@ -91,7 +91,7 @@ const PriceSummary = props => {
diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.css b/packages/venia-ui/lib/components/CartPage/cartPage.css index 3a6f4dd29d..573b2e2b52 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.css +++ b/packages/venia-ui/lib/components/CartPage/cartPage.css @@ -1,13 +1,13 @@ .root { - padding-top: 1.5rem; - max-width: 64rem; + padding: 2.5rem 3rem; + 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' @@ -19,8 +19,7 @@ display: flex; align-items: baseline; justify-content: space-between; - - margin-bottom: 1rem; + margin-bottom: 2rem; } .heading { @@ -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 { @@ -57,17 +60,17 @@ 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) { .body { /* Only one column in mobile view. */ grid-template-columns: 100%; From 590d4c5b740c1eaf9d5fc3922b418107d16a86f5 Mon Sep 17 00:00:00 2001 From: Stephen Rugh Date: Fri, 17 Jan 2020 08:42:09 -0600 Subject: [PATCH 2/3] fix snap Signed-off-by: Stephen Rugh --- .../__tests__/__snapshots__/priceSummary.spec.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap b/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap index 515b20d535..ef732718da 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap +++ b/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap @@ -70,7 +70,7 @@ exports[`renders PriceSummary correctly 1`] = ` type="button" > - PROCEED TO CHECKOUT + Proceed to Checkout From d105c15be5b8005662ef1c1e67dd59bd25397a41 Mon Sep 17 00:00:00 2001 From: Stephen Rugh Date: Fri, 17 Jan 2020 08:55:59 -0600 Subject: [PATCH 3/3] less padding on mobile for cart root Signed-off-by: Stephen Rugh --- packages/venia-ui/lib/components/CartPage/cartPage.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.css b/packages/venia-ui/lib/components/CartPage/cartPage.css index 573b2e2b52..77e0eb6f24 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.css +++ b/packages/venia-ui/lib/components/CartPage/cartPage.css @@ -71,6 +71,11 @@ */ @media (max-width: 960px) { + .root { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .body { /* Only one column in mobile view. */ grid-template-columns: 100%;