From 7c1c0aa6bd26e215afc6588e6d566c4775e2e088 Mon Sep 17 00:00:00 2001 From: Quique Fernandez Date: Wed, 28 Dec 2016 16:31:24 +0100 Subject: [PATCH 1/3] Improve basket list layout --- .../modules/basket/basket.component.html | 118 +++++++-------- .../modules/basket/basket.component.scss | 139 ++++++++---------- .../Client/modules/basket/basket.component.ts | 2 +- .../orders-detail.component.html | 2 +- .../orders-detail.component.scss | 2 +- .../modules/orders/orders.component.scss | 2 +- 6 files changed, 121 insertions(+), 144 deletions(-) diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html index bddccc742..102cecf11 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html @@ -1,68 +1,54 @@ -
- -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- PRODUCT - - - - BRAND - - PRICE - - QUANTITY - - COST -
{{item.productName}}ROSLYN$ {{item.unitPrice}} - - $ {{item.unitPrice * item.quantity}}
- -
-
TOTAL
- $ {{totalPrice}} -
-
-
-
-
-
-
-
[ Checkout ]
+
+
+
+ Back to catalog
-
\ No newline at end of file + +
+
+
Product
+
+
Price
+
Quantity
+
Cost
+
+ +
+ +
+ +
+
{{item.productName}}
+
$ {{item.unitPrice}}
+
+ +
+
$ {{item.unitPrice * item.quantity}}
+
+
+ +
+
+
+
Total
+
+ +
+
+
$ {{totalPrice}}
+
+ +
+
+
+
[ Checkout ]
+
+
+
+
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss index 49b1728a3..eb51543cd 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss @@ -1,99 +1,90 @@ @import '../_variables.scss'; .esh-basket { + min-height: 80vh; + + $header-height: 4rem; &-header { background-color: #00A69C; - height: 63px; - - li { - list-style: none; - display: inline; - opacity: 0.5; - margin-top: 25px; - margin-left: 10px; - float: right; - cursor: pointer; - color: white; - } - - li a { - color: white; - } - - &-back { - float: left !important; - margin-top: 20px !important; - text-transform: uppercase; - } - - li a:hover { - text-decoration: none; - } + height: $header-height; } - &-container { - min-height: 70vh; - padding-top: 40px; - margin-bottom: 30px; - min-width: 992px; - } - - &-product-column { - max-width: 120px; + &-back { + color: rgba($color-foreground-brighter, .4); + line-height: $header-height; text-transform: uppercase; - vertical-align: middle !important; + text-decoration: none; + transition: color $animation-speed-default; + + &:hover { + color: $color-foreground-brighter; + transition: color $animation-speed-default; + } + } + + &-titles { + padding-bottom: 1rem; + padding-top: 2rem; + + &--clean { + padding-bottom: 0; + padding-top: 0; + } } - &-product-image { - max-width: 210px; + &-title { + text-transform: uppercase; } - &-total-value { - font-size: 20px; - color: #00a69c; - width: 90px; + &-items { + &--border { + border-bottom: $border-light solid $color-foreground-bright; + padding: .5rem 0; + + &:last-of-type { + border-color: transparent; + } + } } - &-total-label { - font-size: 14px; - color: #404040; - margin-top: 10px; + $item-height: 8rem; + &-item { + font-size: $font-size-m; + font-weight: $font-weight-semilight; + + &--middle { + line-height: $item-height; + + @media screen and (max-width: $media-screen-m) { + line-height: $font-size-m; + } + } + + &--mark { + color: $color-secondary; + } } - &-totals { - border-bottom: none !important; + &-image { + height: $item-height; + } + + &-input { + line-height: 1rem; + width: 100%; } &-checkout { - float: right; - margin-top: 40px; - margin-bottom: 40px; - background-color: #83d01b; - color: #fff; - padding: 10px 20px 10px 20px; - border-radius: 0; border: none; - width: 255px; + border-radius: 0; + background-color: $color-secondary; + color: $color-foreground-brighter; display: inline-block; + font-size: 1rem; + font-weight: $font-weight-normal; + margin-top: 1rem; + padding: 1rem 1.5rem; text-align: center; text-transform: uppercase; - height: 45px; - font-size: 16px; - font-weight: normal; } } - -.table td { - border-top: solid 1px #ddd; -} - -.table thead th { - border: none !important; -} - - - - - - - diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts index 96d2caa39..5bde088a0 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts @@ -7,7 +7,7 @@ import { IBasketItem } from '../shared/models/basketItem.model'; import { BasketWrapperService } from '../shared/services/basket.wrapper.service'; @Component({ - selector: 'esh-basket .esh-basket', + selector: 'esh-basket', styleUrls: ['./basket.component.scss'], templateUrl: './basket.component.html' }) diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html index 70d55d320..41bdf085a 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html @@ -58,7 +58,7 @@
-
+
Total
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss index 7b6950d6f..d84940461 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss @@ -36,7 +36,7 @@ } &-title { - font-size: $font-size-l; + text-transform: uppercase; } &-items { diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss index ddcbfd9c1..77a60357c 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss @@ -28,7 +28,7 @@ } &-title { - font-size: $font-size-l; + text-transform: uppercase; } &-items { From bbef68c112fc941a4dead660038e760f3ebdda75 Mon Sep 17 00:00:00 2001 From: Quique Fernandez Date: Wed, 28 Dec 2016 16:41:30 +0100 Subject: [PATCH 2/3] update basket status layout --- .../basket-status.component.html | 3 ++- .../basket-status.component.scss | 26 +++++++++---------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html index 0fad8fcb0..5052e98e1 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html @@ -1,5 +1,6 @@
-
+
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss index 2888ead1a..fface6f9d 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss @@ -1,26 +1,26 @@ @import '../../_variables.scss'; .esh-basketstatus { - float:right; + float: right; + position: relative; &-image { height: 36px; - margin-top: 5px; + margin-top: .5rem; } &-badge { - position: absolute; - margin-top: 2px; - margin-left: 14px; - background-color: #83d01b; - padding: 1px; - color: white; + $size: 1.5rem; + background-color: $color-secondary; border-radius: 50%; - width: 18px; - height: 18px; - font-size: 12px; - cursor: pointer; + color: $color-foreground-brighter; + display: block; + height: $size; + left: 50%; + position: absolute; + text-align: center; top: 0; - padding-left: 3px; + transform: translateX(-38%); + width: $size; } } From 6f3a6a8c1682a895a18670ff593e38b1a109f76d Mon Sep 17 00:00:00 2001 From: Quique Fernandez Date: Wed, 28 Dec 2016 16:56:16 +0100 Subject: [PATCH 3/3] update basket animations --- .../basket/basket-status/basket-status.component.html | 9 +++++---- .../basket/basket-status/basket-status.component.scss | 9 +++++++++ .../Client/modules/basket/basket.component.scss | 6 ++++++ 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html index 5052e98e1..03a7875c7 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html @@ -1,9 +1,10 @@ -
-
+ + +
{{badge}}
-
\ No newline at end of file + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss index fface6f9d..8e1b1f3f0 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss @@ -1,8 +1,10 @@ @import '../../_variables.scss'; .esh-basketstatus { + cursor: pointer; float: right; position: relative; + transition: all $animation-speed-default; &-image { height: 36px; @@ -21,6 +23,13 @@ text-align: center; top: 0; transform: translateX(-38%); + transition: all $animation-speed-default; width: $size; } + + &:hover &-badge { + background-color: transparent; + color: $color-secondary-dark; + transition: all $animation-speed-default; + } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss index eb51543cd..78601136c 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss @@ -86,5 +86,11 @@ padding: 1rem 1.5rem; text-align: center; text-transform: uppercase; + transition: all $animation-speed-default; + + &:hover { + background-color: $color-secondary-darker; + transition: all $animation-speed-default; + } } }