github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-25 11:07:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change Angular 2 template to use app-style layout, like the React template

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-29 11:11:07 +00:00
parent d102fdb363
commit 97ac684652
10 changed files with 134 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
templates/Angular2Spa/ClientApp/components/app/app.css
View File

@@ -1,21 +1,6 @@
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-top: 50px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Carousel */
.carousel-caption p {
font-size: 20px;
line-height: 1.4;
@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;
}
}

30
templates/Angular2Spa/ClientApp/components/app/app.html
View File

@@ -1,28 +1,10 @@
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" [routerLink]="['/Home']">WebApplicationBasic</a>
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-3'>
<nav-menu></nav-menu>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a [routerLink]="['/Home']">Home</a></li>
<li><a [routerLink]="['/About']">About</a></li>
<li><a [routerLink]="['/Counter']">Counter</a></li>
</ul>
<div class='col-sm-9 body-content'>
<router-outlet></router-outlet>
</div>
</div>
</div>
<div class="container body-content">
<router-outlet></router-outlet>
<hr />
<footer>
<p>&copy; 2016 - WebApplicationBasic</p>
</footer>
</div>

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

@@ -1,6 +1,7 @@
import * as ng from 'angular2/core';
import * as router from 'angular2/router';
import { Http, HTTP_BINDINGS } from 'angular2/http';
import { NavMenu } from '../nav-menu/nav-menu.ts';
import { Home } from '../home/home.ts';
import { About } from '../about/about';
import { Counter } from '../counter/counter';
@@ -16,7 +17,7 @@ import { Counter } from '../counter/counter';
@ng.View({
template: require('./app.html'),
styles: [require('./app.css')],
directives: [router.ROUTER_DIRECTIVES]
directives: [NavMenu, router.ROUTER_DIRECTIVES]
})
export class App {
}