Skip to content

Commit 8cf5801

Browse files
author
Carlos Cañizares Estévez
committed
2 parents fdd7bcb + 6f3a6a8 commit 8cf5801

8 files changed

Lines changed: 149 additions & 155 deletions

File tree

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
<div class="esh-basketstatus">
2-
<div [routerLink]="['basket']" class="esh-basketstatus-image">
1+
<a class="esh-basketstatus"
2+
[routerLink]="['basket']">
3+
4+
<div class="esh-basketstatus-image">
35
<img src="../../../images/cart.png" />
46
</div>
57
<div class="esh-basketstatus-badge">
68
{{badge}}
79
</div>
8-
</div>
10+
</a>

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,35 @@
11
@import '../../_variables.scss';
22

33
.esh-basketstatus {
4-
float:right;
4+
cursor: pointer;
5+
float: right;
6+
position: relative;
7+
transition: all $animation-speed-default;
58

69
&-image {
710
height: 36px;
8-
margin-top: 5px;
11+
margin-top: .5rem;
912
}
1013

1114
&-badge {
12-
position: absolute;
13-
margin-top: 2px;
14-
margin-left: 14px;
15-
background-color: #83d01b;
16-
padding: 1px;
17-
color: white;
15+
$size: 1.5rem;
16+
background-color: $color-secondary;
1817
border-radius: 50%;
19-
width: 18px;
20-
height: 18px;
21-
font-size: 12px;
22-
cursor: pointer;
18+
color: $color-foreground-brighter;
19+
display: block;
20+
height: $size;
21+
left: 50%;
22+
position: absolute;
23+
text-align: center;
2324
top: 0;
24-
padding-left: 3px;
25+
transform: translateX(-38%);
26+
transition: all $animation-speed-default;
27+
width: $size;
28+
}
29+
30+
&:hover &-badge {
31+
background-color: transparent;
32+
color: $color-secondary-dark;
33+
transition: all $animation-speed-default;
2534
}
2635
}

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html‎

Lines changed: 51 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,54 @@
1-
<div class="esh-basket-header">
2-
<ul class="container">
3-
<li class="esh-basket-header-back" routerLink="/catalog">Back to list</li>
4-
</ul>
5-
</div>
6-
<div class="container esh-basket-container">
7-
<div class="row">
8-
<div class="col-md-12">
9-
<section>
10-
<table class="table">
11-
<thead>
12-
<tr>
13-
<th class="esh-basket-product-column">
14-
PRODUCT
15-
</th>
16-
<th>
1+
<div class="esh-basket">
2+
<div class="esh-basket-header">
3+
<div class="container">
4+
<a class="esh-basket-back" routerLink="/catalog">Back to catalog</a>
5+
</div>
6+
</div>
7+
8+
<div class="container">
9+
<article class="esh-basket-titles row">
10+
<section class="esh-basket-title col-xs-3">Product</section>
11+
<section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
12+
<section class="esh-basket-title col-xs-2">Price</section>
13+
<section class="esh-basket-title col-xs-2">Quantity</section>
14+
<section class="esh-basket-title col-xs-2">Cost</section>
15+
</article>
1716

18-
</th>
19-
<th>
20-
BRAND
21-
</th>
22-
<th>
23-
PRICE
24-
</th>
25-
<th>
26-
QUANTITY
27-
</th>
28-
<th>
29-
COST
30-
</th>
31-
</tr>
32-
</thead>
33-
<tbody>
34-
<tr *ngFor="let item of basket?.items">
35-
<td class="esh-basket-product-column"><img class="esh-basket-product-image" src="{{item.pictureUrl}}" /></td>
36-
<td class="esh-basket-product-column">{{item.productName}}</td>
37-
<td class="esh-basket-product-column">ROSLYN</td>
38-
<td class="esh-basket-product-column">$ {{item.unitPrice}}</td>
39-
<td class="esh-basket-product-column">
40-
<input type="number" style="width:100px" min="1" [(ngModel)]="item.quantity" (change)="itemQuantityChanged(item)"/>
41-
</td>
42-
<td class="esh-basket-product-column esh-basket-total-value">$ {{item.unitPrice * item.quantity}}</td>
43-
</tr>
44-
<tr class="esh-basket-totals">
45-
<td></td>
46-
<td></td>
47-
<td></td>
48-
<td></td>
49-
<td>
50-
</td>
51-
<td>
52-
<div class="esh-basket-total-value">
53-
<div class="esh-basket-total-label"><span>TOTAL</span></div>
54-
<span>$ {{totalPrice}}</span>
55-
</div>
56-
</td>
57-
</tr>
58-
</tbody>
59-
</table>
17+
<article class="esh-basket-items esh-basket-items--border row"
18+
*ngFor="let item of basket?.items">
19+
20+
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
21+
<img class="esh-basket-image" src="{{item.pictureUrl}}" />
6022
</section>
61-
</div>
62-
<div class="col-md-8">
63-
</div>
64-
<div class="col-md-4">
65-
<div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
66-
</div>
23+
<section class="esh-basket-item esh-basket-item--middle col-xs-3">{{item.productName}}</section>
24+
<section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice}}</section>
25+
<section class="esh-basket-item esh-basket-item--middle col-xs-2">
26+
<input class="esh-basket-input"
27+
type="number"
28+
min="1"
29+
[(ngModel)]="item.quantity"
30+
(change)="itemQuantityChanged(item)" />
31+
</section>
32+
<section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice * item.quantity}}</section>
33+
</article>
6734
</div>
68-
</div>
35+
36+
<div class="container">
37+
<article class="esh-basket-titles esh-basket-titles--clean row">
38+
<section class="esh-basket-title col-xs-10"></section>
39+
<section class="esh-basket-title col-xs-2">Total</section>
40+
</article>
41+
42+
<article class="esh-basket-items row">
43+
<section class="esh-basket-item col-xs-10"></section>
44+
<section class="esh-basket-item esh-basket-item--mark col-xs-2">$ {{totalPrice}}</section>
45+
</article>
46+
47+
<article class="esh-basket-items row">
48+
<section class="esh-basket-item col-xs-9"></section>
49+
<section class="esh-basket-item col-xs-3">
50+
<div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
51+
</section>
52+
</article>
53+
</div>
54+
</div>

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss‎

