ayan.poddar
/
eShopOnContainers
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 19 Wiki Activity
Browse Source

SPA: some styles for order new component

pull/49/merge
Carlos Cañizares Estévez 8 years ago
parent
0a173117f1
commit
d1081df8a8
4 changed files with 117 additions and 103 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
  2. +73
    -73
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html
  3. +42
    -28
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss
  4. +1
    -1
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts

+ 1
- 1
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html View File

@ -65,7 +65,7 @@
<article class="esh-orders_detail-items row"> <article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-10"></section> <section class="esh-orders_detail-item col-xs-10"></section>
<section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ XX</section>
<section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ {{order.total}}</section>
</article> </article>
</section> </section>
</div> </div>


+ 73
- 73
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html View File

@ -1,77 +1,79 @@
<div class="esh-orders-new-header">
<ul class="container">
<li class="esh-orders-new-header-back" routerLink="/basket">Back to basket</li>
</ul>
<div class="esh-orders_new-header">
<div class="container">
<a class="esh-orders_new-back" routerLink="/basket">Back to basket</a>
</div>
</div> </div>
<div class="container esh-orders-new-container">
<div class="container">
<form [formGroup]="newOrderForm" (ngSubmit)="submitForm(newOrderForm.value)"> <form [formGroup]="newOrderForm" (ngSubmit)="submitForm(newOrderForm.value)">
<h4>SHIPPING ADDRESS</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['street'].valid && newOrderForm.controls['street'].touched}">
<label>ADDRESS</label>
<input class="form-control" type="text" placeholder="Street" [formControl]="newOrderForm.controls['street']">
<div *ngIf="newOrderForm.controls['street'].hasError('required') && newOrderForm.controls['street'].touched" class="alert alert-danger">Required field.</div>
<section class="esh-orders_new-section">
<h4>SHIPPING ADDRESS</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['street'].valid && newOrderForm.controls['street'].touched}">
<label>ADDRESS</label>
<input class="form-control form-input" type="text" placeholder="Street" [formControl]="newOrderForm.controls['street']">
<div *ngIf="newOrderForm.controls['street'].hasError('required') && newOrderForm.controls['street'].touched" class="alert alert-danger">Required field.</div>
</div>
</div> </div>
</div>
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['city'].valid && newOrderForm.controls['city'].touched}">
<label>CITY</label>
<input class="form-control" type="text" placeholder="City" [formControl]="newOrderForm.controls['city']">
<div *ngIf="newOrderForm.controls['city'].hasError('required') && newOrderForm.controls['city'].touched" class="alert alert-danger">Required field.</div>
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['city'].valid && newOrderForm.controls['city'].touched}">
<label>CITY</label>
<input class="form-control form-input" type="text" placeholder="City" [formControl]="newOrderForm.controls['city']">
<div *ngIf="newOrderForm.controls['city'].hasError('required') && newOrderForm.controls['city'].touched" class="alert alert-danger">Required field.</div>
</div>
</div> </div>
</div>
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['state'].valid && newOrderForm.controls['state'].touched}">
<label>STATE</label>
<input class="form-control" type="text" placeholder="state" [formControl]="newOrderForm.controls['state']">
<div *ngIf="newOrderForm.controls['state'].hasError('required') && newOrderForm.controls['state'].touched" class="alert alert-danger">Required field.</div>
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['state'].valid && newOrderForm.controls['state'].touched}">
<label>STATE</label>
<input class="form-control form-input" type="text" placeholder="state" [formControl]="newOrderForm.controls['state']">
<div *ngIf="newOrderForm.controls['state'].hasError('required') && newOrderForm.controls['state'].touched" class="alert alert-danger">Required field.</div>
</div>
</div> </div>
</div>
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['country'].valid && newOrderForm.controls['country'].touched}">
<label>COUNTRY</label>
<input class="form-control" type="text" placeholder="country" [formControl]="newOrderForm.controls['country']">
<div *ngIf="newOrderForm.controls['country'].hasError('required') && newOrderForm.controls['country'].touched" class="alert alert-danger">Required field.</div>
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['country'].valid && newOrderForm.controls['country'].touched}">
<label>COUNTRY</label>
<input class="form-control form-input" type="text" placeholder="country" [formControl]="newOrderForm.controls['country']">
<div *ngIf="newOrderForm.controls['country'].hasError('required') && newOrderForm.controls['country'].touched" class="alert alert-danger">Required field.</div>
</div>
</div> </div>
</div> </div>
</div>
<br />
<h4>PAYMENT METHOD</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
<label>CARD NUMBER</label>
<input class="form-control" type="text" placeholder="Card number" [formControl]="newOrderForm.controls['cardnumber']">
<div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
</section>
<section class="esh-orders_new-section">
<h4>PAYMENT METHOD</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
<label>CARD NUMBER</label>
<input class="form-control form-input" type="text" placeholder="Card number" [formControl]="newOrderForm.controls['cardnumber']">
<div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
</div>
</div> </div>
</div>
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardholdername'].valid && newOrderForm.controls['cardholdername'].touched}">
<label>CARDHOLDER NAME</label>
<input class="form-control" type="text" placeholder="Card holder" [formControl]="newOrderForm.controls['cardholdername']">
<div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
<div class="col-md-6">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardholdername'].valid && newOrderForm.controls['cardholdername'].touched}">
<label>CARDHOLDER NAME</label>
<input class="form-control form-input" type="text" placeholder="Card holder" [formControl]="newOrderForm.controls['cardholdername']">
<div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
</div>
</div> </div>
</div>
<div class="col-md-3">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
<label>EXPIRATION DATE</label>
<input class="form-control" type="text" placeholder="Card expiration" [formControl]="newOrderForm.controls['expirationdate']">
<div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
<div class="col-md-3">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
<label>EXPIRATION DATE</label>
<input class="form-control form-input form-input-medium" type="text" placeholder="Card expiration" [formControl]="newOrderForm.controls['expirationdate']">
<div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
</div>
</div> </div>
</div>
<div class="col-md-3">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
<label>SECURITY CODE</label>
<input class="form-control" type="text" placeholder="Card security Code" [formControl]="newOrderForm.controls['securitycode']">
<div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
<div class="col-md-3">
<div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
<label>SECURITY CODE</label>
<input class="form-control form-input form-input-small" type="text" placeholder="Card security Code" [formControl]="newOrderForm.controls['securitycode']">
<div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
</div>
</div> </div>
</div> </div>
</div>
<br/>
<div class="col-md-12">
<section>
</section>
<section class="esh-orders_new-section">
<div class="col-md-12">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -80,9 +82,6 @@
</th> </th>
<th> <th>
</th>
<th>
BRAND
</th> </th>
<th> <th>
PRICE PRICE
@ -99,7 +98,6 @@
<tr *ngFor="let item of order.orderItems"> <tr *ngFor="let item of order.orderItems">
<td class="esh-orders-detail-column"><img class="esh-orders-detail-image" src="{{item.pictureurl}}"></td> <td class="esh-orders-detail-column"><img class="esh-orders-detail-image" src="{{item.pictureurl}}"></td>
<td class="esh-orders-detail-column">{{item.productname}}</td> <td class="esh-orders-detail-column">{{item.productname}}</td>
<td class="esh-orders-detail-column">ROSLYN</td>
<td class="esh-orders-detail-column">$ {{item.unitprice}}</td> <td class="esh-orders-detail-column">$ {{item.unitprice}}</td>
<td class="esh-orders-detail-column">{{item.units}}</td> <td class="esh-orders-detail-column">{{item.units}}</td>
<td class="esh-orders-detail-column esh-orders-detail-total-value">$ {{item.units * item.unitprice}}</td> <td class="esh-orders-detail-column esh-orders-detail-total-value">$ {{item.units * item.unitprice}}</td>
@ -113,20 +111,22 @@
<td> <td>
<div class="cart-total-value"> <div class="cart-total-value">
<div class="cart-total-label"><span>TOTAL</span></div> <div class="cart-total-label"><span>TOTAL</span></div>
<span>{{order.total}}</span>
<span>$ {{order.total}}</span>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section>
</div>
<div class="form-group">
<div class="col-md-8">
</div> </div>
<div class="col-md-4">
<button type="submit" class="btn esh-orders-new-placeOrder" [disabled]="!newOrderForm.valid">[ Place Order ]</button>
</section>
<section class="esh-orders_new-section">
<div class="form-group">
<div class="col-md-8">
</div>
<div class="col-md-4">
<button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid">[ Place Order ]</button>
</div>
</div> </div>
</div>
</section>
</form> </form>
</div> </div>

