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

merge

Browse Source
This commit is contained in:
Carlos Cañizares Estévez 2016-12-28 09:09:47 +01:00
commit fce5c16ebc
15 changed files with 321 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss Normal file
View 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;
}

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

@ -6,14 +6,14 @@ $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%);
$color-background-dark: #333333;
$color-background-darker: #000000;
$color-background-bright: #EEEEEE;
$color-background-bright: #EEEEFF;
$color-background-brighter: #FFFFFF;
$color-foreground-dark: #333333;
@ -33,7 +33,7 @@ $font-weight-normal: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-size-xs: .5rem; // 8px
$font-size-xs: .65rem; // 10.4px
$font-size-s: .85rem; // 13.6px
$font-size-m: 1rem; // 16px
$font-size-l: 1.25rem; // 20px
@ -49,8 +49,5 @@ $media-screen-xl: 1440px;
$media-screen-xxl: 1680px;
$media-screen-xxxl: 1920px;
// Margins
$margin-center: 10vw;
$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;
// Borders
$border-light: 1px;

68
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html
View File

@ -1,44 +1,38 @@
<div class="app">
<header class="navbar navbar-light navbar-static-top">
<div class="container">
<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>
<header class="navbar navbar-light navbar-static-top">
<div class="container">
<article class="row">
<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 -->
<router-outlet></router-outlet>
</article>
</div>
</header>
<!-- component routing placeholder -->
<router-outlet></router-outlet>
<footer class="app-footer">
<div class="container">
<div 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>
<footer class="esh-app-footer">
<div class="container">
<article class="row">
<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>

44
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.scss
View File

