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

Update pager layout

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-27 21:41:05 +01:00
parent 242ec56516
commit 3b8a055ffa
5 changed files with 50 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss
View File

@ -6,7 +6,7 @@ $color-brand-bright: lighten($color-brand, 10%);
$color-brand-brighter: lighten($color-brand, 20%);
$color-secondary: #83D01B;
$color-secondary-dark: darken($color-secondary, 10%);
$color-secondary-dark: darken($color-secondary, 5%);
$color-secondary-darker: darken($color-secondary, 20%);
$color-secondary-bright: lighten($color-secondary, 10%);
$color-secondary-brighter: lighten($color-secondary, 20%);

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

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

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

@ -1,31 +1,25 @@
<div class="row pager">
<div class="col-xs-4">
<div class="container">
<article class="esh-pager-wrapper row">
<nav>
<ul>
<li class="page-item">
<span class="pager-text pager-previous" id="Previous"
[hidden]="buttonStates?.previousDisabled"
(click)="onPreviousCliked($event)"
aria-label="Previous">
Previous
</span>
</li>
</ul>
<span class="esh-pager-item esh-pager-item--navigable"
id="Previous"
[hidden]="buttonStates?.previousDisabled"
(click)="onPreviousCliked($event)"
aria-label="Previous">
Previous
</span>
<span class="esh-pager-item">
Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}
</span>
<span class="esh-pager-item esh-pager-item--navigable"
id="Next"
[hidden]="buttonStates?.nextDisabled"
(click)="onNextClicked($event)"
aria-label="Next">
Next
</span>
</nav>
</div>
<div class="col-xs-4 u-align-center"><span>Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}</span></div>
<div class="col-xs-4">
<nav>
<ul>
<li class="page-item">
<span class="pager-text pager-next" id="Next"
[hidden]="buttonStates?.nextDisabled"
(click)="onNextClicked($event)"
aria-label="Next">
Next
</span>
</li>
</ul>
</nav>
</div>
</article>
</div>

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

@ -1,30 +1,30 @@
.pager {
margin-bottom: 20px;
margin-top: 20px;
margin-left: 0px;
margin-right: -30px;
@import "../../../variables";
&-previous {
position: absolute;
left: 0;
top: 0;
cursor: pointer;
.esh-pager {
&-wrapper {
padding-top: 1rem;
text-align: center;
}
&-text {
color: #83d01b;
}
&-item {
$margin: 8vw;
margin: 0 $margin;
&-next {
position: absolute;
right: 15px;
top: 0;
cursor: pointer;
}
&--navigable {
cursor: pointer;
&-isDisabled {
cursor: not-allowed;
opacity: .5;
pointer-events: none;
&:hover {
color: $color-secondary;
}
}
@media screen and (max-width: $media-screen-l) {
font-size: $font-size-s;
}
@media screen and (max-width: $media-screen-m) {
margin: 0 $margin / 2;
}
}
}
}

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';
@Component({
selector: 'esh-pager',
selector: 'esh-pager .esh-pager',
templateUrl: './pager.html',
styleUrls: ['./pager.scss']
})