merge
This commit is contained in:
Carlos Cañizares Estévez
commit
fce5c16ebc
41
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss
Normal file
41
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
@import './modules/_variables.scss';
|
||||||
|
|
||||||
|
$dist: './fonts/Montserrat-Regular';
|
||||||
|
@font-face {
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url("./fonts/Montserrat-Regular.eot?") format("eot"),url("./fonts/Montserrat-Regular.woff") format("woff"),url("./fonts/Montserrat-Regular.ttf") format("truetype"),url("./fonts/Montserrat-Regular.svg#Montserrat") format("svg")
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-weight: 700;
|
||||||
|
src: url("./fonts/Montserrat-Bold.eot?") format("eot"),url("./fonts/Montserrat-Bold.woff") format("woff"),url("./fonts/Montserrat-Bold.ttf") format("truetype"),url("./fonts/Montserrat-Bold.svg#Montserrat") format("svg")
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: Montserrat,sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
*,
|
||||||
|
*::after,
|
||||||
|
*::before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preloading {
|
||||||
|
color: $color-brand;
|
||||||
|
display: block;
|
||||||
|
font-size: $font-size-xl;
|
||||||
|
left: 50%;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
select::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@ -6,14 +6,14 @@ $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%);
|
||||||
|
|
||||||
$color-background-dark: #333333;
|
$color-background-dark: #333333;
|
||||||
$color-background-darker: #000000;
|
$color-background-darker: #000000;
|
||||||
$color-background-bright: #EEEEEE;
|
$color-background-bright: #EEEEFF;
|
||||||
$color-background-brighter: #FFFFFF;
|
$color-background-brighter: #FFFFFF;
|
||||||
|
|
||||||
$color-foreground-dark: #333333;
|
$color-foreground-dark: #333333;
|
||||||
@ -33,7 +33,7 @@ $font-weight-normal: 400;
|
|||||||
$font-weight-semibold: 600;
|
$font-weight-semibold: 600;
|
||||||
$font-weight-bold: 700;
|
$font-weight-bold: 700;
|
||||||
|
|
||||||
$font-size-xs: .5rem; // 8px
|
$font-size-xs: .65rem; // 10.4px
|
||||||
$font-size-s: .85rem; // 13.6px
|
$font-size-s: .85rem; // 13.6px
|
||||||
$font-size-m: 1rem; // 16px
|
$font-size-m: 1rem; // 16px
|
||||||
$font-size-l: 1.25rem; // 20px
|
$font-size-l: 1.25rem; // 20px
|
||||||
@ -49,8 +49,5 @@ $media-screen-xl: 1440px;
|
|||||||
$media-screen-xxl: 1680px;
|
$media-screen-xxl: 1680px;
|
||||||
$media-screen-xxxl: 1920px;
|
$media-screen-xxxl: 1920px;
|
||||||
|
|
||||||
// Margins
|
// Borders
|
||||||
$margin-center: 10vw;
|
$border-light: 1px;
|
||||||
|
|
||||||
$medias: xxs, xs, s, m, l, xl, xxl, xxxl;
|
|
||||||
$mediavalues: $media-screen-xxs, $media-screen-xs, $media-screen-s, $media-screen-m, $media-screen-l, $media-screen-xl, $media-screen-xxl, $media-screen-xxxl;
|
|
||||||
|
|||||||
@ -1,44 +1,38 @@
|
|||||||
<div class="app">
|
<header class="navbar navbar-light navbar-static-top">
|
||||||
<header class="navbar navbar-light navbar-static-top">
|
<div class="container">
|
||||||
<div class="container">
|
<article class="row">
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<a class="navbar-brand" routerLink="catalog">
|
|
||||||
<img src="../images/brand.png" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-2">
|
|
||||||
<esh-basket-status *ngIf="Authenticated"></esh-basket-status>
|
|
||||||
<esh-identity></esh-identity>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
|
<section class="col-sm-10">
|
||||||
|
<a class="navbar-brand" routerLink="catalog">
|
||||||
|
<img src="../images/brand.png" />
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="col-sm-2">
|
||||||
|
<esh-basket-status *ngIf="Authenticated"></esh-basket-status>
|
||||||
|
<esh-identity></esh-identity>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- component routing placeholder -->
|
</article>
|
||||||
<router-outlet></router-outlet>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- component routing placeholder -->
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
|
||||||
<footer class="app-footer">
|
<footer class="esh-app-footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<article class="row">
|
||||||
<div class="col-sm-6">
|
|
||||||
<br>
|
|
||||||
<div class="app-footer-brand">
|
|
||||||
<img src="../images/brand_dark.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<div class="app-footer-text hidden-xs">e-ShoponContainers. All right reserved</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<section class="col-sm-6">
|
||||||
|
<img class="esh-app-footer-brand" src="../images/brand_dark.png" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="col-sm-6">
|
||||||
|
<div class="esh-app-footer-text hidden-xs"> e-ShoponContainers. All right reserved </div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|||||||
@ -1,44 +1,28 @@
|
|||||||
@import './_variables.scss';
|
@import './_variables.scss';
|
||||||
|
|
||||||
@font-face {
|
.esh-app {
|
||||||
font-family: Montserrat;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url("../dist/fonts/Montserrat-Regular.eot?") format("eot"),url("../dist/fonts/Montserrat-Regular.woff") format("woff"),url("../dist/fonts/Montserrat-Regular.ttf") format("truetype"),url("../dist/fonts/Montserrat-Regular.svg#Montserrat") format("svg")
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: Montserrat;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url("../dist/fonts/Montserrat-Bold.eot?") format("eot"),url("../dist/fonts/Montserrat-Bold.woff") format("woff"),url("../dist/fonts/Montserrat-Bold.ttf") format("truetype"),url("../dist/fonts/Montserrat-Bold.svg#Montserrat") format("svg")
|
|
||||||
}
|
|
||||||
|
|
||||||
.app {
|
|
||||||
font-family: Montserrat,sans-serif;
|
|
||||||
|
|
||||||
&-footer {
|
&-footer {
|
||||||
padding-top: 40px;
|
$margin: 2.5rem;
|
||||||
padding-bottom: 40px;
|
$padding: 2.5rem;
|
||||||
margin-top: 40px;
|
|
||||||
border-top: 1px solid #eee;
|
background-color: $color-background-darker;
|
||||||
background-color: black;
|
border-top: $border-light solid $color-foreground-bright;
|
||||||
|
margin-top: $margin;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
padding-top: $padding;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
$height: 50px;
|
||||||
&-brand {
|
&-brand {
|
||||||
margin-top: 25px;
|
height: $height;
|
||||||
max-width: 231px;
|
width: 230px;
|
||||||
height: 52px;
|
|
||||||
margin-left: 0px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-text {
|
&-text {
|
||||||
|
color: $color-secondary;
|
||||||
|
line-height: $height;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
color: #83d01b;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -12,7 +12,7 @@ import { SecurityService } from './shared/services/security.service';
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'appc-app',
|
selector: 'esh-app.esh-app',
|
||||||
styleUrls: ['./app.component.scss'],
|
styleUrls: ['./app.component.scss'],
|
||||||
templateUrl: './app.component.html'
|
templateUrl: './app.component.html'
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,41 +1,46 @@
|
|||||||
|
<section class="esh-catalog-hero">
|
||||||
|
<div class="container">
|
||||||
|
<img class="esh-catalog-title" src="../../images/main_banner_text.png" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="esh-catalog-filters">
|
||||||
|
<div class="container">
|
||||||
|
<label class="esh-catalog-label" data-title="brand">
|
||||||
|
<select class="esh-catalog-filter" (change)="onBrandFilterChanged($event, $event.target.value)">
|
||||||
|
<option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label class="esh-catalog-label" data-title="type">
|
||||||
|
<select class="esh-catalog-filter" (change)="onTypeFilterChanged($event, $event.target.value)">
|
||||||
|
<option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<img class="esh-catalog-send" (click)="onFilterApplied($event)" src="../../images/arrow-right.svg" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="catalog-banner">
|
<esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
|
||||||
<img class="catalog-banner-image" src="../../images/main_banner.png" />
|
|
||||||
<div class="container">
|
<div class="esh-catalog-items row">
|
||||||
<img src="../../images/main_banner_text.png" class="catalog-banner-text" />
|
<div class="esh-catalog-item col-md-4"
|
||||||
</div>
|
*ngFor="let item of catalog?.data">
|
||||||
</div>
|
|
||||||
<div class="catalog-filter">
|
<img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
|
||||||
<div class="catalog-filter-container">
|
<button class="esh-catalog-button" (click)="addToCart(item)">
|
||||||
<div class="container">
|
[ ADD TO CART ]
|
||||||
<div data-name="brand" class="catalog-filter-wrapper">
|
</button>
|
||||||
<select class="catalog-filter-select" (change)="onBrandFilterChanged($event, $event.target.value)">
|
|
||||||
<option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
|
<div class="esh-catalog-name">
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div data-name="type" class="catalog-filter-wrapper">
|
|
||||||
<select class="catalog-filter-select" (change)="onTypeFilterChanged($event, $event.target.value)">
|
|
||||||
<option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<button class="catalog-filter-button" (click)="onFilterApplied($event)">
|
|
||||||
<img src="../../images/arrow-right.svg">
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
|
|
||||||
<div class="catalog-content row">
|
|
||||||
<div class="col-md-4 catalog-content-item" *ngFor="let item of catalog?.data">
|
|
||||||
<img src="{{item.pictureUri}}" />
|
|
||||||
<button (click)="addToCart(item)" class="catalog-content-item-button">[ ADD TO CART ]</button>
|
|
||||||
<div class="catalog-content-item-title">
|
|
||||||
<span>{{item.name}}</span>
|
<span>{{item.name}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-content-item-price">
|
<div class="esh-catalog-price">
|
||||||
<span>{{item.price}}</span>
|
<span>{{item.price}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
|
|
||||||
</div>
|
<esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,125 +1,148 @@
|
|||||||
@import '../_variables.scss';
|
@import '../variables';
|
||||||
|
|
||||||
select::-ms-expand {
|
.esh-catalog {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catalog {
|
$banner-height: 260px;
|
||||||
&-banner {
|
|
||||||
height: 258px;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&-image {
|
&-hero {
|
||||||
width: 100%;
|
background-image: url('../../images/main_banner.png');
|
||||||
position: absolute;
|
background-size: cover;
|
||||||
left: 0;
|
height: $banner-height;
|
||||||
height: 258px;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
position: relative;
|
|
||||||
top: 75px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
position: relative;
|
||||||
|
top: $banner-height / 3.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
$filter-height: 65px;
|
||||||
|
|
||||||
|
&-filters {
|
||||||
|
background-color: $color-brand;
|
||||||
|
height: $filter-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
$filter-padding: .5rem;
|
||||||
|
|
||||||
&-filter {
|
&-filter {
|
||||||
height: 65px;
|
background-color: transparent;
|
||||||
|
border-color: $color-brand-bright;
|
||||||
|
color: $color-foreground-brighter;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-top: .5rem;
|
||||||
|
outline-color: $color-secondary;
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-left: $filter-padding;
|
||||||
|
padding-right: $filter-padding;
|
||||||
|
padding-top: $filter-padding * 3;
|
||||||
|
min-width: 140px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
|
||||||
&-container {
|
option {
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
background-color: $color-brand;
|
background-color: $color-brand;
|
||||||
left: 0;
|
|
||||||
height: 65px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-button {
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
padding: 6px 20px 10px 8px;
|
|
||||||
background-color: $color-secondary;
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 10px 0;
|
|
||||||
border: none;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-select {
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 10px;
|
|
||||||
margin-right: 20px;
|
|
||||||
color: #fff;
|
|
||||||
padding-top: 20px;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
min-width: 140px;
|
|
||||||
border-color: #37c7ca;
|
|
||||||
max-height: 43px;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
|
|
||||||
& option {
|
|
||||||
background-color: #00a69c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-wrapper {
|
|
||||||
z-index: 0;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-wrapper::before {
|
|
||||||
content: attr(data-name);
|
|
||||||
opacity: 0.5;
|
|
||||||
z-index: 1;
|
|
||||||
text-transform: uppercase;
|
|
||||||
position: absolute;
|
|
||||||
font-size: 10px;
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-left: 21px;
|
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-content {
|
&-label {
|
||||||
margin-top: 10px;
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
&-item {
|
&::before {
|
||||||
text-align: center;
|
color: rgba($color-foreground-brighter, .5);
|
||||||
margin-bottom: 20px;
|
content: attr(data-title);
|
||||||
|
font-size: $font-size-xs;
|
||||||
|
margin-top: $font-size-xs;
|
||||||
|
margin-left: $filter-padding;
|
||||||
|
position: absolute;
|
||||||
|
text-transform: uppercase;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&-image {
|
&::after {
|
||||||
}
|
background-image: url('../../images/arrow-down.png');
|
||||||
|
height: 7px; //png height
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: $filter-padding * 3;
|
||||||
|
top: $filter-padding * 5;
|
||||||
|
width: 10px; //png width
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&-button {
|
&-send {
|
||||||
width: 255px;
|
background-color: $color-secondary;
|
||||||
height: 45px;
|
color: $color-foreground-brighter;
|
||||||
padding: 10px 20px 10px 20px;
|
cursor: pointer;
|
||||||
background-color: $color-secondary;
|
font-size: $font-size-m;
|
||||||
color: white;
|
margin-top: -$filter-padding * 3;
|
||||||
font-size: 16px;
|
padding: $filter-padding;
|
||||||
margin: 10px 0;
|
transition: all $animation-speed-default;
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
&:hover {
|
||||||
text-align: center;
|
background-color: $color-secondary-darker;
|
||||||
text-transform: uppercase;
|
transition: all $animation-speed-default;
|
||||||
font-weight: 300;
|
}
|
||||||
font-size: 16px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&-price {
|
&-items {
|
||||||
text-align: center;
|
margin-top: 1rem;
|
||||||
font-weight: 900;
|
}
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-price::before {
|
&-item {
|
||||||
content: '$';
|
text-align: center;
|
||||||
}
|
margin-bottom: 1.5rem;
|
||||||
|
width: 33%;
|
||||||
|
|
||||||
|
@media screen and (max-width: $media-screen-m) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $media-screen-s) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-thumbnail {
|
||||||
|
max-width: 370px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-button {
|
||||||
|
background-color: $color-secondary;
|
||||||
|
border: none;
|
||||||
|
color: $color-foreground-brighter;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: $font-size-m;
|
||||||
|
height: 3rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
transition: all $animation-speed-default;
|
||||||
|
width: 80%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-secondary-darker;
|
||||||
|
transition: all $animation-speed-default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-name {
|
||||||
|
font-size: $font-size-m;
|
||||||
|
font-weight: $font-weight-semilight;
|
||||||
|
margin-top: .5rem;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-price {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 28px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '$';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,7 +8,7 @@ import { IPager } from '../shared/models/pager.model';
|
|||||||
import { BasketWrapperService} from '../shared/services/basket.wrapper.service';
|
import { BasketWrapperService} from '../shared/services/basket.wrapper.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'esh-catalog .catalog',
|
selector: 'esh-catalog .esh-catalog',
|
||||||
styleUrls: ['./catalog.component.scss'],
|
styleUrls: ['./catalog.component.scss'],
|
||||||
templateUrl: './catalog.component.html'
|
templateUrl: './catalog.component.html'
|
||||||
})
|
})
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -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']
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,16 +1,8 @@
|
|||||||
<style>
|
<esh-app class="esh-app" asp-prerender-webpack-config="config/webpack.config.js">
|
||||||
div.app-spinner {
|
<div class="preloading">
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<appc-app asp-prerender-webpack-config="config/webpack.config.js">
|
|
||||||
<div class="app-spinner">
|
|
||||||
<i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
|
<i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
|
||||||
</div>
|
</div>
|
||||||
</appc-app>
|
</esh-app>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.user = '@ViewBag.user';
|
window.user = '@ViewBag.user';
|
||||||
|
|||||||
@ -22,31 +22,25 @@ module.exports = merge({
|
|||||||
loaders: ['awesome-typescript-loader?forkChecker=true ', 'angular2-template-loader', 'angular2-router-loader']
|
loaders: ['awesome-typescript-loader?forkChecker=true ', 'angular2-template-loader', 'angular2-router-loader']
|
||||||
},
|
},
|
||||||
{ test: /\.html$/, loader: "html" },
|
{ test: /\.html$/, loader: "html" },
|
||||||
{ test: /\.css/, loader: extractCSS.extract(['css']) },
|
{ test: /\.scss$/, loader: 'exports-loader?module.exports.toString()!css-loader!sass-loader' },
|
||||||
{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader?sourceMap'] },
|
|
||||||
{ test: /\.json$/, loader: 'json-loader' },
|
{ test: /\.json$/, loader: 'json-loader' },
|
||||||
{
|
{
|
||||||
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
|
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
|
||||||
loader: "file"
|
loader: "file-loader"
|
||||||
}, {
|
}, {
|
||||||
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
|
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
|
||||||
loader: "file"
|
loader: "file-loader"
|
||||||
}, {
|
}, {
|
||||||
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
|
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
|
||||||
loader: "file"
|
loader: "file-loader"
|
||||||
}, {
|
}, {
|
||||||
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
|
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
|
||||||
loader: "file"
|
loader: "file-loader"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(png|jpg|gif|svg)$/,
|
test: /\.(png|jpg|gif|svg)$/,
|
||||||
loader: "file"
|
loader: "file-loader?name=images/[name].[ext]"
|
||||||
}
|
}
|
||||||
|
|
||||||
// {
|
|
||||||
// test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
|
|
||||||
//loader: "url?limit=10000&mimetype=image/svg+xml"
|
|
||||||
//}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
entry: {
|
entry: {
|
||||||
|
|||||||
@ -44,7 +44,8 @@ module.exports = {
|
|||||||
'@angular/forms',
|
'@angular/forms',
|
||||||
'@angular/platform-browser',
|
'@angular/platform-browser',
|
||||||
'@angular/platform-browser-dynamic',
|
'@angular/platform-browser-dynamic',
|
||||||
'@angular/router'
|
'@angular/router',
|
||||||
|
'./Client/globals.scss'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
|
|||||||
@ -17,8 +17,6 @@
|
|||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"rimraf": "rimraf",
|
"rimraf": "rimraf",
|
||||||
"tslint": "tslint",
|
|
||||||
"typedoc": "typedoc",
|
|
||||||
"typings": "typings",
|
"typings": "typings",
|
||||||
"webpack": "webpack",
|
"webpack": "webpack",
|
||||||
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot/dist",
|
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot/dist",
|
||||||
@ -33,8 +31,6 @@
|
|||||||
"setprod": "set ASPNETCORE_ENVIRONMENT=Production",
|
"setprod": "set ASPNETCORE_ENVIRONMENT=Production",
|
||||||
"build:dev": "npm run setdev && npm run clean:dist && npm run build:vendor && npm run build:main",
|
"build:dev": "npm run setdev && npm run clean:dist && npm run build:vendor && npm run build:main",
|
||||||
"build:prod": "npm run setprod && npm run clean:dist && npm run build:vendor && npm run build:main",
|
"build:prod": "npm run setprod && npm run clean:dist && npm run build:vendor && npm run build:main",
|
||||||
"lint": "npm run tslint \"Client/**/*.ts\"",
|
|
||||||
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./Client/",
|
|
||||||
"version": "npm run build"
|
"version": "npm run build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -53,6 +49,7 @@
|
|||||||
"aspnet-webpack": "1.0.24",
|
"aspnet-webpack": "1.0.24",
|
||||||
"bootstrap": "4.0.0-alpha.5",
|
"bootstrap": "4.0.0-alpha.5",
|
||||||
"core-js": "2.4.1",
|
"core-js": "2.4.1",
|
||||||
|
"file-loader": "^0.9.0",
|
||||||
"font-awesome": "4.6.3",
|
"font-awesome": "4.6.3",
|
||||||
"isomorphic-fetch": "2.2.1",
|
"isomorphic-fetch": "2.2.1",
|
||||||
"normalize.css": "5.0.0",
|
"normalize.css": "5.0.0",
|
||||||
@ -80,7 +77,7 @@
|
|||||||
"css-loader": "0.25.0",
|
"css-loader": "0.25.0",
|
||||||
"es6-promise": "3.2.1",
|
"es6-promise": "3.2.1",
|
||||||
"es6-promise-loader": "1.0.2",
|
"es6-promise-loader": "1.0.2",
|
||||||
"expose-loader": "0.7.1",
|
"exports-loader": "^0.6.3",
|
||||||
"extendify": "1.0.0",
|
"extendify": "1.0.0",
|
||||||
"extract-text-webpack-plugin": "2.0.0-beta.4",
|
"extract-text-webpack-plugin": "2.0.0-beta.4",
|
||||||
"file-loader": "0.9.0",
|
"file-loader": "0.9.0",
|
||||||
@ -89,18 +86,14 @@
|
|||||||
"json-loader": "0.5.4",
|
"json-loader": "0.5.4",
|
||||||
"node-sass": "3.9.3",
|
"node-sass": "3.9.3",
|
||||||
"parse5": "2.1.5",
|
"parse5": "2.1.5",
|
||||||
"raw-loader": "0.5.1",
|
|
||||||
"rimraf": "2.5.4",
|
"rimraf": "2.5.4",
|
||||||
"sass-loader": "4.0.2",
|
"sass-loader": "4.0.2",
|
||||||
"source-map-loader": "0.1.5",
|
|
||||||
"style-loader": "0.13.1",
|
|
||||||
"ts-helpers": "1.1.1",
|
"ts-helpers": "1.1.1",
|
||||||
"ts-node": "1.4.3",
|
"ts-node": "1.4.3",
|
||||||
"tslint": "3.15.1",
|
"tslint": "3.15.1",
|
||||||
"tslint-loader": "2.1.5",
|
|
||||||
"typedoc": "0.5.0",
|
"typedoc": "0.5.0",
|
||||||
"typescript": "2.0.6",
|
"typescript": "2.0.6",
|
||||||
"url-loader": "0.5.7",
|
"url-loader": "^0.5.7",
|
||||||
"webpack": "2.1.0-beta.25",
|
"webpack": "2.1.0-beta.25",
|
||||||
"webpack-externals-plugin": "1.0.0",
|
"webpack-externals-plugin": "1.0.0",
|
||||||
"webpack-hot-middleware": "2.13.0",
|
"webpack-hot-middleware": "2.13.0",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user