@ -1,44 +1,28 @@
@import './_variables.scss';
@font-face {
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;
.esh-app {
&-footer {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
background-color: black;
$margin: 2.5rem;
$padding: 2.5rem;
background-color: $color-background-darker;
border-top: $border-light solid $color-foreground-bright;
margin-top: $margin;
padding-bottom: $padding;
padding-top: $padding;
width: 100%;
$height: 50px;
&-brand {
margin-top: 25px;
max-width: 231px;
height: 52px;
margin-left: 0px !important;
height: $height;
width: 230px;
}
&-text {
color: $color-secondary;
line-height: $height;
text-align: right;
width: 100%;
height: 100%;
color: #83d01b;
margin-top: 10px;
}
}
}

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

@ -12,7 +12,7 @@ import { SecurityService } from './shared/services/security.service';
*/
@Component({
selector: 'appc-app',
selector: 'esh-app.esh-app',
styleUrls: ['./app.component.scss'],
templateUrl: './app.component.html'
})

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

@ -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="catalog-banner">
<img class="catalog-banner-image" src="../../images/main_banner.png" />
<div class="container">
<img src="../../images/main_banner_text.png" class="catalog-banner-text" />
</div>
</div>
<div class="catalog-filter">
<div class="catalog-filter-container">
<div class="container">
<div data-name="brand" class="catalog-filter-wrapper">
<select class="catalog-filter-select" (change)="onBrandFilterChanged($event, $event.target.value)">
<option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
</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">
<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"
*ngFor="let item of catalog?.data">
<img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
<button class="esh-catalog-button" (click)="addToCart(item)">
[ ADD TO CART ]
</button>
<div class="esh-catalog-name">
<span>{{item.name}}</span>
</div>
<div class="catalog-content-item-price">
<div class="esh-catalog-price">
<span>{{item.price}}</span>
</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>

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

@ -1,125 +1,148 @@
@import '../_variables.scss';
@import '../variables';
select::-ms-expand {
display: none;
}
.esh-catalog {
.catalog {
&-banner {
height: 258px;
vertical-align: middle;
$banner-height: 260px;
&-image {
width: 100%;
position: absolute;
left: 0;
height: 258px;
}
&-text {
position: relative;
top: 75px;
}
&-hero {
background-image: url('../../images/main_banner.png');
background-size: cover;
height: $banner-height;
width: 100%;
}
&-title {
position: relative;
top: $banner-height / 3.5;
}
$filter-height: 65px;
&-filters {
background-color: $color-brand;
height: $filter-height;
}
$filter-padding: .5rem;
&-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 {
position: absolute;
width: 100%;
option {
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 {
margin-top: 10px;
&-label {
display: inline-block;
position: relative;
z-index: 0;
&-item {
text-align: center;
margin-bottom: 20px;
&::before {
color: rgba($color-foreground-brighter, .5);
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 {
width: 255px;
height: 45px;
padding: 10px 20px 10px 20px;
background-color: $color-secondary;
color: white;
font-size: 16px;
margin: 10px 0;
border: none;
cursor: pointer;
}
&-send {
background-color: $color-secondary;
color: $color-foreground-brighter;
cursor: pointer;
font-size: $font-size-m;
margin-top: -$filter-padding * 3;
padding: $filter-padding;
transition: all $animation-speed-default;
&-title {
text-align: center;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
}
&:hover {
background-color: $color-secondary-darker;
transition: all $animation-speed-default;
}
}
&-price {
text-align: center;
font-weight: 900;
font-size: 28px;
}
&-items {
margin-top: 1rem;
}
&-price::before {
content: '$';
}
&-item {
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: '$';
}
}
}

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

@ -8,7 +8,7 @@ import { IPager } from '../shared/models/pager.model';
import { BasketWrapperService} from '../shared/services/basket.wrapper.service';
@Component({
selector: 'esh-catalog .catalog',
selector: 'esh-catalog .esh-catalog',
styleUrls: ['./catalog.component.scss'],
templateUrl: './catalog.component.html'
})

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']
})

14
src/Web/WebSPA/eShopOnContainers.WebSPA/Views/Home/Index.cshtml
View File

@ -1,16 +1,8 @@
<style>
div.app-spinner {
position: fixed;
top: 50%;
left: 50%;
}
</style>
<appc-app asp-prerender-webpack-config="config/webpack.config.js">
<div class="app-spinner">
<esh-app class="esh-app" asp-prerender-webpack-config="config/webpack.config.js">
<div class="preloading">
<i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
</div>
</appc-app>
</esh-app>
<script>
window.user = '@ViewBag.user';

18
src/Web/WebSPA/eShopOnContainers.WebSPA/config/webpack.config.js
View File

@ -22,31 +22,25 @@ module.exports = merge({
loaders: ['awesome-typescript-loader?forkChecker=true ', 'angular2-template-loader', 'angular2-router-loader']
},
{ test: /\.html$/, loader: "html" },
{ test: /\.css/, loader: extractCSS.extract(['css']) },
{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader?sourceMap'] },
{ test: /\.scss$/, loader: 'exports-loader?module.exports.toString()!css-loader!sass-loader' },
{ test: /\.json$/, loader: 'json-loader' },
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
loader: "file-loader"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
loader: "file-loader"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
loader: "file-loader"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
loader: "file-loader"
},
{
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: {

3
src/Web/WebSPA/eShopOnContainers.WebSPA/config/webpack.config.vendor.js
View File

@ -44,7 +44,8 @@ module.exports = {
'@angular/forms',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router'
'@angular/router',
'./Client/globals.scss'
]
},
output: {

13
src/Web/WebSPA/eShopOnContainers.WebSPA/package.json
View File

@ -17,8 +17,6 @@
},
"scripts": {
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"typings": "typings",
"webpack": "webpack",
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot/dist",
@ -33,8 +31,6 @@
"setprod": "set ASPNETCORE_ENVIRONMENT=Production",
"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",
"lint": "npm run tslint \"Client/**/*.ts\"",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./Client/",
"version": "npm run build"
},
"dependencies": {
@ -53,6 +49,7 @@
"aspnet-webpack": "1.0.24",
"bootstrap": "4.0.0-alpha.5",
"core-js": "2.4.1",
"file-loader": "^0.9.0",
"font-awesome": "4.6.3",
"isomorphic-fetch": "2.2.1",
"normalize.css": "5.0.0",
@ -80,7 +77,7 @@
"css-loader": "0.25.0",
"es6-promise": "3.2.1",
"es6-promise-loader": "1.0.2",
"expose-loader": "0.7.1",
"exports-loader": "^0.6.3",
"extendify": "1.0.0",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"file-loader": "0.9.0",
@ -89,18 +86,14 @@
"json-loader": "0.5.4",
"node-sass": "3.9.3",
"parse5": "2.1.5",
"raw-loader": "0.5.1",
"rimraf": "2.5.4",
"sass-loader": "4.0.2",
"source-map-loader": "0.1.5",
"style-loader": "0.13.1",
"ts-helpers": "1.1.1",
"ts-node": "1.4.3",
"tslint": "3.15.1",
"tslint-loader": "2.1.5",
"typedoc": "0.5.0",
"typescript": "2.0.6",
"url-loader": "0.5.7",
"url-loader": "^0.5.7",
"webpack": "2.1.0-beta.25",
"webpack-externals-plugin": "1.0.0",
"webpack-hot-middleware": "2.13.0",