Fix links and formating
This commit is contained in:
Ryan Brandenburg
parent
26710080fe
commit
afccb085a2
|
|
@ -1,4 +1,8 @@
|
|||
package.json
|
||||
package-lock.json
|
||||
tmp/
|
||||
CustomHive/
|
||||
angular/
|
||||
mvc/
|
||||
razor/
|
||||
react/
|
||||
reactredux/
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$customHive = "$PSScriptRoot/CustomHive"
|
||||
|
||||
function Test-Template($templateName, $templateNupkg, $isSPA) {
|
||||
$tmpDir = "$PSScriptRoot/tmp"
|
||||
function Test-Template($templateName, $templateArgs, $templateNupkg, $isSPA) {
|
||||
$tmpDir = "$PSScriptRoot/$templateName"
|
||||
Remove-Item -Path $tmpDir -Recurse -ErrorAction Ignore
|
||||
|
||||
Create-Hive
|
||||
|
|
@ -12,10 +12,10 @@ function Test-Template($templateName, $templateNupkg, $isSPA) {
|
|||
New-Item -ErrorAction Ignore -Path $tmpDir -ItemType Directory
|
||||
Push-Location $tmpDir
|
||||
try {
|
||||
Run-DotnetNew $templateName, "--no-restore"
|
||||
$csproj = "$tmpDir/tmp.csproj"
|
||||
Run-DotnetNew $templateArgs, "--no-restore"
|
||||
$csproj = "$tmpDir/$templateName.csproj"
|
||||
$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
|
||||
|
||||
dotnet publish
|
||||
|
|
@ -49,5 +49,6 @@ function Clean-Hive() {
|
|||
}
|
||||
|
||||
function Run-DotnetNew($arguments) {
|
||||
dotnet new $arguments --debug:custom-hive $customHive
|
||||
$expression = "dotnet new $arguments --debug:custom-hive $customHive"
|
||||
Invoke-Expression $expression
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@ foreach ($contentDir in $contentDirs) {
|
|||
$siteCss = Join-Path $cssFolder "site.css"
|
||||
$siteMinCss = Join-Path $cssFolder "site.min.css"
|
||||
if (Test-Path $siteCss) {
|
||||
uglifycss $siteCss > $siteMinCss
|
||||
npm uglifycss $siteCss > $siteMinCss
|
||||
}
|
||||
|
||||
$jsFolder = Join-Path $wwwRoot "js"
|
||||
$siteJs = Join-Path $jsFolder "site.js"
|
||||
$siteMinJs = Join-Path $jsFolder "site.min.js"
|
||||
if (Test-Path $siteJs) {
|
||||
uglifyjs $siteJs --output $siteMinJs
|
||||
npm uglifyjs $siteJs --output $siteMinJs
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,4 +9,4 @@ $ErrorActionPreference = 'Stop'
|
|||
|
||||
. $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
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@ param()
|
|||
|
||||
. $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
|
||||
|
|
|
|||
|
|
@ -9,4 +9,4 @@ $ErrorActionPreference = 'Stop'
|
|||
|
||||
. $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
|
||||
|
|
|
|||
|
|
@ -9,4 +9,4 @@ $ErrorActionPreference = 'Stop'
|
|||
|
||||
. $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
|
||||
|
|
|
|||
|
|
@ -9,4 +9,4 @@ $ErrorActionPreference = 'Stop'
|
|||
|
||||
. $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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<header>
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
|
||||
<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"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
@ -33,10 +33,10 @@
|
|||
#endif*@
|
||||
<ul class="navbar-nav flex-grow-1">
|
||||
<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 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>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -45,12 +45,12 @@
|
|||
</header>
|
||||
<div class="container">
|
||||
<partial name="_CookieConsentPartial" />
|
||||
<main role="main" class="pb-1">
|
||||
<main role="main" class="pb-3">
|
||||
@RenderBody()
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="border-top footer pl-3 text-muted">
|
||||
<footer class="border-top footer text-muted">
|
||||
<div class="container">
|
||||
© copyrightYear - Company.WebApplication1 - <a asp-area="" asp-page="/Privacy">Privacy</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</li>
|
||||
<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>
|
||||
</form>
|
||||
</li>
|
||||
|
|
@ -23,4 +23,4 @@ else
|
|||
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</ul>
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -45,12 +45,12 @@
|
|||
</header>
|
||||
<div class="container">
|
||||
<partial name="_CookieConsentPartial" />
|
||||
<main role="main" class="pb-1">
|
||||
<main role="main" class="pb-3">
|
||||
@RenderBody()
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="border-top footer pl-3 text-muted">
|
||||
<footer class="border-top footer text-muted">
|
||||
<div class="container">
|
||||
© copyrightYear - Company.WebApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -4,4 +4,4 @@
|
|||
|
||||
<p>Current count: <strong>{{ currentCount }}</strong></p>
|
||||
|
||||
<button (click)="incrementCounter()">Increment</button>
|
||||
<button class="btn btn-primary" (click)="incrementCounter()">Increment</button>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<p *ngIf="!forecasts"><em>Loading...</em></p>
|
||||
|
||||
<table class='table' *ngIf="forecasts">
|
||||
<table class='table table-striped' *ngIf="forecasts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,18 @@
|
|||
.navbar li .glyphicon {
|
||||
margin-right: 10px;
|
||||
a.navbar-brand {
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Highlighting rules for nav menu items */
|
||||
.navbar .navbar-nav .active a,
|
||||
.navbar .navbar-nav .active a:hover,
|
||||
.navbar .navbar-nav .active a:focus {
|
||||
background-image: none;
|
||||
background-color: #4189C7;
|
||||
color: white;
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* On large screens, convert the nav menu to a vertical sidebar */
|
||||
.navbar {
|
||||
height: 100%;
|
||||
}
|
||||
.navbar {
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
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;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
<header>
|
||||
<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>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Toggle navigation"
|
||||
[attr.aria-expanded]="isExpanded" (click)="toggle()">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" [ngClass]='{"show": isExpanded}'>
|
||||
<ul class="navbar-nav flex-grow-1">
|
||||
<li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
|
||||
<a class="nav-link text-dark" [routerLink]='["/"]'>Home</a>
|
||||
</li>
|
||||
<li class="nav-item" [routerLinkActive]='["link-active"]'>
|
||||
<a class="nav-link text-dark" [routerLink]='["/counter"]'>Counter</a>
|
||||
</li>
|
||||
<li class="nav-item" [routerLinkActive]='["link-active"]'>
|
||||
<a class="nav-link text-dark" [routerLink]='["/fetch-data"]'>Fetch data</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="container">
|
||||
<a class="navbar-brand" [routerLink]='["/"]'>Company.WebApplication1</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Toggle navigation"
|
||||
[attr.aria-expanded]="isExpanded" (click)="toggle()">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" [ngClass]='{"show": isExpanded}'>
|
||||
<ul class="navbar-nav flex-grow">
|
||||
<li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
|
||||
<a class="nav-link text-dark" [routerLink]='["/"]'>Home</a>
|
||||
</li>
|
||||
<li class="nav-item" [routerLinkActive]='["link-active"]'>
|
||||
<a class="nav-link text-dark" [routerLink]='["/counter"]'>Counter</a>
|
||||
</li>
|
||||
<li class="nav-item" [routerLinkActive]='["link-active"]'>
|
||||
<a class="nav-link text-dark" [routerLink]='["/fetch-data"]'>Fetch data</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export class Counter extends Component {
|
|||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export class FetchData extends Component {
|
|||
|
||||
static renderForecastsTable(forecasts) {
|
||||
return (
|
||||
<table className='table'>
|
||||
<table className='table table-striped'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Col, Container, Row } from 'reactstrap';
|
||||
import { Container } from 'reactstrap';
|
||||
import { NavMenu } from './NavMenu';
|
||||
|
||||
export class Layout extends Component {
|
||||
|
|
@ -7,16 +7,12 @@ export class Layout extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Container className="mw-100" >
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<NavMenu />
|
||||
</Col>
|
||||
<Col sm={9}>
|
||||
{this.props.children}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
<div>
|
||||
<NavMenu />
|
||||
<Container>
|
||||
{this.props.children}
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,18 @@
|
|||
.navbar li .glyphicon {
|
||||
margin-right: 10px;
|
||||
a.navbar-brand {
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Highlighting rules for nav menu items */
|
||||
.navbar .navbar-nav .active a,
|
||||
.navbar .navbar-nav .active a:hover,
|
||||
.navbar .navbar-nav .active a:focus {
|
||||
background-image: none;
|
||||
background-color: #4189C7;
|
||||
color: white;
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* On large screens, convert the nav menu to a vertical sidebar */
|
||||
.navbar {
|
||||
height: 100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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';
|
||||
|
||||
export class NavMenu extends Component {
|
||||
|
|
@ -10,7 +10,7 @@ export class NavMenu extends Component {
|
|||
|
||||
this.toggleNavbar = this.toggleNavbar.bind(this);
|
||||
this.state = {
|
||||
collapsed: false
|
||||
collapsed: true
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -22,25 +22,27 @@ export class NavMenu extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Navbar color="faded" light>
|
||||
<NavbarBrand href="/" className="mr-auto">Company.WebApplication1</NavbarBrand>
|
||||
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
|
||||
<Collapse isOpen={!this.state.collapsed} navbar>
|
||||
<Nav navbar>
|
||||
<NavItem>
|
||||
<NavLink href="/">Home</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="/counter">Counter</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="/fetch-data">Fetch data</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
<header>
|
||||
<Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
|
||||
<Container>
|
||||
<NavbarBrand href="/">Company.WebApplication1</NavbarBrand>
|
||||
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
|
||||
<Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
|
||||
<ul className="navbar-nav flex-grow">
|
||||
<NavItem>
|
||||
<NavLink className="text-dark" href="/">Home</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink className="text-dark" href="/counter">Counter</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink className="text-dark" href="/fetch-data">Fetch data</NavLink>
|
||||
</NavItem>
|
||||
</ul>
|
||||
</Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
</div >
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,5 +1,4 @@
|
|||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import './index.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const Counter = props => (
|
|||
|
||||
<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>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ class FetchData extends Component {
|
|||
|
||||
function renderForecastsTable(props) {
|
||||
return (
|
||||
<table className='table'>
|
||||
<table className='table table-striped'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
import React from 'react';
|
||||
import { Col, Container, Row } from 'reactstrap';
|
||||
import { Container } from 'reactstrap';
|
||||
import NavMenu from './NavMenu';
|
||||
|
||||
export default props => (
|
||||
<Container fluid>
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<NavMenu />
|
||||
</Col>
|
||||
<Col sm={9}>
|
||||
{props.children}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
<div>
|
||||
<NavMenu />
|
||||
<Container>
|
||||
{props.children}
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,58 +1,20 @@
|
|||
.navbar li .glyphicon {
|
||||
margin-right: 10px;
|
||||
a.navbar-brand {
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Highlighting rules for nav menu items */
|
||||
.navbar .navbar-nav .active a,
|
||||
.navbar .navbar-nav .active a:hover,
|
||||
.navbar .navbar-nav .active a:focus {
|
||||
background-image: none;
|
||||
background-color: #4189C7;
|
||||
color: white;
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* On large screens, convert the nav menu to a vertical sidebar */
|
||||
.navbar {
|
||||
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;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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';
|
||||
|
||||
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.state = {
|
||||
isOpen: true
|
||||
isOpen: false
|
||||
};
|
||||
}
|
||||
toggle() {
|
||||
|
|
@ -18,23 +18,27 @@ export default class NavMenu extends React.Component {
|
|||
}
|
||||
render() {
|
||||
return (
|
||||
<Navbar fixed="top" className="navbar-fixed-top navbar-dark" expand color="dark" >
|
||||
<NavbarBrand href="/">Company.WebApplication1</NavbarBrand>
|
||||
<NavbarToggler onClick={this.toggle} className="mr-2" />
|
||||
<Collapse isOpen={this.state.isOpen} navbar>
|
||||
<Nav className="ml-auto" navbar>
|
||||
<NavItem>
|
||||
<NavLink href="/">Home</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="/counter">Counter</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="/fetch-data">Fetch data</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar >
|
||||
<header>
|
||||
<Navbar className="navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow mb-3" light >
|
||||
<Container>
|
||||
<NavbarBrand href="/">Company.WebApplication1</NavbarBrand>
|
||||
<NavbarToggler onClick={this.toggle} className="mr-2" />
|
||||
<Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={this.state.isOpen} navbar>
|
||||
<ul className="navbar-nav flex-grow">
|
||||
<NavItem>
|
||||
<NavLink className="text-dark" href="/">Home</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink className="text-dark" href="/counter">Counter</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink className="text-dark" href="/fetch-data">Fetch data</NavLink>
|
||||
</NavItem>
|
||||
</ul>
|
||||
</Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,5 +1,4 @@
|
|||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import './index.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
|
|
|
|||
Loading…
Reference in New Issue