Skip to content

Commit 9d8460a

Browse files
author
Quique Fernandez
committed
Merge branch 'Dev' of https://github.com/dotnet/eShopOnContainers into Dev
2 parents 7c1c0aa + 5ea6248 commit 9d8460a

4 files changed

Lines changed: 117 additions & 103 deletions

File tree

‎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
@@ -65,7 +65,7 @@
6565

6666
<article class="esh-orders_detail-items row">
6767
<section class="esh-orders_detail-item col-xs-10"></section>
68-
<section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ XX</section>
68+
<section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ {{order.total}}</section>
6969
</article>
7070
</section>
7171
</div>

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

Lines changed: 73 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,79 @@
1-
<div class="esh-orders-new-header">
2-
<ul class="container">
3-
<li class="esh-orders-new-header-back" routerLink="/basket">Back to basket</li>
4-
</ul>
1+
<div class="esh-orders_new-header">
2+
<div class="container">
3+
<a class="esh-orders_new-back" routerLink="/basket">Back to basket</a>
4+
</div>
55
</div>
66

7-
<div class="container esh-orders-new-container">
7+
<div class="container">
88
<form [formGroup]="newOrderForm" (ngSubmit)="submitForm(newOrderForm.value)">
9-
<h4>SHIPPING ADDRESS</h4>
10-
<div class="row">
11-
<div class="col-md-6">
12-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['street'].valid && newOrderForm.controls['street'].touched}">
13-
<label>ADDRESS</label>
14-
<input class="form-control" type="text" placeholder="Street" [formControl]="newOrderForm.controls['street']">
15-
<div *ngIf="newOrderForm.controls['street'].hasError('required') && newOrderForm.controls['street'].touched" class="alert alert-danger">Required field.</div>
9+
<section class="esh-orders_new-section">
10+
<h4>SHIPPING ADDRESS</h4>
11+
<div class="row">
12+
<div class="col-md-6">
13+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['street'].valid && newOrderForm.controls['street'].touched}">
14+
<label>ADDRESS</label>
15+
<input class="form-control form-input" type="text" placeholder="Street" [formControl]="newOrderForm.controls['street']">
16+
<div *ngIf="newOrderForm.controls['street'].hasError('required') && newOrderForm.controls['street'].touched" class="alert alert-danger">Required field.</div>
17+
</div>
1618
</div>
17-
</div>
18-
<div class="col-md-6">
19-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['city'].valid && newOrderForm.controls['city'].touched}">
20-
<label>CITY</label>
21-
<input class="form-control" type="text" placeholder="City" [formControl]="newOrderForm.controls['city']">
22-
<div *ngIf="newOrderForm.controls['city'].hasError('required') && newOrderForm.controls['city'].touched" class="alert alert-danger">Required field.</div>
19+
<div class="col-md-6">
20+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['city'].valid && newOrderForm.controls['city'].touched}">
21+
<label>CITY</label>
22+
<input class="form-control form-input" type="text" placeholder="City" [formControl]="newOrderForm.controls['city']">
23+
<div *ngIf="newOrderForm.controls['city'].hasError('required') && newOrderForm.controls['city'].touched" class="alert alert-danger">Required field.</div>
24+
</div>
2325
</div>
24-
</div>
25-
<div class="col-md-6">
26-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['state'].valid && newOrderForm.controls['state'].touched}">
27-
<label>STATE</label>
28-
<input class="form-control" type="text" placeholder="state" [formControl]="newOrderForm.controls['state']">
29-
<div *ngIf="newOrderForm.controls['state'].hasError('required') && newOrderForm.controls['state'].touched" class="alert alert-danger">Required field.</div>
26+
<div class="col-md-6">
27+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['state'].valid && newOrderForm.controls['state'].touched}">
28+
<label>STATE</label>
29+
<input class="form-control form-input" type="text" placeholder="state" [formControl]="newOrderForm.controls['state']">
30+
<div *ngIf="newOrderForm.controls['state'].hasError('required') && newOrderForm.controls['state'].touched" class="alert alert-danger">Required field.</div>
31+
</div>
3032
</div>
31-
</div>
32-
<div class="col-md-6">
33-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['country'].valid && newOrderForm.controls['country'].touched}">
34-
<label>COUNTRY</label>
35-
<input class="form-control" type="text" placeholder="country" [formControl]="newOrderForm.controls['country']">
36-
<div *ngIf="newOrderForm.controls['country'].hasError('required') && newOrderForm.controls['country'].touched" class="alert alert-danger">Required field.</div>
33+
<div class="col-md-6">
34+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['country'].valid && newOrderForm.controls['country'].touched}">
35+
<label>COUNTRY</label>
36+
<input class="form-control form-input" type="text" placeholder="country" [formControl]="newOrderForm.controls['country']">
37+
<div *ngIf="newOrderForm.controls['country'].hasError('required') && newOrderForm.controls['country'].touched" class="alert alert-danger">Required field.</div>
38+
</div>
3739
</div>
3840
</div>
39-
</div>
40-
<br />
41-
<h4>PAYMENT METHOD</h4>
42-
<div class="row">
43-
<div class="col-md-6">
44-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
45-
<label>CARD NUMBER</label>
46-
<input class="form-control" type="text" placeholder="Card number" [formControl]="newOrderForm.controls['cardnumber']">
47-
<div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
41+
</section>
42+
<section class="esh-orders_new-section">
43+
<h4>PAYMENT METHOD</h4>
44+
<div class="row">
45+
<div class="col-md-6">
46+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
47+
<label>CARD NUMBER</label>
48+
<input class="form-control form-input" type="text" placeholder="Card number" [formControl]="newOrderForm.controls['cardnumber']">
49+
<div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
50+
</div>
4851
</div>
49-
</div>
50-
<div class="col-md-6">
51-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardholdername'].valid && newOrderForm.controls['cardholdername'].touched}">
52-
<label>CARDHOLDER NAME</label>
53-
<input class="form-control" type="text" placeholder="Card holder" [formControl]="newOrderForm.controls['cardholdername']">
54-
<div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
52+
<div class="col-md-6">
53+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardholdername'].valid && newOrderForm.controls['cardholdername'].touched}">
54+
<label>CARDHOLDER NAME</label>
55+
<input class="form-control form-input" type="text" placeholder="Card holder" [formControl]="newOrderForm.controls['cardholdername']">
56+
<div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
57+
</div>
5558
</div>
56-
</div>
57-
<div class="col-md-3">
58-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
59-
<label>EXPIRATION DATE</label>
60-
<input class="form-control" type="text" placeholder="Card expiration" [formControl]="newOrderForm.controls['expirationdate']">
61-
<div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
59+
<div class="col-md-3">
60+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
61+
<label>EXPIRATION DATE</label>
62+
<input class="form-control form-input form-input-medium" type="text" placeholder="Card expiration" [formControl]="newOrderForm.controls['expirationdate']">
63+
<div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
64+
</div>
6265
</div>
63-
</div>
64-
<div class="col-md-3">
65-
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
66-
<label>SECURITY CODE</label>
67-
<input class="form-control" type="text" placeholder="Card security Code" [formControl]="newOrderForm.controls['securitycode']">
68-
<div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
66+
<div class="col-md-3">
67+
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
68+
<label>SECURITY CODE</label>
69+
<input class="form-control form-input form-input-small" type="text" placeholder="Card security Code" [formControl]="newOrderForm.controls['securitycode']">
70+
<div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
71+
</div>
6972
</div>
7073
</div>
71-
</div>
72-
<br/>
73-
<div class="col-md-12">
74-
<section>
74+
</section>
75+
<section class="esh-orders_new-section">
76+
<div class="col-md-12">
7577
<table class="table">
7678
<thead>
7779
<tr>
@@ -80,9 +82,6 @@ <h4>PAYMENT METHOD</h4>
8082
</th>
8183
<th>
8284

