fix components layout
This commit is contained in:
Quique Fernandez
parent
d77fa14b1f
commit
67d20f2265
@ -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 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>
|
||||
|
||||
<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="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 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 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 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>
|
||||
<div class="col-sm-3">
|
||||
<span>TOTAL</span><br>
|
||||
<span>$ {{order.total}}</span>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<span>STATUS</span><br>
|
||||
<span>{{order.status}}</span>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -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'
|
||||
})
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user