Skip to content

Commit da89aff

Browse files
author
Quique Fernandez
committed
udpate orders layout
1 parent 2af4d74 commit da89aff

7 files changed

Lines changed: 84 additions & 129 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</section>
2222

2323
<div class="container">
24-
<esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
24+
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
2525

2626
<div class="esh-catalog-items row">
2727
<div class="esh-catalog-item col-md-4"
@@ -41,6 +41,6 @@
4141
</div>
4242
</div>
4343

44-
<esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
44+
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
4545
</div>
4646

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import '../variables';
22

33
.esh-catalog {
4-
54
$banner-height: 260px;
65

76
&-hero {

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

Lines changed: 26 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,28 @@
1-
<div class="esh-orders-header">
2-
<ul class="container">
3-
<li class="esh-orders-back" routerLink="/catalog">Back to list</li>
4-
</ul>
5-
</div>
6-
<div class="container esh-orders-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-orders-order-column">
14-
ORDER NUMBER
15-
</th>
16-
<th>
17-
DATE
18-
</th>
19-
<th>
20-
TOTAL
21-
</th>
22-
<th>
23-
STATUS
24-
</th>
25-
<th></th>
26-
</tr>
27-
</thead>
28-
<tbody>
29-
<tr *ngFor="let order of orders">
30-
<td class="esh-orders-order-column">{{order.ordernumber}}</td>
31-
<td class="esh-orders-order-column">{{order.date | date:'short'}}</td>
32-
<td class="esh-orders-order-column">$ {{order.total}}</td>
33-
<td class="esh-orders-order-column">{{order.status}}</td>
34-
<td class="esh-orders-order-column">
35-
<a class="esh-orders-order-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
36-
</td>
37-
</tr>
38-
</tbody>
39-
</table>
40-
</section>
1+
<div class="esh-orders">
2+
<div class="esh-orders-header">
3+
<div class="container">
4+
<a class="esh-orders-back" routerLink="/catalog">Back to list</a>
415
</div>
426
</div>
43-
</div>
7+
8+
<div class="container">
9+
<article class="esh-orders-titles row">
10+
<div class="esh-orders-title col-xs-2">Order number</div>
11+
<div class="esh-orders-title col-xs-4">Date</div>
12+
<div class="esh-orders-title col-xs-2">Total</div>
13+
<div class="esh-orders-title col-xs-2">Status</div>
14+
<div class="esh-orders-title col-xs-2"></div>
15+
</article>
16+
17+
<article class="esh-orders-items row"
18+
*ngFor="let order of orders">
19+
<div class="esh-orders-item col-xs-2">{{order.ordernumber}}</div>
20+
<div class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</div>
21+
<div class="esh-orders-item col-xs-2">$ {{order.total}}</div>
22+
<div class="esh-orders-item col-xs-2">{{order.status}}</div>
23+
<div class="esh-orders-item col-xs-2">
24+
<a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
25+
</div>
26+
</article>
27+
</div>
28+
</div>

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

Lines changed: 29 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,83 +3,52 @@
33
.esh-orders {
44
min-height: 80vh;
55

6+
$header-height: 4rem;
67
&-header {
78
background-color: #00A69C;
8-
height: 63px;
9-
10-
li {
11-
list-style: none;
12-
display: inline;
13-
opacity: 0.5;
14-
margin-top: 25px;
15-
margin-left: 10px;
16-
float: right;
17-
cursor: pointer;
18-
color: white;
19-
}
20-
21-
li a {
22-
color: white;
23-
}
24-
25-
li a:hover {
26-
text-decoration: none;
27-
}
9+
height: $header-height;
2810
}
2911

3012
&-back {
31-
float: left !important;
32-
margin-top: 20px !important;
13+
color: rgba($color-foreground-brighter, .4);
14+
line-height: $header-height;
3315
text-transform: uppercase;
34-
}
16+
text-decoration: none;
17+
transition: color $animation-speed-default;
3518

36-
&-container {
37-
min-height: 70vh;
38-
padding-top: 40px;
39-
margin-bottom: 30px;
40-
min-width: 992px;
19+
&:hover {
20+
color: $color-foreground-brighter;
21+
transition: color $animation-speed-default;
22+
}
4123
}
4224

43-
&-order-column {
44-
max-width: 120px;
45-
vertical-align: middle !important;
25+
&-titles {
26+
padding-bottom: 1rem;
27+
padding-top: 2rem;
4628
}
4729

48-
&-order-link {
49-
color: #83d01b;
30+
&-title {
31+
font-size: $font-size-l;
5032
}
5133

52-
&-order-image {
53-
max-width: 210px;
34+
&-items {
35+
$height: 2rem;
36+
height: $height;
37+
line-height: $height;
5438
}
5539

56-
&-total-value {
57-
font-size: 20px;
58-
color: #00a69c;
40+
&-item {
41+
font-weight: $font-weight-semilight;
5942
}
6043

61-
&-total-label {
62-
font-size: 14px;
63-
color: #404040;
64-
margin-top: 10px;
65-
}
44+
&-link {
45+
color: $color-secondary;
46+
text-decoration: none;
47+
transition: color $animation-speed-default;
6648

67-
&-totals {
68-
border-bottom:none!important;
49+
&:hover {
50+
color: $color-secondary-dark;
51+
transition: color $animation-speed-default;
52+
}
6953
}
7054
}
71-
72-
.table td {
73-
border-top: solid 1px #ddd;
74-
}
75-
76-
.table thead th {
77-
border: none !important;
78-
}
79-
80-
81-
82-
83-
84-
85-

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { OrdersService } from './orders.service';
33
import { IOrder } from '../shared/models/order.model';
44

55
@Component({
6-
selector: 'esh-orders .esh-orders',
6+
selector: 'esh-orders',
77
styleUrls: ['./orders.component.scss'],
88
templateUrl: './orders.component.html'
99
})

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1-
<div class="container">
2-
<article class="esh-pager-wrapper row">
3-
<nav>
4-
<span class="esh-pager-item esh-pager-item--navigable"
5-
id="Previous"
6-
[hidden]="buttonStates?.previousDisabled"
7-
(click)="onPreviousCliked($event)"
8-
aria-label="Previous">
9-
Previous
10-
</span>
1+
<div class="esh-pager">
2+
<div class="container">
3+
<article class="esh-pager-wrapper row">
4+
<nav>
5+
<span class="esh-pager-item esh-pager-item--navigable"
6+
id="Previous"
7+
[hidden]="buttonStates?.previousDisabled"
8+
(click)="onPreviousCliked($event)"
9+
aria-label="Previous">
10+
Previous
11+
</span>
1112

12-
<span class="esh-pager-item">
13-
Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}
14-
</span>
13+
<span class="esh-pager-item">
14+
Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}
15+
</span>
1516

16-
<span class="esh-pager-item esh-pager-item--navigable"
17-
id="Next"
18-
[hidden]="buttonStates?.nextDisabled"
19-
(click)="onNextClicked($event)"
20-
aria-label="Next">
21-
Next
22-
</span>
23-
</nav>
24-
</article>
25-
</div>
17+
<span class="esh-pager-item esh-pager-item--navigable"
18+
id="Next"
19+
[hidden]="buttonStates?.nextDisabled"
20+
(click)="onNextClicked($event)"
21+
aria-label="Next">
22+
Next
23+
</span>
24+
</nav>
25+
</article>
26+
</div>
27+
</div>

‎src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Component, OnInit, OnChanges, Output, Input, EventEmitter } from '@angu
33
import { IPager } from '../../models/pager.model';
44

55
@Component({
6-
selector: 'esh-pager .esh-pager',
6+
selector: 'esh-pager',
77
templateUrl: './pager.html',
88
styleUrls: ['./pager.scss']
99
})

0 commit comments

Comments
 (0)