diff --git a/templates/ReactSpa/ClientApp/components/About.tsx b/templates/ReactSpa/ClientApp/components/About.tsx index 5fb69e4..a178eaf 100644 --- a/templates/ReactSpa/ClientApp/components/About.tsx +++ b/templates/ReactSpa/ClientApp/components/About.tsx @@ -3,9 +3,11 @@ import * as React from 'react'; export class About extends React.Component { public render() { return
-

About

+

About

-

Use this area to provide additional information.

+

This is another component.

+ +

It's here to demonstrate navigation.

; } } diff --git a/templates/ReactSpa/ClientApp/components/Counter.tsx b/templates/ReactSpa/ClientApp/components/Counter.tsx index 7cc2732..eded9d2 100644 --- a/templates/ReactSpa/ClientApp/components/Counter.tsx +++ b/templates/ReactSpa/ClientApp/components/Counter.tsx @@ -12,7 +12,7 @@ export class Counter extends React.Component { public render() { return
-

Counter

+

Counter

This is a simple example of a React component.

diff --git a/templates/ReactSpa/ClientApp/components/Home.tsx b/templates/ReactSpa/ClientApp/components/Home.tsx index e0003bd..a796e30 100644 --- a/templates/ReactSpa/ClientApp/components/Home.tsx +++ b/templates/ReactSpa/ClientApp/components/Home.tsx @@ -1,53 +1,24 @@ import * as React from 'react'; -import { carouselItems } from '../data/CarouselItems'; -import { linkLists } from '../data/HomepageLinkLists'; export class Home extends React.Component { public render() { return
- { /* Carousel */ } -
-
    - { carouselItems.map((item, index) => -
  1. - )} -
-
- { carouselItems.map((item, index) => -
- { -
-

- { item.text } - Learn More -

-
-
- )} -
- - - Previous - - - - Next - -
- - { /* Lists of links */ } -
- { linkLists.map((list, listIndex) => -
-

{ list.title }

-
    - { list.entries.map((entry, entryIndex) => -
  • { entry }
    • - )} -
-
- )} -
+

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 About then Back to return here.
    • +
  • Server-side prerendering. For optimal performance, your React application is first executed on the server. The resulting HTML and state is then transferred to the client to continue execution. This is also known as being an isomorphic or universal application.
    • +
  • 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, rebuilt CSS and React components will be injected directly into your running application, preserving its live state.
    • +
  • 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/ReactSpa/ClientApp/components/Layout.tsx b/templates/ReactSpa/ClientApp/components/Layout.tsx new file mode 100644 index 0000000..aebe97a --- /dev/null +++ b/templates/ReactSpa/ClientApp/components/Layout.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { NavMenu } from './NavMenu'; + +export interface LayoutProps { + body: React.ReactElement; +} + +export class Layout extends React.Component { + public render() { + return
+
+
+ +
+
+ { this.props.body } +
+
+
; + } +} diff --git a/templates/ReactSpa/ClientApp/components/NavMenu.tsx b/templates/ReactSpa/ClientApp/components/NavMenu.tsx index 95fed2b..406280d 100644 --- a/templates/ReactSpa/ClientApp/components/NavMenu.tsx +++ b/templates/ReactSpa/ClientApp/components/NavMenu.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { Link } from 'react-router'; + export class NavMenu extends React.Component { public render() { - return
-
+ return
+
WebApplicationBasic
+
    -
  • Home
    • -
  • About
    • -
  • Counter
    • +
  • + + Home + +
    • +
  • + + About + +
    • +
  • + + Counter + +
diff --git a/templates/ReactSpa/ClientApp/css/site.css b/templates/ReactSpa/ClientApp/css/site.css index af0456d..c1c2a35 100755 --- a/templates/ReactSpa/ClientApp/css/site.css +++ b/templates/ReactSpa/ClientApp/css/site.css @@ -1,24 +1,67 @@ -body { - padding-top: 50px; - padding-bottom: 20px; +.main-nav li .glyphicon { + margin-right: 10px; } -/* Wrapping element */ -/* Set some basic padding to keep content from hitting the edges */ -.body-content { - padding-left: 15px; - padding-right: 15px; +/* Highlighting rules for nav menu items */ +.main-nav li a.active, +.main-nav li a.active:hover, +.main-nav li a.active:focus { + background-color: #4189C7; + color: white; } -/* Set widths on the form inputs since otherwise they're 100% wide */ -input, -select, -textarea { - max-width: 280px; + +/* 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; } -/* 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 { + padding-top: 50px; + } +} + +@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/ReactSpa/ClientApp/data/CarouselItems.ts b/templates/ReactSpa/ClientApp/data/CarouselItems.ts deleted file mode 100644 index bc96797..0000000 --- a/templates/ReactSpa/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/ReactSpa/ClientApp/data/HomepageLinkLists.tsx b/templates/ReactSpa/ClientApp/data/HomepageLinkLists.tsx deleted file mode 100644 index ad34463..0000000 --- a/templates/ReactSpa/ClientApp/data/HomepageLinkLists.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; - -export interface LinkList { - title: string; - entries: JSX.Element[]; -} - -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: [ - , - , - , - , - , - , - - ] -}, { - title: "Overview", - entries: [ - , - , - , - , - , - , - - ] -}, { - title: "Run & Deploy", - entries: [ - , - , - , - - ] -}]; diff --git a/templates/ReactSpa/ClientApp/routes.tsx b/templates/ReactSpa/ClientApp/routes.tsx index 6942638..319f109 100644 --- a/templates/ReactSpa/ClientApp/routes.tsx +++ b/templates/ReactSpa/ClientApp/routes.tsx @@ -1,25 +1,10 @@ import * as React from 'react'; import { Router, Route, HistoryBase } from 'react-router'; -import { NavMenu } from './components/NavMenu'; +import { Layout } from './components/Layout'; import { Home } from './components/Home'; import { About } from './components/About'; import { Counter } from './components/Counter'; -class Layout extends React.Component<{ body: React.ReactElement }, void> { - public render() { - return
- -
- { this.props.body } -
-
-

© 2016 - WebApplicationBasic

-
-
-
; - } -} - export const routes =