Lines changed: 67 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,96 @@
11
@import '../_variables.scss';
22

33
.esh-basket {
4+
min-height: 80vh;
5+
6+
$header-height: 4rem;
47
&-header {
58
background-color: #00A69C;
6-
height: 63px;
7-
8-
li {
9-
list-style: none;
10-
display: inline;
11-
opacity: 0.5;
12-
margin-top: 25px;
13-
margin-left: 10px;
14-
float: right;
15-
cursor: pointer;
16-
color: white;
17-
}
18-
19-
li a {
20-
color: white;
21-
}
9+
height: $header-height;
10+
}
2211

23-
&-back {
24-
float: left !important;
25-
margin-top: 20px !important;
26-
text-transform: uppercase;
27-
}
12+
&-back {
13+
color: rgba($color-foreground-brighter, .4);
14+
line-height: $header-height;
15+
text-transform: uppercase;
16+
text-decoration: none;
17+
transition: color $animation-speed-default;
2818

29-
li a:hover {
30-
text-decoration: none;
19+
&:hover {
20+
color: $color-foreground-brighter;
21+
transition: color $animation-speed-default;
3122
}
3223
}
33-
34-
&-container {
35-
min-height: 70vh;
36-
padding-top: 40px;
37-
margin-bottom: 30px;
38-
min-width: 992px;
24+
25+
&-titles {
26+
padding-bottom: 1rem;
27+
padding-top: 2rem;
28+
29+
&--clean {
30+
padding-bottom: 0;
31+
padding-top: 0;
32+
}
3933
}
4034

41-
&-product-column {
42-
max-width: 120px;
35+
&-title {
4336
text-transform: uppercase;
44-
vertical-align: middle !important;
4537
}
4638

47-
&-product-image {
48-
max-width: 210px;
39+
&-items {
40+
&--border {
41+
border-bottom: $border-light solid $color-foreground-bright;
42+
padding: .5rem 0;
43+
44+
&:last-of-type {
45+
border-color: transparent;
46+
}
47+
}
4948
}
5049

51-
&-total-value {
52-
font-size: 20px;
53-
color: #00a69c;
54-
width: 90px;
50+
$item-height: 8rem;
51+
&-item {
52+
font-size: $font-size-m;
53+
font-weight: $font-weight-semilight;
54+
55+
&--middle {
56+
line-height: $item-height;
57+
58+
@media screen and (max-width: $media-screen-m) {
59+
line-height: $font-size-m;
60+
}
61+
}
62+
63+
&--mark {
64+
color: $color-secondary;
65+
}
5566
}
5667

57-
&-total-label {
58-
font-size: 14px;
59-
color: #404040;
60-
margin-top: 10px;
68+
&-image {
69+
height: $item-height;
6170
}
6271

63-
&-totals {
64-
border-bottom: none !important;
72+
&-input {
73+
line-height: 1rem;
74+
width: 100%;
6575
}
6676

6777
&-checkout {
68-
float: right;
69-
margin-top: 40px;
70-
margin-bottom: 40px;
71-
background-color: #83d01b;
72-
color: #fff;
73-
padding: 10px 20px 10px 20px;
74-
border-radius: 0;
7578
border: none;
76-
width: 255px;
79+
border-radius: 0;
80+
background-color: $color-secondary;
81+
color: $color-foreground-brighter;
7782
display: inline-block;
83+
font-size: 1rem;
84+
font-weight: $font-weight-normal;
85+
margin-top: 1rem;
86+
padding: 1rem 1.5rem;
7887
text-align: center;
7988
text-transform: uppercase;
80-
height: 45px;
81-
font-size: 16px;
82-
font-weight: normal;
83-
}
84-
}
89+
transition: all $animation-speed-default;
8590

86-
.table td {
87-
border-top: solid 1px #ddd;
88-
}
89-
90-
.table thead th {
91-
border: none !important;
91+
&:hover {
92+
background-color: $color-secondary-darker;
93+
transition: all $animation-speed-default;
94+
}
95+
}
9296
}
93-
94-
95-
96-
97-
98-
99-

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { IBasketItem } from '../shared/models/basketItem.model';
77
import { BasketWrapperService } from '../shared/services/basket.wrapper.service';
88

99
@Component({
10-
selector: 'esh-basket .esh-basket',
10+
selector: 'esh-basket',
1111
styleUrls: ['./basket.component.scss'],
1212
templateUrl: './basket.component.html'
1313
})

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
</section>
5959

6060
<section class="esh-orders_detail-section esh-orders_detail-section--right">
61-
<article class="esh-orders_detail-titles row">
61+
<article class="esh-orders_detail-titles esh-basket-titles--clean row">
6262
<section class="esh-orders_detail-title col-xs-10"></section>
6363
<section class="esh-orders_detail-title col-xs-2">Total</section>
6464
</article>

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737

3838
&-title {
39-
font-size: $font-size-l;
39+
text-transform: uppercase;
4040
}
4141

4242
&-items {

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
}
2929

3030
&-title {
31-
font-size: $font-size-l;
31+
text-transform: uppercase;
3232
}
3333

3434
&-items {

0 commit comments

Comments
 (0)