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-brand-brighter: lighten($color-brand, 20%);
$color-secondary: #83D01B; $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-darker: darken($color-secondary, 20%);
$color-secondary-bright: lighten($color-secondary, 10%); $color-secondary-bright: lighten($color-secondary, 10%);
$color-secondary-brighter: lighten($color-secondary, 20%); $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> </section>
<div class="container"> <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-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 [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager> <esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
</div> </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="container">
<div class="col-xs-4"> <article class="esh-pager-wrapper row">
<nav> <nav>
<ul> <span class="esh-pager-item esh-pager-item--navigable"
<li class="page-item"> id="Previous"
<span class="pager-text pager-previous" id="Previous" [hidden]="buttonStates?.previousDisabled"
[hidden]="buttonStates?.previousDisabled" (click)="onPreviousCliked($event)"
(click)="onPreviousCliked($event)" aria-label="Previous">
aria-label="Previous"> Previous
Previous </span>
</span>
</li> <span class="esh-pager-item">
</ul> 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> </nav>
</div> </article>
<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>
</div> </div>

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

@ -1,30 +1,30 @@
.pager { @import "../../../variables";
margin-bottom: 20px;
margin-top: 20px;
margin-left: 0px;
margin-right: -30px;
&-previous { .esh-pager {
position: absolute;
left: 0; &-wrapper {
top: 0; padding-top: 1rem;
cursor: pointer; text-align: center;
} }
&-text { &-item {
color: #83d01b; $margin: 8vw;
} margin: 0 $margin;
&-next { &--navigable {
position: absolute; cursor: pointer;
right: 15px;
top: 0;
cursor: pointer;
}
&-isDisabled { &:hover {
cursor: not-allowed; color: $color-secondary;
opacity: .5; }
pointer-events: none; }
@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'; import { IPager } from '../../models/pager.model';
@Component({ @Component({
selector: 'esh-pager', selector: 'esh-pager .esh-pager',
templateUrl: './pager.html', templateUrl: './pager.html',
styleUrls: ['./pager.scss'] styleUrls: ['./pager.scss']
}) })