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;
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="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 class="esh-catalog-hero">
<img class="esh-catalog-title" src="../../images/main_banner_text.png"/>
</div>
<div class="catalog-filter">
<div class="catalog-filter-container">
<div class="esh-catalog-filter">
<div class="esh-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)">
<div data-name="brand" class="esh-catalog-filter-wrapper">
<select class="esh-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)">
<div data-name="type" class="esh-catalog-filter-wrapper">
<select class="esh-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)">
<button class="esh-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">
<div class="esh-catalog-content row">
<div class="col-md-4 esh-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">
<button (click)="addToCart(item)" class="esh-catalog-content-item-button">[ ADD TO CART ]</button>
<div class="esh-catalog-content-item-title">
<span>{{item.name}}</span>
</div>
<div class="catalog-content-item-price">
<div class="esh-catalog-content-item-price">
<span>{{item.price}}</span>
</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 {
display: none;
}
.esh-catalog {
.catalog {
&-banner {
height: 258px;
vertical-align: middle;
&-image {
width: 100%;
position: absolute;
left: 0;
height: 258px;
}
&-text {
position: relative;
top: 75px;
}
$banner-height: 260px;
&-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;
&-filter {
height: 65px;
height: $filter-height;
&-container {
background-color: $color-brand;
height: $filter-height;
left: 0;
position: absolute;
width: 100%;
background-color: $color-brand;
left: 0;
height: 65px;
}
&-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';
@Component({
selector: 'esh-catalog .catalog',
selector: 'esh-catalog .esh-catalog',
styleUrls: ['./catalog.component.scss'],
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 {
position: absolute !important;
top: 30px;
@ -53,7 +53,7 @@
}
&-downArrow {
background-image: url('../images/arrow-down.png');
background-image: url('../../../../images/arrow-down.png');
height: 7px;
width: 10px;
display: inline-block;
@ -65,7 +65,7 @@
}
&-ordersIcon {
background-image: url('../images/my_orders.PNG');
background-image: url('../../../../images/my_orders.png');
display: inline-block;
height: 20px;
width: 20px;
@ -73,10 +73,10 @@
}
&-logOutIcon {
background-image: url('../images/logout.PNG');
background-image: url('../../../../images/logout.PNG');
display: inline-block;
height: 19px;
width: 19px;
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']
},
{ 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: {

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