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

Refactor webpack

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-27 17:05:44 +01:00
parent 07e863502d
commit e17b44a1d5
7 changed files with 51 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss
View File

@ -28,3 +28,7 @@ body {
position: fixed; position: fixed;
top: 50%; top: 50%;
} }
select::-ms-expand {
display: none;
}

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

@ -1,38 +1,35 @@
<div class="container"> <div class="container">
<div class="catalog-banner"> <div class="esh-catalog-hero">
<img class="catalog-banner-image" src="../../images/main_banner.png" /> <img class="esh-catalog-title" src="../../images/main_banner_text.png"/>
<div class="container">
<img src="../../images/main_banner_text.png" class="catalog-banner-text" />
</div>
</div> </div>
<div class="catalog-filter"> <div class="esh-catalog-filter">
<div class="catalog-filter-container"> <div class="esh-catalog-filter-container">
<div class="container"> <div class="container">
<div data-name="brand" class="catalog-filter-wrapper"> <div data-name="brand" class="esh-catalog-filter-wrapper">
<select class="catalog-filter-select" (change)="onBrandFilterChanged($event, $event.target.value)"> <select class="esh-catalog-filter-select" (change)="onBrandFilterChanged($event, $event.target.value)">
<option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option> <option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
</select> </select>
</div> </div>
<div data-name="type" class="catalog-filter-wrapper"> <div data-name="type" class="esh-catalog-filter-wrapper">
<select class="catalog-filter-select" (change)="onTypeFilterChanged($event, $event.target.value)"> <select class="esh-catalog-filter-select" (change)="onTypeFilterChanged($event, $event.target.value)">
<option *ngFor="let type of types" [value]="type.id">{{type.type}}</option> <option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
</select> </select>
</div> </div>
<button class="catalog-filter-button" (click)="onFilterApplied($event)"> <button class="esh-catalog-filter-button" (click)="onFilterApplied($event)">
<img src="../../images/arrow-right.svg"> <img src="../../images/arrow-right.svg">
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager> <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
<div class="catalog-content row"> <div class="esh-catalog-content row">
<div class="col-md-4 catalog-content-item" *ngFor="let item of catalog?.data"> <div class="col-md-4 esh-catalog-content-item" *ngFor="let item of catalog?.data">
<img src="{{item.pictureUri}}" /> <img src="{{item.pictureUri}}" />
<button (click)="addToCart(item)" class="catalog-content-item-button">[ ADD TO CART ]</button> <button (click)="addToCart(item)" class="esh-catalog-content-item-button">[ ADD TO CART ]</button>
<div class="catalog-content-item-title"> <div class="esh-catalog-content-item-title">
<span>{{item.name}}</span> <span>{{item.name}}</span>
</div> </div>
<div class="catalog-content-item-price"> <div class="esh-catalog-content-item-price">
<span>{{item.price}}</span> <span>{{item.price}}</span>
</div> </div>
</div> </div>

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

@ -1,36 +1,30 @@
@import '../_variables.scss'; @import '../variables';
select::-ms-expand { .esh-catalog {
display: none;
}
.catalog { $banner-height: 260px;
&-banner { &-hero {
height: 258px; background-image: url('../../images/main_banner.png');
vertical-align: middle; background-size: cover;
height: $banner-height;
&-image { width: 100%;
width: 100%;
position: absolute;
left: 0;
height: 258px;
}
&-text {
position: relative;
top: 75px;
}
} }
&-title {
position: relative;
top: $banner-height / 3.5;
}
$filter-height: 65px;
&-filter { &-filter {
height: 65px; height: $filter-height;
&-container { &-container {
background-color: $color-brand;
height: $filter-height;
left: 0;
position: absolute; position: absolute;
width: 100%; width: 100%;
background-color: $color-brand;
left: 0;
height: 65px;
} }
&-button { &-button {

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

10
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss
View File

@ -1,4 +1,4 @@
.identity { /*.identity {
&-user { &-user {
position: absolute !important; position: absolute !important;
top: 30px; top: 30px;
@ -53,7 +53,7 @@
} }
&-downArrow { &-downArrow {
background-image: url('../images/arrow-down.png'); background-image: url('../../../../images/arrow-down.png');
height: 7px; height: 7px;
width: 10px; width: 10px;
display: inline-block; display: inline-block;
@ -65,7 +65,7 @@
} }
&-ordersIcon { &-ordersIcon {
background-image: url('../images/my_orders.PNG'); background-image: url('../../../../images/my_orders.png');
display: inline-block; display: inline-block;
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -73,10 +73,10 @@
} }
&-logOutIcon { &-logOutIcon {
background-image: url('../images/logout.PNG'); background-image: url('../../../../images/logout.PNG');
display: inline-block; display: inline-block;
height: 19px; height: 19px;
width: 19px; width: 19px;
margin-left: 15px; margin-left: 15px;
} }
} }*/

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'] 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: {

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

@ -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",