Skip to content

Commit 67d20f2

Browse files
author
Quique Fernandez
committed
fix components layout
1 parent d77fa14 commit 67d20f2

3 files changed

Lines changed: 79 additions & 66 deletions

File tree

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

Lines changed: 66 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,72 @@
1-
<div class="esh-orders-detail-header">
2-
<ul class="container">
3-
<li class="esh-orders-detail-header-back" routerLink="/orders">Back to list</li>
4-
</ul>
5-
</div>
6-
<div class="container esh-orders-detail-container">
7-
<div class="row">
8-
<div class="col-sm-3">
9-
<span>ORDER NUMBER</span><br>
10-
<span>{{order.ordernumber}}</span>
11-
</div>
12-
<div class="col-sm-3">
13-
<span>DATE</span><br>
14-
<span>{{order.date | date:'short'}}</span>
1+
<div class="esh-orders_detail">
2+
<div class="esh-orders_detail-header">
3+
<div class="container">
4+
<a class="esh-orders-back" routerLink="/orders">Back to list</a>
155
</div>
16-
<div class="col-sm-3">
17-
<span>TOTAL</span><br>
18-
<span>$ {{order.total}}</span>
6+
</div>
7+
8+
<div class="container">
9+
<div class="aaaaaaaa">
10+
<article class="esh-orders_detail-titles row">
11+
<section class="esh-orders_detail-title col-xs-3">Order number</section>
12+
<section class="esh-orders_detail-title col-xs-3">Date</section>
13+
<section class="esh-orders_detail-title col-xs-3">Total</section>
14+
<section class="esh-orders_detail-title col-xs-3">Status</section>
15+
</article>
16+
17+
<article class="esh-orders_detail-items row">
18+
<section class="esh-orders_detail-item col-xs-2">{{order.ordernumber}}</section>
19+
<section class="esh-orders_detail-item col-xs-4">{{order.date | date:'short'}}</section>
20+
<section class="esh-orders_detail-item col-xs-2">$ {{order.total}}</section>
21+
<section class="esh-orders_detail-item col-xs-2">{{order.status}}</section>
22+
</article>
1923
</div>
20-
<div class="col-sm-3">
21-
<span>STATUS</span><br>
22-
<span>{{order.status}}</span>
24+
25+
<div class="bbbbb">
26+
<article class="esh-orders_detail-titles row">
27+
<section class="esh-orders_detail-title col-xs-3">Shipig address</section>
28+
</article>
29+
30+
<article class="esh-orders_detail-items row">
31+
<section class="esh-orders_detail-item col-xs-3">{{order.street}}</section>
32+
</article>
33+
34+
<article class="esh-orders_detail-items row">
35+
<section class="esh-orders_detail-item col-xs-4">{{order.city}}</section>
36+
</article>
37+
38+
<article class="esh-orders_detail-items row">
39+
<section class="esh-orders_detail-item col-xs-2">{{order.country}}</section>
40+
</article>
2341
</div>
24-
</div>
25-
<div class="row esh-orders-detail-section">
26-
<div class="col-sm-3">
27-
<span>SHIPING ADDRESS</span><br>
28-
<span>{{order.street}}</span><br>
29-
<span>{{order.city}}</span><br>
30-
<span>{{order.country}}</span><br>
42+
43+
<div class="ccccc">
44+
<article class="esh-orders_detail-titles row">
45+
<section class="esh-orders_detail-title col-xs-3">Order details</section>
46+
</article>
47+
48+
<article class="esh-orders_detail-items row"
49+
*ngFor="let item of order.orderitems">
50+
<section class="esh-orders_detail-item col-xs-4">
51+
<img class="esh-orders-detail-image" src="{{item.pictureurl}}">
52+
</section>
53+
<section class="esh-orders_detail-item col-xs-2">{{item.productname}}</section>
54+
<section class="esh-orders_detail-item col-xs-2">$ {{item.unitprice}}</section>
55+
<section class="esh-orders_detail-item col-xs-2">{{item.units}}</section>
56+
<section class="esh-orders_detail-item col-xs-2">$ {{item.units * item.unitprice}}</section>
57+
</article>
3158
</div>
32-
</div>
33-
<div>
34-
<div class="row esh-orders-detail-section"><div class="col-sm-3">ORDER DETAILS</div></div>
35-
<section>
36-
<table class="table">
37-
<tbody>
38-
<tr *ngFor="let item of order.orderitems">
39-
<td class="esh-orders-detail-column"><img class="esh-orders-detail-image" src="{{item.pictureurl}}"></td>
40-
<td class="esh-orders-detail-column">{{item.productname}}</td>
41-
<td class="esh-orders-detail-column">ROSLYN</td>
42-
<td class="esh-orders-detail-column">$ {{item.unitprice}}</td>
43-
<td class="esh-orders-detail-column">{{item.units}}</td>
44-
<td class="esh-orders-detail-column esh-orders-detail-total-value">$ {{item.units * item.unitprice}}</td>
45-
</tr>
46-
</tbody>
47-
</table>
48-
</section>
49-
</div>
50-
<div class="col-md-9 col-md-3">
51-
52-
</div>
53-
<div class="col-md-3">
54-
<div class="esh-orders-detail-total">
55-
<div class="esh-orders-detail-total-label"><span>TOTAL</span></div>
56-
<div class="esh-orders-detail-total-value"><span>$ 12.00</span></div>
59+
60+
<div class="ddddddd">
61+
<article class="esh-orders_detail-titles row">
62+
<section class="esh-orders_detail-title col-xs-9"></section>
63+
<section class="esh-orders_detail-title col-xs-3">Total</section>
64+
</article>
65+
66+
<article class="esh-orders_detail-items row">
67+
<section class="esh-orders_detail-item col-xs-9"></section>
68+
<section class="esh-orders_detail-item col-xs-3">$ XX</section>
69+
</article>
5770
</div>
5871
</div>
59-
</div>
72+
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { IOrder } from '../../shared/models/order.model';
44
import { ActivatedRoute } from '@angular/router';
55

66
@Component({
7-
selector: 'esh-orders-detail .esh-orders-detail',
7+
selector: 'esh-orders_detail',
88
styleUrls: ['./orders-detail.component.scss'],
99
templateUrl: './orders-detail.component.html'
1010
})

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
<div class="esh-orders">
22
<div class="esh-orders-header">
33
<div class="container">
4-
<a class="esh-orders-back" routerLink="/catalog">Back to list</a>
4+
<a class="esh-orders-back" routerLink="/catalog">Back to catalog</a>
55
</div>
66
</div>
77

88
<div class="container">
99
<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>
10+
<section class="esh-orders-title col-xs-2">Order number</section>
11+
<section class="esh-orders-title col-xs-4">Date</section>
12+
<section class="esh-orders-title col-xs-2">Total</section>
13+
<section class="esh-orders-title col-xs-2">Status</section>
14+
<section class="esh-orders-title col-xs-2"></section>
1515
</article>
1616

1717
<article class="esh-orders-items row"
1818
*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">
19+
<section class="esh-orders-item col-xs-2">{{order.ordernumber}}</section>
20+
<section class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</section>
21+
<section class="esh-orders-item col-xs-2">$ {{order.total}}</section>
22+
<section class="esh-orders-item col-xs-2">{{order.status}}</section>
23+
<section class="esh-orders-item col-xs-2">
2424
<a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
25-
</div>
25+
</section>
2626
</article>
2727
</div>
2828
</div>

0 commit comments

Comments
 (0)