From 97ac684652b79a661619f53379cfd2dba3a25771 Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Mon, 29 Feb 2016 11:11:07 +0000 Subject: [PATCH] Change Angular 2 template to use app-style layout, like the React template --- .../ClientApp/components/app/app.css | 25 ++------ .../ClientApp/components/app/app.html | 30 ++-------- .../ClientApp/components/app/app.ts | 3 +- .../ClientApp/components/home/home.html | 51 +++++----------- .../ClientApp/components/home/home.ts | 4 -- .../components/nav-menu/nav-menu.css | 60 +++++++++++++++++++ .../components/nav-menu/nav-menu.html | 33 ++++++++++ .../ClientApp/components/nav-menu/nav-menu.ts | 13 ++++ .../ClientApp/data/CarouselItems.ts | 28 --------- .../ClientApp/data/HomepageLinkLists.ts | 43 ------------- 10 files changed, 134 insertions(+), 156 deletions(-) create mode 100644 templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css create mode 100644 templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html create mode 100644 templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts delete mode 100644 templates/Angular2Spa/ClientApp/data/CarouselItems.ts delete mode 100644 templates/Angular2Spa/ClientApp/data/HomepageLinkLists.ts diff --git a/templates/Angular2Spa/ClientApp/components/app/app.css b/templates/Angular2Spa/ClientApp/components/app/app.css index cea1842..6392600 100644 --- a/templates/Angular2Spa/ClientApp/components/app/app.css +++ b/templates/Angular2Spa/ClientApp/components/app/app.css @@ -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; + } } diff --git a/templates/Angular2Spa/ClientApp/components/app/app.html b/templates/Angular2Spa/ClientApp/components/app/app.html index 018305b..22fbbd9 100644 --- a/templates/Angular2Spa/ClientApp/components/app/app.html +++ b/templates/Angular2Spa/ClientApp/components/app/app.html @@ -1,28 +1,10 @@ -
-
-
- - WebApplicationBasic +
+
+
+
-
- +
+
- -
- -
-
-

© 2016 - WebApplicationBasic

-
-
diff --git a/templates/Angular2Spa/ClientApp/components/app/app.ts b/templates/Angular2Spa/ClientApp/components/app/app.ts index b1632fe..f98b3b7 100644 --- a/templates/Angular2Spa/ClientApp/components/app/app.ts +++ b/templates/Angular2Spa/ClientApp/components/app/app.ts @@ -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 { } diff --git a/templates/Angular2Spa/ClientApp/components/home/home.html b/templates/Angular2Spa/ClientApp/components/home/home.html index e4343e8..8988e6f 100644 --- a/templates/Angular2Spa/ClientApp/components/home/home.html +++ b/templates/Angular2Spa/ClientApp/components/home/home.html @@ -1,36 +1,15 @@ - - - - -
-
-

{{ list.title }}

-
    -
  • -
-
-
+

Hello, world!

+

Welcome to your new single-page application, built with:

+ +

To help you get started, we've also set up:

+
    +
  • Client-side navigation. For example, click Counter then Back to return here.
    • +
  • Webpack dev middleware. In development mode, there's no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.
    • +
  • Hot module replacement. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.
    • +
  • Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.
    • +
