github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

In Angular2Spa template, use per-component scoped styles. Fixes common config issues like #234.

Browse Source
This commit is contained in:
SteveSandersonMS
2016-09-20 10:06:23 +01:00
parent cd18489f00
commit 19684f2b7d
8 changed files with 25 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/Angular2Spa/ClientApp/app/components/app/app.component.css Normal file
View File

@@ -0,0 +1,6 @@
@media (max-width: 767px) {
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
.body-content {
padding-top: 50px;
}
}

3
templates/Angular2Spa/ClientApp/app/components/app/app.component.ts
View File

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'app',
template: require('./app.component.html')
template: require('./app.component.html'),
styles: [require('./app.component.css')]
})
export class AppComponent {
}

29
templates/Angular2Spa/ClientApp/styles/site.css → templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.css
View File

@@ -1,18 +1,11 @@
@media (max-width: 767px) {
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
.body-content {
padding-top: 50px;
}
}
.main-nav li .glyphicon {
li .glyphicon {
margin-right: 10px;
}
/* Highlighting rules for nav menu items */
.main-nav li.link-active a,
.main-nav li.link-active a:hover,
.main-nav li.link-active a:focus {
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #4189C7;
color: white;
}
@@ -32,31 +25,31 @@
height: 100%;
width: calc(25% - 20px);
}
.main-nav .navbar {
.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.main-nav .navbar-header {
.navbar-header {
float: none;
}
.main-nav .navbar-collapse {
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.main-nav .navbar ul {
.navbar ul {
float: none;
}
.main-nav .navbar li {
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.main-nav .navbar li a {
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.main-nav .navbar a {
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;

2
templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.html
View File

@@ -1,5 +1,5 @@
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>

3
templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts
View File

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'nav-menu',
template: require('./navmenu.component.html')
template: require('./navmenu.component.html'),
styles: [require('./navmenu.component.css')]
})
export class NavMenuComponent {
}

3
templates/Angular2Spa/ClientApp/boot-client.ts
View File

@@ -2,10 +2,7 @@ import 'angular2-universal-polyfills/browser';
import { enableProdMode } from '@angular/core';
import { platformUniversalDynamic } from 'angular2-universal';
import { AppModule } from './app/app.module';
// Include styles in the bundle
import 'bootstrap';
import './styles/site.css';
// Enable either Hot Module Reloading or production mode
const hotModuleReplacement = module['hot'];

1
templates/Angular2Spa/Views/Shared/_Layout.cshtml
View File

@@ -6,7 +6,6 @@
<title>@ViewData["Title"] - WebApplicationBasic</title>
<base href="/" />
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<link rel="stylesheet" href="~/dist/styles.css" asp-append-version="true" />
</head>
<body>
@RenderBody()

9
templates/Angular2Spa/webpack.config.js
View File

@@ -1,9 +1,7 @@
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var isDevBuild = process.env.ASPNETCORE_ENVIRONMENT === 'Development';
var extractCSS = new ExtractTextPlugin('styles.css');
module.exports = {
devtool: isDevBuild ? 'inline-source-map' : null,
@@ -11,9 +9,9 @@ module.exports = {
entry: { main: ['./ClientApp/boot-client.ts'] },
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader?silent=true' },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css/, loader: extractCSS.extract(['css']) }
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
{ test: /\.html$/, include: /ClientApp/, loader: 'raw' },
{ test: /\.css/, include: /ClientApp/, loader: 'raw' }
]
},
output: {
@@ -22,7 +20,6 @@ module.exports = {
publicPath: '/dist/'
},
plugins: [
extractCSS,
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')