+ 42
- 28
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss View File

@ -1,42 +1,34 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.esh-orders-new {
.esh-orders_new {
min-height: 80vh; min-height: 80vh;
$header-height: 4rem;
&-header { &-header {
background-color: #00A69C; 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;
}
height: $header-height;
}
&-back {
float: left !important;
margin-top: 20px !important;
text-transform: uppercase;
}
&-back {
color: rgba($color-foreground-brighter, .4);
line-height: $header-height;
text-transform: uppercase;
text-decoration: none;
transition: color $animation-speed-default;
li a:hover {
text-decoration: none;
&:hover {
color: $color-foreground-brighter;
transition: color $animation-speed-default;
} }
} }
&-container {
min-height: 70vh;
padding-top: 40px;
margin-bottom: 30px;
&-section {
padding: 1rem 0;
&--right {
text-align: right;
}
} }
&-placeOrder { &-placeOrder {
@ -57,3 +49,25 @@
font-weight: normal; font-weight: normal;
} }
} }
@media screen and (min-width: 992px) {
.form-input {
width: 360px;
max-width: 360px;
}
}
.form-input {
border-radius: 0;
padding: 10px;
height: 45px;
}
.form-input-small {
max-width: 100px!important;
}
.form-input-medium {
width: 150px!important;
}

+ 1
- 1
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts View File

@ -6,7 +6,7 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@Component({ @Component({
selector: 'esh-orders-new .esh-orders-new',
selector: 'esh-orders_new',
styleUrls: ['./orders-new.component.scss'], styleUrls: ['./orders-new.component.scss'],
templateUrl: './orders-new.component.html' templateUrl: './orders-new.component.html'
}) })


Write Preview
Loading…
Cancel
Save