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

Change ReactSpa template to something more like a dashboard with sidebar navigation

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-24 14:41:29 +00:00
parent eac76683cc
commit a6ea8b5101
9 changed files with 122 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/ReactSpa/ClientApp/components/About.tsx
View File

@@ -3,9 +3,11 @@ import * as React from 'react';
export class About extends React.Component<void, void> {
public render() {
return <div>
<h2>About</h2>
<h1>About</h1>
<p>Use this area to provide additional information.</p>
<p>This is another component.</p>
<p>It's here to demonstrate navigation.</p>
</div>;
}
}

2
templates/ReactSpa/ClientApp/components/Counter.tsx
View File

@@ -12,7 +12,7 @@ export class Counter extends React.Component<void, CounterState> {
public render() {
return <div>
<h2>Counter</h2>
<h1>Counter</h1>
<p>This is a simple example of a React component.</p>

61
templates/ReactSpa/ClientApp/components/Home.tsx
View File

@@ -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<void, void> {
public render() {
return <div>
{ /* Carousel */ }
<div id="myCarousel" className="carousel slide" data-ride="carousel" data-interval="6000">
<ol className="carousel-indicators">
{ carouselItems.map((item, index) =>
<li key={ index } data-target="#myCarousel" data-slide-to={ index } className={ index == 0 ? "active" : "" }></li>
)}
</ol>
<div className="carousel-inner" role="listbox">
{ carouselItems.map((item, index) =>
<div key={ index } className={ "item " + (index == 0 ? "active" : "") }>
<img src={ item.imageUrl } alt={ item.imageAlt } className="img-responsive" />
<div className="carousel-caption">
<p>
{ item.text }
<a className="btn btn-default" href={ item.learnMoreUrl }>Learn More</a>
</p>
</div>
</div>
)}
</div>
<a className="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
{ /* Lists of links */ }
<div className="row">
{ linkLists.map((list, listIndex) =>
<div key={listIndex} className="col-md-3">
<h2>{ list.title }</h2>
<ul>
{ list.entries.map((entry, entryIndex) =>
<li key={ entryIndex }>{ entry }</li>
)}
</ul>
</div>
)}
</div>
<h1>Hello, world!</h1>
<p>Welcome to your new single-page application, built with:</p>
<ul>
<li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
<li><a href="https://facebook.github.io/react/">React</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
<li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
<li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
</ul>
<p>To help you get started, we've also set up:</p>
<ul>
<li><strong>Client-side navigation</strong>. For example, click <em>About</em> then <em>Back</em> to return here.</li>
<li><strong>Server-side prerendering</strong>. 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 <em>isomorphic</em> or <em>universal</em> application.</li>
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
<li><strong>Hot module replacement</strong>. 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.</li>
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
</ul>
</div>;
}
}

21
templates/ReactSpa/ClientApp/components/Layout.tsx Normal file
View File

@@ -0,0 +1,21 @@
import * as React from 'react';
import { NavMenu } from './NavMenu';
export interface LayoutProps {
body: React.ReactElement<any>;
}
export class Layout extends React.Component<LayoutProps, void> {
public render() {
return <div className="container-fluid">
<div className="row">
<div className="col-sm-3">
<NavMenu />
</div>
<div className="col-sm-9">
{ this.props.body }
</div>
</div>
</div>;
}
}

24
templates/ReactSpa/ClientApp/components/NavMenu.tsx
View File

@@ -1,9 +1,10 @@
import * as React from 'react';
import { Link } from 'react-router';
export class NavMenu extends React.Component<void, void> {
public render() {
return <div className="navbar navbar-inverse navbar-fixed-top">
<div className="container">
return <div className="main-nav">
<div className="navbar navbar-inverse">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span className="sr-only">Toggle navigation</span>
@@ -13,11 +14,24 @@ export class NavMenu extends React.Component<void, void> {
</button>
<Link className="navbar-brand" to={ '/' }>WebApplicationBasic</Link>
</div>
<div className="clearfix"></div>
<div className="navbar-collapse collapse">
<ul className="nav navbar-nav">
<li><Link to={ '/' }>Home</Link></li>
<li><Link to={ '/about' }>About</Link></li>
<li><Link to={ '/counter' }>Counter</Link></li>
<li>
<Link to={ '/' } activeClassName='active'>
<span className="glyphicon glyphicon-home"></span> Home
</Link>
</li>
<li>
<Link to={ 'about' } activeClassName='active'>
<span className="glyphicon glyphicon-info-sign"></span> About
</Link>
</li>
<li>
<Link to={ '/counter' } activeClassName='active'>
<span className="glyphicon glyphicon-education"></span> Counter
</Link>
</li>
</ul>
</div>
</div>

77
templates/ReactSpa/ClientApp/css/site.css
View File

@@ -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;
}
}

28
templates/ReactSpa/ClientApp/data/CarouselItems.ts
View File

@@ -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"
}];

45
templates/ReactSpa/ClientApp/data/HomepageLinkLists.tsx
View File

@@ -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: [
<div>Sample pages using ASP.NET MVC 6</div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkId=518007">Gulp</a> and <a href="http://go.microsoft.com/fwlink/?LinkId=518004">Bower</a> for managing client-side libraries</div>,
<div>Theming using <a href="http://go.microsoft.com/fwlink/?LinkID=398939">Bootstrap</a></div>
]
}, {
title: "How to",
entries: [
<div><a href="http://go.microsoft.com/fwlink/?LinkID=398600">Add a Controller and View</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkID=699314">Add an appsetting in config and access it in app.</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkId=699315">Manage User Secrets using Secret Manager.</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkId=699316">Use logging to log a message.</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkId=699317">Add packages using NuGet.</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkId=699318">Add client packages using Bower.</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkId=699319">Target development, staging or production environment.</a></div>
]
}, {
title: "Overview",
entries: [
<div><a href="http://go.microsoft.com/fwlink/?LinkId=518008">Conceptual overview of what is ASP.NET 5</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkId=699320">Fundamentals of ASP.NET 5 such as Startup and middleware.</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkId=398602">Working with Data</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkId=398603">Security</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkID=699321">Client side development</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkID=699322">Develop on different platforms</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkID=699323">Read more on the documentation site</a></div>
]
}, {
title: "Run & Deploy",
entries: [
<div><a href="http://go.microsoft.com/fwlink/?LinkID=517851">Run your app</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkID=517852">Run your app on .NET Core</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkID=517853">Run commands in your project.json</a></div>,
<div><a href="http://go.microsoft.com/fwlink/?LinkID=398609">Publish to Microsoft Azure Web Apps</a></div>
]
}];

17
templates/ReactSpa/ClientApp/routes.tsx
View File

@@ -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<any> }, void> {
public render() {
return <div>
<NavMenu />
<div className="container body-content">
{ this.props.body }
<hr />
<footer>
<p>&copy; 2016 - WebApplicationBasic</p>
</footer>
</div>
</div>;
}
}
export const routes = <Route component={ Layout }>
<Route path="/" components={{ body: Home }} />
<Route path="/about" components={{ body: About }} />