huahaofeng
/
aspnetcore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix links and formating

This commit is contained in:
Ryan Brandenburg 2018-08-21 10:57:10 -07:00
parent 26710080fe
commit afccb085a2
33 changed files with 167 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scripts/.gitignore vendored
View File

@ -1,4 +1,8 @@
package.json
package-lock.json package-lock.json
tmp/ tmp/
CustomHive/ CustomHive/
angular/
mvc/
razor/
react/
reactredux/

13
scripts/Custom-Hive.ps1
View File

@ -1,7 +1,7 @@
$customHive = "$PSScriptRoot/CustomHive" $customHive = "$PSScriptRoot/CustomHive"
function Test-Template($templateName, $templateNupkg, $isSPA) { function Test-Template($templateName, $templateArgs, $templateNupkg, $isSPA) {
$tmpDir = "$PSScriptRoot/tmp" $tmpDir = "$PSScriptRoot/$templateName"
Remove-Item -Path $tmpDir -Recurse -ErrorAction Ignore Remove-Item -Path $tmpDir -Recurse -ErrorAction Ignore
Create-Hive Create-Hive
@ -12,10 +12,10 @@ function Test-Template($templateName, $templateNupkg, $isSPA) {
New-Item -ErrorAction Ignore -Path $tmpDir -ItemType Directory New-Item -ErrorAction Ignore -Path $tmpDir -ItemType Directory
Push-Location $tmpDir Push-Location $tmpDir
try { try {
Run-DotnetNew $templateName, "--no-restore" Run-DotnetNew $templateArgs, "--no-restore"
$csproj = "$tmpDir/tmp.csproj" $csproj = "$tmpDir/$templateName.csproj"
$csprojContent = Get-Content -Path $csproj -Raw $csprojContent = Get-Content -Path $csproj -Raw
$csprojContent = $csprojContent -replace ('<Project Sdk="Microsoft.NET.Sdk.Web">', "<Project Sdk=""Microsoft.NET.Sdk.Web"">`n<Import Project=""$PSScriptRoot/../test/Templates.Test/bin/Release/netcoreapp2.2/TemplateTests.props"" />") $csprojContent = $csprojContent -replace ('<Project Sdk="Microsoft.NET.Sdk.Web">', "<Project Sdk=""Microsoft.NET.Sdk.Web"">`n<Import Project=""$PSScriptRoot/../test/Templates.Test/bin/Debug/netcoreapp2.2/TemplateTests.props"" />")
$csprojContent | Set-Content $csproj $csprojContent | Set-Content $csproj
dotnet publish dotnet publish
@ -49,5 +49,6 @@ function Clean-Hive() {
} }
function Run-DotnetNew($arguments) { function Run-DotnetNew($arguments) {
dotnet new $arguments --debug:custom-hive $customHive $expression = "dotnet new $arguments --debug:custom-hive $customHive"
Invoke-Expression $expression
} }

4
scripts/Minify-Scripts.ps1
View File

@ -26,13 +26,13 @@ foreach ($contentDir in $contentDirs) {
$siteCss = Join-Path $cssFolder "site.css" $siteCss = Join-Path $cssFolder "site.css"
$siteMinCss = Join-Path $cssFolder "site.min.css" $siteMinCss = Join-Path $cssFolder "site.min.css"
if (Test-Path $siteCss) { if (Test-Path $siteCss) {
uglifycss $siteCss > $siteMinCss npm uglifycss $siteCss > $siteMinCss
} }
$jsFolder = Join-Path $wwwRoot "js" $jsFolder = Join-Path $wwwRoot "js"
$siteJs = Join-Path $jsFolder "site.js" $siteJs = Join-Path $jsFolder "site.js"
$siteMinJs = Join-Path $jsFolder "site.min.js" $siteMinJs = Join-Path $jsFolder "site.min.js"
if (Test-Path $siteJs) { if (Test-Path $siteJs) {
uglifyjs $siteJs --output $siteMinJs npm uglifyjs $siteJs --output $siteMinJs
} }
} }

2
scripts/Run-Angular-Locally.ps1
View File

@ -9,4 +9,4 @@ $ErrorActionPreference = 'Stop'
. $PSScriptRoot\Custom-Hive.ps1 . $PSScriptRoot\Custom-Hive.ps1
Test-Template "angular" "Microsoft.DotNet.Web.Spa.ProjectTemplates.2.2.0-preview1-t000.nupkg" $true Test-Template "angular" "angular" "Microsoft.DotNet.Web.Spa.ProjectTemplates.2.2.0-preview2-t000.nupkg" $true

2
scripts/Run-Razor-Locally.ps1
View File

@ -6,4 +6,4 @@ param()
. $PSScriptRoot\Custom-Hive.ps1 . $PSScriptRoot\Custom-Hive.ps1
Test-Template "razor" "Microsoft.DotNet.Web.ProjectTemplates.2.2.2.2.0-preview1-t000.nupkg" $false Test-Template "razor" "razor -au Individual" "Microsoft.DotNet.Web.ProjectTemplates.2.2.2.2.0-preview2-t000.nupkg" $false

2
scripts/Run-React-Locally.ps1
View File

@ -9,4 +9,4 @@ $ErrorActionPreference = 'Stop'
. $PSScriptRoot\Custom-Hive.ps1 . $PSScriptRoot\Custom-Hive.ps1
Test-Template "react" "Microsoft.DotNet.Web.Spa.ProjectTemplates.2.2.0-preview1-t000.nupkg" $true Test-Template "react" "react" "Microsoft.DotNet.Web.Spa.ProjectTemplates.2.2.0-preview2-t000.nupkg" $true

2
scripts/Run-ReactRedux-Locally.ps1
View File

@ -9,4 +9,4 @@ $ErrorActionPreference = 'Stop'
. $PSScriptRoot\Custom-Hive.ps1 . $PSScriptRoot\Custom-Hive.ps1
Test-Template "reactredux" "Microsoft.DotNet.Web.Spa.ProjectTemplates.2.2.0-preview1-t000.nupkg" $true Test-Template "reactredux" "reactredux" "Microsoft.DotNet.Web.Spa.ProjectTemplates.2.2.0-preview2-t000.nupkg" $true

2
scripts/Run-Starterweb-Locally.ps1
View File

@ -9,4 +9,4 @@ $ErrorActionPreference = 'Stop'
. $PSScriptRoot\Custom-Hive.ps1 . $PSScriptRoot\Custom-Hive.ps1
Test-Template "mvc", "-au", "Individual" "Microsoft.DotNet.Web.ProjectTemplates.2.2.2.2.0-preview1-t000.nupkg" $false Test-Template "mvc" "mvc -au Individual" "Microsoft.DotNet.Web.ProjectTemplates.2.2.2.2.0-preview2-t000.nupkg" $false

14
scripts/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"name": "scripts",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"uglify-js": "~3.4.7",
"uglifycss": "~0.0.29"
},
"author": "",
"license": "ISC"
}

10
src/Microsoft.DotNet.Web.ProjectTemplates/content/RazorPagesWeb-CSharp/Pages/Shared/_Layout.cshtml
View File

@ -20,7 +20,7 @@
<header> <header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container"> <div class="container">
<a class="navbar-brand" asp-area="" asp-page="/">Company.WebApplication1</a> <a class="navbar-brand" asp-area="" asp-page="/Index">Company.WebApplication1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -33,10 +33,10 @@
#endif*@ #endif*@
<ul class="navbar-nav flex-grow-1"> <ul class="navbar-nav flex-grow-1">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Page1</a> <a class="nav-link text-dark" asp-area="" asp-page="/Index">Page1</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Page2</a> <a class="nav-link text-dark" asp-area="" asp-page="/Index">Page2</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -45,12 +45,12 @@
</header> </header>
<div class="container"> <div class="container">
<partial name="_CookieConsentPartial" /> <partial name="_CookieConsentPartial" />
<main role="main" class="pb-1"> <main role="main" class="pb-3">
@RenderBody() @RenderBody()
</main> </main>
</div> </div>
<footer class="border-top footer pl-3 text-muted"> <footer class="border-top footer text-muted">
<div class="container"> <div class="container">
&copy; copyrightYear - Company.WebApplication1 - <a asp-area="" asp-page="/Privacy">Privacy</a> &copy; copyrightYear - Company.WebApplication1 - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div> </div>

2
src/Microsoft.DotNet.Web.ProjectTemplates/content/RazorPagesWeb-CSharp/Pages/Shared/_LoginPartial.Identity.cshtml
View File

@ -9,7 +9,7 @@
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity.Name!</a> <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity.Name!</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/", new { area = "" })"> <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/", new { area = "" })" method="post" >
<button type="submit" class="nav-link btn btn-link text-dark">Logout</button> <button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
</form> </form>
</li> </li>

BIN
src/Microsoft.DotNet.Web.ProjectTemplates/content/RazorPagesWeb-CSharp/wwwroot/css/site.min.css vendored
View File

Binary file not shown.

4
src/Microsoft.DotNet.Web.ProjectTemplates/content/StarterWeb-CSharp/Views/Shared/_Layout.cshtml
View File

@ -45,12 +45,12 @@
</header> </header>
<div class="container"> <div class="container">
<partial name="_CookieConsentPartial" /> <partial name="_CookieConsentPartial" />
<main role="main" class="pb-1"> <main role="main" class="pb-3">
@RenderBody() @RenderBody()
</main> </main>
</div> </div>
<footer class="border-top footer pl-3 text-muted"> <footer class="border-top footer text-muted">
<div class="container"> <div class="container">
&copy; copyrightYear - Company.WebApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> &copy; copyrightYear - Company.WebApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div> </div>

BIN
src/Microsoft.DotNet.Web.ProjectTemplates/content/StarterWeb-CSharp/wwwroot/css/site.min.css vendored
View File

Binary file not shown.

BIN
src/Microsoft.DotNet.Web.ProjectTemplates/content/StarterWeb-FSharp/wwwroot/css/site.min.css vendored
View File

Binary file not shown.

2
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/counter/counter.component.html
View File

@ -4,4 +4,4 @@
<p>Current count: <strong>{{ currentCount }}</strong></p> <p>Current count: <strong>{{ currentCount }}</strong></p>
<button (click)="incrementCounter()">Increment</button> <button class="btn btn-primary" (click)="incrementCounter()">Increment</button>

2
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/fetch-data/fetch-data.component.html
View File

@ -4,7 +4,7 @@
<p *ngIf="!forecasts"><em>Loading...</em></p> <p *ngIf="!forecasts"><em>Loading...</em></p>
<table class='table' *ngIf="forecasts"> <table class='table table-striped' *ngIf="forecasts">
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>

64
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/nav-menu/nav-menu.component.css
View File

@ -1,56 +1,18 @@
.navbar li .glyphicon { a.navbar-brand {
margin-right: 10px; white-space: normal;
text-align: center;
word-break: break-all;
} }
/* Highlighting rules for nav menu items */ html {
.navbar .navbar-nav .active a, font-size: 14px;
.navbar .navbar-nav .active a:hover,
.navbar .navbar-nav .active a:focus {
background-image: none;
background-color: #4189C7;
color: white;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
/* On large screens, convert the nav menu to a vertical sidebar */ html {
.navbar { font-size: 16px;
height: 100%; }
} }
.navbar {
border-radius: 0; .box-shadow {
border-width: 0; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
height: 100%;
}
.navbar-header {
float: none;
}
.navbar .navbar-collapse {
padding: 0;
}
.navbar .container-fluid {
padding: 0;
margin: 0;
}
.navbar .container-fluid .navbar-brand {
margin: 0;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }

36
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/nav-menu/nav-menu.component.html
View File

@ -1,22 +1,24 @@
<header> <header>
<nav class='navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3'> <nav class='navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3'>
<a class="navbar-brand" href="~/">Company.WebApplication1</a> <div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Toggle navigation" <a class="navbar-brand" [routerLink]='["/"]'>Company.WebApplication1</a>
[attr.aria-expanded]="isExpanded" (click)="toggle()"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Toggle navigation"
<span class="navbar-toggler-icon"></span> [attr.aria-expanded]="isExpanded" (click)="toggle()">
</button> <span class="navbar-toggler-icon"></span>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" [ngClass]='{"show": isExpanded}'> </button>
<ul class="navbar-nav flex-grow-1"> <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" [ngClass]='{"show": isExpanded}'>
<li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'> <ul class="navbar-nav flex-grow">
<a class="nav-link text-dark" [routerLink]='["/"]'>Home</a> <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
</li> <a class="nav-link text-dark" [routerLink]='["/"]'>Home</a>
<li class="nav-item" [routerLinkActive]='["link-active"]'> </li>
<a class="nav-link text-dark" [routerLink]='["/counter"]'>Counter</a> <li class="nav-item" [routerLinkActive]='["link-active"]'>
</li> <a class="nav-link text-dark" [routerLink]='["/counter"]'>Counter</a>
<li class="nav-item" [routerLinkActive]='["link-active"]'> </li>
<a class="nav-link text-dark" [routerLink]='["/fetch-data"]'>Fetch data</a> <li class="nav-item" [routerLinkActive]='["link-active"]'>
</li> <a class="nav-link text-dark" [routerLink]='["/fetch-data"]'>Fetch data</a>
</ul> </li>
</ul>
</div>
</div> </div>
</nav> </nav>
</header> </header>

2
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/Counter.js
View File

@ -24,7 +24,7 @@ export class Counter extends Component {
<p>Current count: <strong>{this.state.currentCount}</strong></p> <p>Current count: <strong>{this.state.currentCount}</strong></p>
<button onClick={this.incrementCounter}>Increment</button> <button className="btn btn-primary" onClick={this.incrementCounter}>Increment</button>
</div> </div>
); );
} }

