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({ @Component({
selector: 'app', selector: 'app',
template: require('./app.component.html') template: require('./app.component.html'),
styles: [require('./app.component.css')]
}) })
export class AppComponent { 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) { li .glyphicon {
/* 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 {
margin-right: 10px; margin-right: 10px;
} }
/* Highlighting rules for nav menu items */ /* Highlighting rules for nav menu items */
.main-nav li.link-active a, li.link-active a,
.main-nav li.link-active a:hover, li.link-active a:hover,
.main-nav li.link-active a:focus { li.link-active a:focus {
background-color: #4189C7; background-color: #4189C7;
color: white; color: white;
} }
@@ -32,31 +25,31 @@
height: 100%; height: 100%;
width: calc(25% - 20px); width: calc(25% - 20px);
} }
.main-nav .navbar { .navbar {
border-radius: 0px; border-radius: 0px;
border-width: 0px; border-width: 0px;
height: 100%; height: 100%;
} }
.main-nav .navbar-header { .navbar-header {
float: none; float: none;
} }
.main-nav .navbar-collapse { .navbar-collapse {
border-top: 1px solid #444; border-top: 1px solid #444;
padding: 0px; padding: 0px;
} }
.main-nav .navbar ul { .navbar ul {
float: none; float: none;
} }
.main-nav .navbar li { .navbar li {
float: none; float: none;
font-size: 15px; font-size: 15px;
margin: 6px; margin: 6px;
} }
.main-nav .navbar li a { .navbar li a {
padding: 10px 16px; padding: 10px 16px;
border-radius: 4px; border-radius: 4px;
} }
.main-nav .navbar a { .navbar a {
/* If a menu item's text is too long, truncate it */ /* If a menu item's text is too long, truncate it */
width: 100%; width: 100%;
white-space: nowrap; 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='main-nav'>
<div class='navbar navbar-inverse'> <div class='navbar navbar-inverse'>
<div class='navbar-header'> <div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'> <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span> <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({ @Component({
selector: 'nav-menu', selector: 'nav-menu',
template: require('./navmenu.component.html') template: require('./navmenu.component.html'),
styles: [require('./navmenu.component.css')]
}) })
export class NavMenuComponent { 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 { enableProdMode } from '@angular/core';
import { platformUniversalDynamic } from 'angular2-universal'; import { platformUniversalDynamic } from 'angular2-universal';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
// Include styles in the bundle
import 'bootstrap'; import 'bootstrap';
import './styles/site.css';
// Enable either Hot Module Reloading or production mode // Enable either Hot Module Reloading or production mode
const hotModuleReplacement = module['hot']; const hotModuleReplacement = module['hot'];

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

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

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

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