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

udpate orders layout

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-28 13:00:36 +01:00
parent 2af4d7491e
commit da89aff306
7 changed files with 85 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html
View File

@ -21,7 +21,7 @@
</section> </section>
<div class="container"> <div class="container">
<esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager> <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
<div class="esh-catalog-items row"> <div class="esh-catalog-items row">
<div class="esh-catalog-item col-md-4" <div class="esh-catalog-item col-md-4"
@ -41,6 +41,6 @@
</div> </div>
</div> </div>
<esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager> <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
</div> </div>

1
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss
View File

@ -1,7 +1,6 @@
@import '../variables'; @import '../variables';
.esh-catalog { .esh-catalog {
$banner-height: 260px; $banner-height: 260px;
&-hero { &-hero {

67
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.html
View File

@ -1,43 +1,28 @@
<div class="esh-orders-header"> <div class="esh-orders">
<ul class="container"> <div class="esh-orders-header">
<li class="esh-orders-back" routerLink="/catalog">Back to list</li> <div class="container">
</ul> <a class="esh-orders-back" routerLink="/catalog">Back to list</a>
</div>
<div class="container esh-orders-container">
<div class="row">
<div class="col-md-12">
<section>
<table class="table">
<thead>
<tr>
<th class="esh-orders-order-column">
ORDER NUMBER
</th>
<th>
DATE
</th>
<th>
TOTAL
</th>
<th>
STATUS
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let order of orders">
<td class="esh-orders-order-column">{{order.ordernumber}}</td>
<td class="esh-orders-order-column">{{order.date | date:'short'}}</td>
<td class="esh-orders-order-column">$ {{order.total}}</td>
<td class="esh-orders-order-column">{{order.status}}</td>
<td class="esh-orders-order-column">
<a class="esh-orders-order-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
</td>
</tr>
</tbody>
</table>
</section>
</div> </div>
</div> </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>
</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">
<a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
</div>
</article>
</div>
</div>

91
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss
View File

@ -3,83 +3,52 @@
.esh-orders { .esh-orders {
min-height: 80vh; min-height: 80vh;
$header-height: 4rem;
&-header { &-header {
background-color: #00A69C; background-color: #00A69C;
height: 63px; height: $header-height;
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;
}
li a:hover {
text-decoration: none;
}
} }
&-back { &-back {
float: left !important; color: rgba($color-foreground-brighter, .4);
margin-top: 20px !important; line-height: $header-height;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none;
transition: color $animation-speed-default;
&:hover {
color: $color-foreground-brighter;
transition: color $animation-speed-default;
}
} }
&-container { &-titles {
min-height: 70vh; padding-bottom: 1rem;
padding-top: 40px; padding-top: 2rem;
margin-bottom: 30px;
min-width: 992px;
} }
&-order-column { &-title {
max-width: 120px; font-size: $font-size-l;
vertical-align: middle !important;
} }
&-order-link { &-items {
color: #83d01b; $height: 2rem;
height: $height;
line-height: $height;
} }
&-order-image { &-item {
max-width: 210px; font-weight: $font-weight-semilight;
} }
&-total-value { &-link {
font-size: 20px; color: $color-secondary;
color: #00a69c; text-decoration: none;
} transition: color $animation-speed-default;
&-total-label { &:hover {
font-size: 14px; color: $color-secondary-dark;
color: #404040; transition: color $animation-speed-default;
margin-top: 10px; }
}
&-totals {
border-bottom:none!important;
} }
} }
.table td {
border-top: solid 1px #ddd;
}
.table thead th {
border: none !important;
}

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.ts
View File

@ -3,7 +3,7 @@ import { OrdersService } from './orders.service';
import { IOrder } from '../shared/models/order.model'; import { IOrder } from '../shared/models/order.model';
@Component({ @Component({
selector: 'esh-orders .esh-orders', selector: 'esh-orders',
styleUrls: ['./orders.component.scss'], styleUrls: ['./orders.component.scss'],
templateUrl: './orders.component.html' templateUrl: './orders.component.html'
}) })

48
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html
View File

@ -1,25 +1,27 @@
<div class="container"> <div class="esh-pager">
<article class="esh-pager-wrapper row"> <div class="container">
<nav> <article class="esh-pager-wrapper row">
<span class="esh-pager-item esh-pager-item--navigable" <nav>
id="Previous" <span class="esh-pager-item esh-pager-item--navigable"
[hidden]="buttonStates?.previousDisabled" id="Previous"
(click)="onPreviousCliked($event)" [hidden]="buttonStates?.previousDisabled"
aria-label="Previous"> (click)="onPreviousCliked($event)"
Previous aria-label="Previous">
</span> Previous
</span>
<span class="esh-pager-item"> <span class="esh-pager-item">
Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}} Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}
</span> </span>
<span class="esh-pager-item esh-pager-item--navigable" <span class="esh-pager-item esh-pager-item--navigable"
id="Next" id="Next"
[hidden]="buttonStates?.nextDisabled" [hidden]="buttonStates?.nextDisabled"
(click)="onNextClicked($event)" (click)="onNextClicked($event)"
aria-label="Next"> aria-label="Next">
Next Next
</span> </span>
</nav> </nav>
</article> </article>
</div> </div>
</div>

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts
View File

@ -3,7 +3,7 @@ import { Component, OnInit, OnChanges, Output, Input, EventEmitter } from '@angu
import { IPager } from '../../models/pager.model'; import { IPager } from '../../models/pager.model';
@Component({ @Component({
selector: 'esh-pager .esh-pager', selector: 'esh-pager',
templateUrl: './pager.html', templateUrl: './pager.html',
styleUrls: ['./pager.scss'] styleUrls: ['./pager.scss']
}) })