From 1b845e9cbcd8dd75076416fa107a155e1cf2437b Mon Sep 17 00:00:00 2001 From: jaypal Date: Thu, 7 Jun 2018 14:41:50 +0530 Subject: [PATCH] Work on the product cart page --- src/app/app.component.html | 5 +- src/app/checkout/cart/cart.component.html | 33 ++- src/app/checkout/cart/cart.component.scss | 35 ++-- .../line-item/line-item.component.html | 47 ++--- .../line-item/line-item.component.scss | 190 +++++++++--------- .../order-total-summary.component.html | 33 +-- .../order-total-summary.component.scss | 181 +++-------------- 7 files changed, 195 insertions(+), 329 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 29112108..b8e0db63 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -6,9 +6,8 @@
-
- - + + diff --git a/src/app/checkout/cart/cart.component.html b/src/app/checkout/cart/cart.component.html index 3b213bc1..9cf2684d 100644 --- a/src/app/checkout/cart/cart.component.html +++ b/src/app/checkout/cart/cart.component.html @@ -1,26 +1,25 @@
-
-
-
-
-
- Your Shopping Cart -
-
Total: ${{totalCartValue$ | async | number:'1.2-2'}}
-
-
- - - - Add more from wishlist - + +
+
+
+
+ Your Shopping Cart
-
- +
+ +
+
+ +
+ diff --git a/src/app/checkout/cart/cart.component.scss b/src/app/checkout/cart/cart.component.scss index e0a8e477..d7b4c568 100644 --- a/src/app/checkout/cart/cart.component.scss +++ b/src/app/checkout/cart/cart.component.scss @@ -1,19 +1,18 @@ @import '../../shared/scss/selected_theme_variables'; .cart-section { + position: relative; .left { - - padding-right: 40px; - border-right: 1px solid $gray-11; - min-height: 500px; + padding-right: 40px; .checkout-header-container { .checkout-header { display: inline-block; - padding: 30px 0; + padding: 3rem 0 0.8rem; .text { - font-size: 18px; - font-weight: 600; - color:$gray-900; - font-family: $primary-font;; + font-size: 1.8em; + font-weight: normal; + color: $gray-900; + font-family: $primary-font; + ; } } .total-price { @@ -27,9 +26,11 @@ .prod-set { width: 100%; display: inline-block; - height: 100%; overflow: auto; - padding-left: 1px; + padding: 1rem; + background-color: $white; + border-radius: 4px; + box-shadow: 0px 0px 3px #ccc; .wishlist-link { cursor: pointer; .icon { @@ -55,10 +56,14 @@ } } } - .right { - + .right { vertical-align: top; - margin-top: 52px; - padding-left: 35px; + position: absolute; + right:0; + margin-top: 15.3vh; + background-color:$white; + border-radius:4px ; + box-shadow:0px 0px 4px $gray-10; + padding: 0.9rem 1.4rem; } } \ No newline at end of file diff --git a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html index dd854c6c..dac4d735 100644 --- a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html +++ b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.html @@ -1,37 +1,34 @@ -
-
+
+
-
-
- - {{name}} - +
+
+
+
+ {{name}} +
+
+
+
+ + Qty: + {{quantity}} + +
+ +
+
{{amount}}
-
-
- - - - - - - Qty: - {{quantity}} - - -
- -
- REMOVE - MOVE TO WISHLIST + +
-
+
\ No newline at end of file diff --git a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss index 1ab5f75a..f2836d00 100644 --- a/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss +++ b/src/app/checkout/cart/components/line-item-list/line-item/line-item.component.scss @@ -1,100 +1,98 @@ @import '../../../../../shared/scss/selected_theme_variables'; .prod-item { - background: #fff; - border: 1px solid #eaeaec; - box-shadow: 0 0 4px rgba(40,44,63,.08); - margin-bottom: 30px; - text-transform: none; - padding-bottom: 0!important; - .col1 { - width: 20%; + margin-bottom: 30px; + text-transform: none; + border-bottom: 1px solid $gray-10; + position: relative; + .col1 { + display: inline-block; + vertical-align: bottom; + img { + width: 120px; + height: 160px; + object-fit: contain; + } + } + .col2 { + vertical-align: top; + display: inline-block; + padding: 10px 10px 10px 25px; + min-height: 145px; + position: relative; + + + .prod-name { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 5px 5px 5px 0; + .c-gray { + font-size: 1.3em; + font-family: $primary-font; + font-weight: normal; + color: $gray-900; + margin-right: 6px; + } + } + .prod-amount { + padding: 5px 5px 5px 0; + display: inline-block; + vertical-align: top; + font-weight: 600; + font-size: 1.3em; + font-family: $primary-font; + color: $theme-action-color - 50; + } + .size-qty-wrap { + display: inline-block; + margin: 5px 0; + color: $gray-400; + text-align: right; + .size-qty { + margin: 0 0 4px; + padding-right: 10px; display: inline-block; - vertical-align: bottom; - img { - width: 120px; - height: 160px; - object-fit: contain; - } - } - .col2 { - vertical-align: top; - display: inline-block; - padding: 10px 10px 10px 25px; - min-height: 145px; - position: relative; - width: 79%; - .prod-name { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 400px; - padding: 5px 5px 5px 0; - a { - font-size: 14px; - font-family: $primary-font;; - font-weight: 600; - color: #535766; - margin-right: 6px; - } - } - .prod-amount { - float: right; - padding: 5px 5px 5px 0; - display: inline-block; - vertical-align: top; - font-weight: 600; - font-size: 14px; - font-family: $primary-font;; - color: #535766; - margin-left: 20px; - } - .size-qty-wrap { - margin: 5px 0; - color: #535766; - .size-qty { - margin: 0 0 4px; - padding-right: 10px; - display: inline-block; - .size, .qty { - cursor: pointer; - margin-right: 20px; - .gray { - color: gray; - } - .icon { - width: 20px; - height: 20px; - background-position: -2570px -13px; - display: inline-block; - overflow: hidden; - background-repeat: no-repeat; - background-size: 4250px 153px; - vertical-align: middle; - background-image: url(/assets/checkout_sprite.png); - } - } - } - } - .edit-move-delete { - position: absolute; - left: 25px; - right: 20px; - bottom: 0; - border-top: 1px solid #eaeaec; - padding-top: 9px; - font-size: 13px; - font-weight: 600; - padding-left: 0; - color: #696e79; - .delete-item, .move-item { - font-family: $primary-font;; - margin: 0 15px 0 0; - cursor: pointer; - } - .move-item { - color: #526cd0; - } - } - } + + .size, + .qty { + color: $gray-400; + cursor: pointer; + margin-right: 20px; + font-size: 1.7em; + .gray,.value { + color: $gray-900; + } + .icon { + width: 20px; + height: 20px; + background-position: -2570px -13px; + display: inline-block; + overflow: hidden; + background-repeat: no-repeat; + background-size: 4250px 153px; + vertical-align: middle; + background-image: url(/assets/checkout_sprite.png); + } + } + } + } + .edit-move-delete { + position: absolute; + right: 20px; + top: 0; + color: $gray-11; + right: -14px; + top: -8px; + .delete-item, + .move-item { + margin: 0 15px 0 0; + cursor: pointer; + font-size: 1em; + } + .move-item { + color: $gray-200; + } + } + } } \ No newline at end of file diff --git a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html index a3473b10..2383f809 100644 --- a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html +++ b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.html @@ -1,34 +1,17 @@
-
- Coupons - -
-
- - Gift wrap for - $1 - Cash/Card On Delivery not available +
+
+ +
- Bag Total - ${{totalCartValue | number:'1.2-2'}} -
-
- Coupon Discount - Apply Coupon + Sub Total + ${{totalCartValue | number:'1.2-2'}}
- Delivery + Flat-Rate Shipping FREE
-
-
- -
-
- ${{totalCartValue | number:'1.2-2'}} -
-
-
+
\ No newline at end of file diff --git a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss index a982cdf2..63b68e07 100644 --- a/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss +++ b/src/app/checkout/cart/components/order-total-summary/order-total-summary.component.scss @@ -1,179 +1,64 @@ @import '../../../../shared/scss/selected_theme_variables'; .order-total-summary { - &:before { - content: 'OPTIONS'; - text-align: left; - width: 100%; - display: block; - top: -16px; - position: relative; - font-weight: 600; - font-size: 12px; - color: #7e818c; - font-family: $primary-font;; - } - .coupon-section { - position: relative; - text-align: left; - font-size: inherit; - border-bottom: 1px dotted #d4d5d9; - min-height: 30px; - padding-bottom: 20px!important; - margin-bottom: 10px; - .text-label { - font-size: 14px; - display: block; - font-weight: 600; - color: #596062; - font-family: $primary-font;; - } - .apply-coupon:after { - font-size: 14px; - content: 'Apply Coupon'; - position: absolute; - background: #fff; - color: #526cd0; - border: 1px solid #526cd0; - font-weight: 600; - font-family: $primary-font;; - border-radius: 3px; - padding: 2px 12px; - top: -6px; - right: 0px; - // cursor: pointer; - } - } - .gift-wrap-order { - height: 20px; - margin-bottom: 80px; - position: relative; - .gift-wrap-checkbox { - float: right; - width: 20px; - height: 20px; - background-position: -116px 0; - overflow: hidden; - background-repeat: no-repeat; - background-size: 4250px 153px; - vertical-align: middle; - background-image: url(/assets/checkout_sprite.png); - margin-top: 8px; - margin-right: 0; - cursor: pointer; - } - .gift-card-lbl, .gift-card-price { - font-size: 14px; - font-family: $primary-font;; - font-weight: 600; - color: #596062; - } - .not-cod { - display: block; - margin-top: 0; - padding: 3px 0 0; - font-size: 12px; - color: #535766; - } - } .order-summary-span { position: relative; padding: none; - border-bottom: 1px solid #eaeaec; - &:before { - content: 'Price Details'; - position: absolute; - top: -32px; - font-size: 12px; - left: 0; - text-transform: uppercase; - font-weight: 600; - font-family: $primary-font;; - color: #7e818c; - } - .bag-total, .coupon, .shipping { - padding-bottom: 8px; - height: 22px; - margin-bottom: 6px; + .bag-total, + { + padding: 1rem 0; + border-bottom: 1px solid $gray-10; position: relative; span { - color: #535766; + color: $gray-900; + font-size: 1.2em; + } + } + .shipping { + padding: 1rem 0; + span { + color: $gray-900; + font-size: 1.2em; } } - .bag-total > .value, - .coupon > .apply-coupon, - .shipping > .shipping-fee { + .bag-total>.value, + .coupon>.apply-coupon, + .shipping>.shipping-fee { position: absolute; right: 0; text-align: right; - color: #596062; + color: $theme-action-color - 50; + font-size: 1.2em; + font-weight: 600; } - .coupon > .c-blue { - color: #526cd0; + .coupon>.c-blue { + color: $theme-action-color - 50; cursor: pointer; } - .shipping > .c-green { - color: #20bd99; + .shipping>.c-green { + color: $theme-action-color - 50; } } .order-total.footer { position: relative; display: inline-block; width: 100%; - vertical-align: top; - margin-top: 42px; - margin-bottom: 40px; clear: right; - min-height: 80px; .place-order { - position: absolute; - right: 0; - width: auto; - left: 0; - top: 0; - bottom: 0; text-align: right; .order-btn { - border: none; - border-radius: 3px; - height: 45px; - background-color: #2cd2b1!important; - font-weight: 600!important; + border: 1px solid $theme-action-color - 50; + border-radius: 0.4rem; + padding: 0.5rem; + background-color: $theme-action-color !important; + font-weight: 300 !important; box-shadow: none; width: 100%; - color: #fff; - font-family: $primary-font;; - font-size: 14px; - margin: 10px auto; - } - } - .total-amount { - float: none; - position: absolute; - top: -51px; - left: 0; - right: 0; - text-align: right; - margin: 20px auto; - color: #333; - .total-rupees { - color: #535766; - font-weight: 600; - font-size: 15px; - font-family: $primary-font;; - } - &:after { - content: 'Order Total'; - font-size: 15px; - top: 0; - position: absolute; - color: #596062; - left: 0; - text-align: left; - font-weight: 600; - font-family: $primary-font;; + color: $white; + font-family: "Roboto Regular"; + font-size: 1.4em; + margin: 10px auto; + } } - } - } \ No newline at end of file