2
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/FetchData.js
View File

@ -16,7 +16,7 @@ export class FetchData extends Component {
static renderForecastsTable(forecasts) { static renderForecastsTable(forecasts) {
return ( return (
<table className='table'> <table className='table table-striped'>
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>

18
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/Layout.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Col, Container, Row } from 'reactstrap'; import { Container } from 'reactstrap';
import { NavMenu } from './NavMenu'; import { NavMenu } from './NavMenu';
export class Layout extends Component { export class Layout extends Component {
@ -7,16 +7,12 @@ export class Layout extends Component {
render() { render() {
return ( return (
<Container className="mw-100" > <div>
<Row> <NavMenu />
<Col sm={3}> <Container>
<NavMenu /> {this.props.children}
</Col> </Container>
<Col sm={9}> </div>
{this.props.children}
</Col>
</Row>
</Container>
); );
} }
} }

65
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/NavMenu.css
View File

@ -1,57 +1,18 @@
.navbar li .glyphicon { a.navbar-brand {
margin-right: 10px; white-space: normal;
text-align: center;
word-break: break-all;
} }
/* Highlighting rules for nav menu items */ html {
.navbar .navbar-nav .active a, font-size: 14px;
.navbar .navbar-nav .active a:hover,
.navbar .navbar-nav .active a:focus {
background-image: none;
background-color: #4189C7;
color: white;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
/* On large screens, convert the nav menu to a vertical sidebar */ html {
.navbar { font-size: 16px;
height: 100%; }
} }
.navbar {
border-radius: 0; .box-shadow {
border-width: 0; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
height: 100%;
}
.navbar-header {
float: none;
}
.navbar .navbar-collapse {
border-top: 1px solid #444;
padding: 0;
}
.navbar .container-fluid {
padding: 0;
margin: 0;
}
.navbar .container-fluid .navbar-brand {
margin: 0;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }

42
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/NavMenu.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'; import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import './NavMenu.css'; import './NavMenu.css';
export class NavMenu extends Component { export class NavMenu extends Component {
@ -10,7 +10,7 @@ export class NavMenu extends Component {
this.toggleNavbar = this.toggleNavbar.bind(this); this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = { this.state = {
collapsed: false collapsed: true
}; };
} }
@ -22,25 +22,27 @@ export class NavMenu extends Component {
render() { render() {
return ( return (
<div> <header>
<Navbar color="faded" light> <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
<NavbarBrand href="/" className="mr-auto">Company.WebApplication1</NavbarBrand> <Container>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" /> <NavbarBrand href="/">Company.WebApplication1</NavbarBrand>
<Collapse isOpen={!this.state.collapsed} navbar> <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Nav navbar> <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
<NavItem> <ul className="navbar-nav flex-grow">
<NavLink href="/">Home</NavLink> <NavItem>
</NavItem> <NavLink className="text-dark" href="/">Home</NavLink>
<NavItem> </NavItem>
<NavLink href="/counter">Counter</NavLink> <NavItem>
</NavItem> <NavLink className="text-dark" href="/counter">Counter</NavLink>
<NavItem> </NavItem>
<NavLink href="/fetch-data">Fetch data</NavLink> <NavItem>
</NavItem> <NavLink className="text-dark" href="/fetch-data">Fetch data</NavLink>
</Nav> </NavItem>
</Collapse> </ul>
</Collapse>
</Container>
</Navbar> </Navbar>
</div > </header>
); );
} }
} }

6
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/index.css
View File

@ -1,6 +0,0 @@
@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;
}
}

1
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/index.js
View File

@ -1,5 +1,4 @@
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';

2
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/Counter.js
View File

@ -11,7 +11,7 @@ const Counter = props => (
<p>Current count: <strong>{props.count}</strong></p> <p>Current count: <strong>{props.count}</strong></p>
<button onClick={props.increment}>Increment</button> <button className="btn btn-primary" onClick={props.increment}>Increment</button>
</div> </div>
); );

2
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.js
View File

@ -31,7 +31,7 @@ class FetchData extends Component {
function renderForecastsTable(props) { function renderForecastsTable(props) {
return ( return (
<table className='table'> <table className='table table-striped'>
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>

18
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/Layout.js
View File

@ -1,16 +1,12 @@
import React from 'react'; import React from 'react';
import { Col, Container, Row } from 'reactstrap'; import { Container } from 'reactstrap';
import NavMenu from './NavMenu'; import NavMenu from './NavMenu';
export default props => ( export default props => (
<Container fluid> <div>
<Row> <NavMenu />
<Col sm={3}> <Container>
<NavMenu /> {props.children}
</Col> </Container>
<Col sm={9}> </div>
{props.children}
</Col>
</Row>
</Container>
); );

68
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/NavMenu.css
View File

@ -1,58 +1,20 @@
.navbar li .glyphicon { a.navbar-brand {
margin-right: 10px; white-space: normal;
text-align: center;
word-break: break-all;
} }
/* Highlighting rules for nav menu items */ html {
.navbar .navbar-nav .active a, font-size: 14px;
.navbar .navbar-nav .active a:hover,
.navbar .navbar-nav .active a:focus {
background-image: none;
background-color: #4189C7;
color: white;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
/* On large screens, convert the nav menu to a vertical sidebar */ html {
.navbar { font-size: 16px;
height: 100%; }
width: calc(25% - 20px);
}
.navbar {
border-radius: 0;
border-width: 0;
height: 100%;
}
.navbar-header {
float: none;
}
.navbar .navbar-collapse {
border-top: 1px solid #444;
padding: 0;
}
.navbar .container-fluid {
padding: 0;
margin: 0;
}
.navbar .container-fluid .navbar-brand {
margin: 0;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

42
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/NavMenu.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'; import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import './NavMenu.css'; import './NavMenu.css';
export default class NavMenu extends React.Component { export default class NavMenu extends React.Component {
@ -8,7 +8,7 @@ export default class NavMenu extends React.Component {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
isOpen: true isOpen: false
}; };
} }
toggle() { toggle() {
@ -18,23 +18,27 @@ export default class NavMenu extends React.Component {
} }
render() { render() {
return ( return (
<Navbar fixed="top" className="navbar-fixed-top navbar-dark" expand color="dark" > <header>
<NavbarBrand href="/">Company.WebApplication1</NavbarBrand> <Navbar className="navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow mb-3" light >
<NavbarToggler onClick={this.toggle} className="mr-2" /> <Container>
<Collapse isOpen={this.state.isOpen} navbar> <NavbarBrand href="/">Company.WebApplication1</NavbarBrand>
<Nav className="ml-auto" navbar> <NavbarToggler onClick={this.toggle} className="mr-2" />
<NavItem> <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={this.state.isOpen} navbar>
<NavLink href="/">Home</NavLink> <ul className="navbar-nav flex-grow">
</NavItem> <NavItem>
<NavItem> <NavLink className="text-dark" href="/">Home</NavLink>
<NavLink href="/counter">Counter</NavLink> </NavItem>
</NavItem> <NavItem>
<NavItem> <NavLink className="text-dark" href="/counter">Counter</NavLink>
<NavLink href="/fetch-data">Fetch data</NavLink> </NavItem>
</NavItem> <NavItem>
</Nav> <NavLink className="text-dark" href="/fetch-data">Fetch data</NavLink>
</Collapse> </NavItem>
</Navbar > </ul>
</Collapse>
</Container>
</Navbar>
</header>
); );
} }
} }

6
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/index.css
View File

@ -1,6 +0,0 @@
@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;
}
}

1
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/index.js
View File

@ -1,5 +1,4 @@
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';