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

fix components layout

pull/49/merge
Quique Fernandez 8 years ago
parent
d77fa14b1f
commit
67d20f2265
3 changed files with 79 additions and 66 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +66
    -53
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
  2. +1
    -1
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.ts
  3. +12
    -12
      src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html

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

@ -1,59 +1,72 @@
<div class="esh-orders-detail-header">
<ul class="container">
<li class="esh-orders-detail-header-back" routerLink="/orders">Back to list</li>
</ul>
</div>
<div class="container esh-orders-detail-container">
<div class="row">
<div class="col-sm-3">
<span>ORDER NUMBER</span><br>
<span>{{order.ordernumber}}</span>
</div>
<div class="col-sm-3">
<span>DATE</span><br>
<span>{{order.date | date:'short'}}</span>
<div class="esh-orders_detail">
<div class="esh-orders_detail-header">
<div class="container">
<a class="esh-orders-back" routerLink="/orders">Back to list</a>
</div>
<div class="col-sm-3">
<span>TOTAL</span><br>
<span>$ {{order.total}}</span>
</div>
<div class="container">
<div class="aaaaaaaa">
<article class="esh-orders_detail-titles row">
<section class="esh-orders_detail-title col-xs-3">Order number</section>
<section class="esh-orders_detail-title col-xs-3">Date</section>
<section class="esh-orders_detail-title col-xs-3">Total</section>
<section class="esh-orders_detail-title col-xs-3">Status</section>
</article>
<article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-2">{{order.ordernumber}}</section>
<section class="esh-orders_detail-item col-xs-4">{{order.date | date:'short'}}</section>
<section class="esh-orders_detail-item col-xs-2">$ {{order.total}}</section>
<section class="esh-orders_detail-item col-xs-2">{{order.status}}</section>
</article>
</div>
<div class="col-sm-3">
<span>STATUS</span><br>
<span>{{order.status}}</span>
<div class="bbbbb">
<article class="esh-orders_detail-titles row">
<section class="esh-orders_detail-title col-xs-3">Shipig address</section>
</article>
<article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-3">{{order.street}}</section>
</article>
<article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-4">{{order.city}}</section>
</article>
<article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-2">{{order.country}}</section>
</article>
</div>
</div>
<div class="row esh-orders-detail-section">
<div class="col-sm-3">
<span>SHIPING ADDRESS</span><br>
<span>{{order.street}}</span><br>
<span>{{order.city}}</span><br>
<span>{{order.country}}</span><br>
<div class="ccccc">
<article class="esh-orders_detail-titles row">
<section class="esh-orders_detail-title col-xs-3">Order details</section>
</article>
<article class="esh-orders_detail-items row"
*ngFor="let item of order.orderitems">
<section class="esh-orders_detail-item col-xs-4">
<img class="esh-orders-detail-image" src="{{item.pictureurl}}">
</section>
<section class="esh-orders_detail-item col-xs-2">{{item.productname}}</section>
<section class="esh-orders_detail-item col-xs-2">$ {{item.unitprice}}</section>
<section class="esh-orders_detail-item col-xs-2">{{item.units}}</section>
<section class="esh-orders_detail-item col-xs-2">$ {{item.units * item.unitprice}}</section>
</article>
</div>
</div>
<div>
<div class="row esh-orders-detail-section"><div class="col-sm-3">ORDER DETAILS</div></div>
<section>
<table class="table">
<tbody>
<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">{{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.units}}</td>
<td class="esh-orders-detail-column esh-orders-detail-total-value">$ {{item.units * item.unitprice}}</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="col-md-9 col-md-3">
</div>
<div class="col-md-3">
<div class="esh-orders-detail-total">
<div class="esh-orders-detail-total-label"><span>TOTAL</span></div>
<div class="esh-orders-detail-total-value"><span>$ 12.00</span></div>
<div class="ddddddd">
<article class="esh-orders_detail-titles row">
<section class="esh-orders_detail-title col-xs-9"></section>
<section class="esh-orders_detail-title col-xs-3">Total</section>
</article>
<article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-9"></section>
<section class="esh-orders_detail-item col-xs-3">$ XX</section>
</article>
</div>
</div>
</div>
</div>

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

@ -4,7 +4,7 @@ import { IOrder } from '../../shared/models/order.model';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'esh-orders-detail .esh-orders-detail',
selector: 'esh-orders_detail',
styleUrls: ['./orders-detail.component.scss'],
templateUrl: './orders-detail.component.html'
})


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

@ -1,28 +1,28 @@
<div class="esh-orders">
<div class="esh-orders-header">
<div class="container">
<a class="esh-orders-back" routerLink="/catalog">Back to list</a>
<a class="esh-orders-back" routerLink="/catalog">Back to catalog</a>
</div>
</div>
<div class="container">
<article class="esh-orders-titles row">
<div class="esh-orders-title col-xs-2">Order number</div>
<div class="esh-orders-title col-xs-4">Date</div>
<div class="esh-orders-title col-xs-2">Total</div>
<div class="esh-orders-title col-xs-2">Status</div>
<div class="esh-orders-title col-xs-2"></div>
<section class="esh-orders-title col-xs-2">Order number</section>
<section class="esh-orders-title col-xs-4">Date</section>
<section class="esh-orders-title col-xs-2">Total</section>
<section class="esh-orders-title col-xs-2">Status</section>
<section class="esh-orders-title col-xs-2"></section>
</article>
<article class="esh-orders-items row"
*ngFor="let order of orders">
<div class="esh-orders-item col-xs-2">{{order.ordernumber}}</div>
<div class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</div>
<div class="esh-orders-item col-xs-2">$ {{order.total}}</div>
<div class="esh-orders-item col-xs-2">{{order.status}}</div>
<div class="esh-orders-item col-xs-2">
<section class="esh-orders-item col-xs-2">{{order.ordernumber}}</section>
<section class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</section>
<section class="esh-orders-item col-xs-2">$ {{order.total}}</section>
<section class="esh-orders-item col-xs-2">{{order.status}}</section>
<section class="esh-orders-item col-xs-2">
<a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
</div>
</section>
</article>
</div>
</div>

Write Preview
Loading…
Cancel
Save