83-
</th>
84-
<th>
85-
BRAND
8685
</th>
8786
<th>
8887
PRICE
@@ -99,7 +98,6 @@ <h4>PAYMENT METHOD</h4>
9998
<tr *ngFor="let item of order.orderItems">
10099
<td class="esh-orders-detail-column"><img class="esh-orders-detail-image" src="{{item.pictureurl}}"></td>
101100
<td class="esh-orders-detail-column">{{item.productname}}</td>
102-
<td class="esh-orders-detail-column">ROSLYN</td>
103101
<td class="esh-orders-detail-column">$ {{item.unitprice}}</td>
104102
<td class="esh-orders-detail-column">{{item.units}}</td>
105103
<td class="esh-orders-detail-column esh-orders-detail-total-value">$ {{item.units * item.unitprice}}</td>
@@ -113,20 +111,22 @@ <h4>PAYMENT METHOD</h4>
113111
<td>
114112
<div class="cart-total-value">
115113
<div class="cart-total-label"><span>TOTAL</span></div>
116-
<span>{{order.total}}</span>
114+
<span>$ {{order.total}}</span>
117115
</div>
118116
</td>
119117
</tr>
120118
</tbody>
121119
</table>
122-
</section>
123-
</div>
124-
<div class="form-group">
125-
<div class="col-md-8">
126120
</div>
127-
<div class="col-md-4">
128-
<button type="submit" class="btn esh-orders-new-placeOrder" [disabled]="!newOrderForm.valid">[ Place Order ]</button>
121+
</section>
122+
<section class="esh-orders_new-section">
123+
<div class="form-group">
124+
<div class="col-md-8">
125+
</div>
126+
<div class="col-md-4">
127+
<button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid">[ Place Order ]</button>
128+
</div>
129129
</div>
130-
</div>
130+
</section>
131131
</form>
132132
</div>

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

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

3-
.esh-orders-new {
3+
.esh-orders_new {
44
min-height: 80vh;
55

6+
$header-height: 4rem;
7+
68
&-header {
79
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-
}
10+
height: $header-height;
11+
}
2412

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

31-
li a:hover {
32-
text-decoration: none;
20+
&:hover {
21+
color: $color-foreground-brighter;
22+
transition: color $animation-speed-default;
3323
}
3424
}
3525

36-
&-container {
37-
min-height: 70vh;
38-
padding-top: 40px;
39-
margin-bottom: 30px;
26+
&-section {
27+
padding: 1rem 0;
28+
29+
&--right {
30+
text-align: right;
31+
}
4032
}
4133

4234
&-placeOrder {
@@ -57,3 +49,25 @@
5749
font-weight: normal;
5850
}
5951
}
52+
53+
54+
@media screen and (min-width: 992px) {
55+
.form-input {
56+
width: 360px;
57+
max-width: 360px;
58+
}
59+
}
60+
61+
.form-input {
62+
border-radius: 0;
63+
padding: 10px;
64+
height: 45px;
65+
}
66+
67+
.form-input-small {
68+
max-width: 100px!important;
69+
}
70+
71+
.form-input-medium {
72+
width: 150px!important;
73+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
66
import { Router } from '@angular/router';
77

88
@Component({
9-
selector: 'esh-orders-new .esh-orders-new',
9+
selector: 'esh-orders_new',
1010
styleUrls: ['./orders-new.component.scss'],
1111
templateUrl: './orders-new.component.html'
1212
})

0 commit comments

Comments
 (0)