diff --git a/templates/Angular2Spa/ClientApp/components/home/home.ts b/templates/Angular2Spa/ClientApp/components/home/home.ts index b5042c0..0ec3ef1 100644 --- a/templates/Angular2Spa/ClientApp/components/home/home.ts +++ b/templates/Angular2Spa/ClientApp/components/home/home.ts @@ -1,6 +1,4 @@ import * as ng from 'angular2/core'; -import { carouselItems } from '../../data/CarouselItems'; -import { linkLists } from '../../data/HomepageLinkLists'; @ng.Component({ selector: 'home' @@ -9,6 +7,4 @@ import { linkLists } from '../../data/HomepageLinkLists'; template: require('./home.html') }) export class Home { - public carouselItems = carouselItems; - public linkLists = linkLists; } diff --git a/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css b/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css new file mode 100644 index 0000000..649b110 --- /dev/null +++ b/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css @@ -0,0 +1,60 @@ +.main-nav li .glyphicon { + margin-right: 10px; +} + +/* Highlighting rules for nav menu items */ +.main-nav li a.router-link-active, +.main-nav li a.router-link-active:hover, +.main-nav li a.router-link-active:focus { + background-color: #4189C7; + color: white; +} + + +/* Keep the nav menu independent of scrolling and on top of other items */ +.main-nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1; +} + +@media (min-width: 768px) { + /* On small screens, convert the nav menu to a vertical sidebar */ + .main-nav { + height: 100%; + width: calc(25% - 20px); + } + .main-nav .navbar { + border-radius: 0px; + border-width: 0px; + height: 100%; + } + .main-nav .navbar-header { + float: none; + } + .main-nav .navbar-collapse { + border-top: 1px solid #444; + padding: 0px; + } + .main-nav .navbar ul { + float: none; + } + .main-nav .navbar li { + float: none; + font-size: 15px; + margin: 6px; + } + .main-nav .navbar li a { + padding: 10px 16px; + border-radius: 4px; + } + .main-nav .navbar a { + /* If a menu item's text is too long, truncate it */ + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} diff --git a/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html b/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html new file mode 100644 index 0000000..a86ad63 --- /dev/null +++ b/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html @@ -0,0 +1,33 @@ +
+
+
+ + WebApplicationBasic +
+
+
+ +
+
+
diff --git a/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts b/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts new file mode 100644 index 0000000..c89b573 --- /dev/null +++ b/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts @@ -0,0 +1,13 @@ +import * as ng from 'angular2/core'; +import * as router from 'angular2/router'; + +@ng.Component({ + selector: 'nav-menu' +}) +@ng.View({ + template: require('./nav-menu.html'), + directives: [router.ROUTER_DIRECTIVES], + styles: [require('./nav-menu.css')] +}) +export class NavMenu { +} diff --git a/templates/Angular2Spa/ClientApp/data/CarouselItems.ts b/templates/Angular2Spa/ClientApp/data/CarouselItems.ts deleted file mode 100644 index bc96797..0000000 --- a/templates/Angular2Spa/ClientApp/data/CarouselItems.ts +++ /dev/null @@ -1,28 +0,0 @@ -export interface CarouselItem { - imageUrl: string; - imageAlt: string; - text: string; - learnMoreUrl: string; -} - -export const carouselItems: CarouselItem[] = [{ - imageUrl: "/images/ASP-NET-Banners-01.png", - imageAlt: "ASP.NET", - text: "Learn how to build ASP.NET apps that can run anywhere.", - learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409" -}, { - imageUrl: "/images/Banner-02-VS.png", - imageAlt: "Visual Studio", - text: "There are powerful new features in Visual Studio for building modern web apps.", - learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409" -}, { - imageUrl: "/images/ASP-NET-Banners-02.png", - imageAlt: "Package Management", - text: "Bring in libraries from NuGet, Bower, and npm, and automate tasks using Grunt or Gulp.", - learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525029&clcid=0x409" -}, { - imageUrl: "/images/Banner-01-Azure.png", - imageAlt: "Microsoft Azure", - text: "Learn how Microsoft's Azure cloud platform allows you to build, deploy, and scale web apps.", - learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409" -}]; diff --git a/templates/Angular2Spa/ClientApp/data/HomepageLinkLists.ts b/templates/Angular2Spa/ClientApp/data/HomepageLinkLists.ts deleted file mode 100644 index 162df19..0000000 --- a/templates/Angular2Spa/ClientApp/data/HomepageLinkLists.ts +++ /dev/null @@ -1,43 +0,0 @@ -export interface LinkList { - title: string; - entries: string[]; -} - -export const linkLists: LinkList[] = [{ - title: "Application uses", - entries: [ - "Sample pages using ASP.NET MVC 6", - "Gulp and Bower for managing client-side libraries", - "Theming using Bootstrap" - ] -}, { - title: "How to", - entries: [ - "Add a Controller and View", - "Add an appsetting in config and access it in app.", - "Manage User Secrets using Secret Manager.", - "Use logging to log a message.", - "Add packages using NuGet.", - "Add client packages using Bower.", - "Target development, staging or production environment." - ] -}, { - title: "Overview", - entries: [ - "Conceptual overview of what is ASP.NET 5", - "Fundamentals of ASP.NET 5 such as Startup and middleware.", - "Working with Data", - "Security", - "Client side development", - "Develop on different platforms", - "Read more on the documentation site" - ] -}, { - title: "Run & Deploy", - entries: [ - "Run your app", - "Run your app on .NET Core", - "Run commands in your project.json", - "Publish to Microsoft Azure Web Apps" - ] -}];