spa (mit hugo)

This commit is contained in:
Nilstrieb 2021-02-13 17:24:18 +01:00
parent a395e0e8fb
commit 933ef702c6
8 changed files with 229 additions and 99 deletions

112
package-lock.json generated
View file

@ -1784,6 +1784,8 @@
},
"@testing-library/jest-dom": {
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.9.tgz",
"integrity": "sha512-Mn2gnA9d1wStlAIT2NU8J15LNob0YFBVjs2aEQ3j8rsfRQo+lAs7/ui1i2TGaJjapLmuNPLTsrm+nPjmZDwpcQ==",
"requires": {
"@babel/runtime": "^7.9.2",
"@types/testing-library__jest-dom": "^5.9.1",
@ -1808,6 +1810,8 @@
},
"@testing-library/react": {
"version": "11.2.5",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.5.tgz",
"integrity": "sha512-yEx7oIa/UWLe2F2dqK0FtMF9sJWNXD+2PPtp39BvE0Kh9MJ9Kl0HrZAgEuhUJR+Lx8Di6Xz+rKwSdEPY2UV8ZQ==",
"requires": {
"@babel/runtime": "^7.12.5",
"@testing-library/dom": "^7.28.1"
@ -1815,6 +1819,8 @@
},
"@testing-library/user-event": {
"version": "12.7.0",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.7.0.tgz",
"integrity": "sha512-KzRM1KNDoW8pJ2HTenrUhTjV6wJMHvWAagDs8DDrYSWz6y4PN+K2jSvlm2bMHWNRk5LTJPo9jqIjNjJ3FlqXNw==",
"requires": {
"@babel/runtime": "^7.12.5"
}
@ -6742,6 +6748,19 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
"history": {
"version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
"requires": {
"@babel/runtime": "^7.1.2",
"loose-envify": "^1.2.0",
"resolve-pathname": "^3.0.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0",
"value-equal": "^1.0.1"
}
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -6752,6 +6771,14 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -8843,6 +8870,15 @@
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
},
"mini-create-react-context": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
"requires": {
"@babel/runtime": "^7.12.1",
"tiny-warning": "^1.0.3"
}
},
"mini-css-extract-plugin": {
"version": "0.11.3",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@ -11124,6 +11160,8 @@
},
"react": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
"integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
@ -11283,6 +11321,8 @@
},
"react-dom": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
"integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
@ -11304,8 +11344,56 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
},
"react-router": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"hoist-non-react-statics": "^3.1.0",
"loose-envify": "^1.3.1",
"mini-create-react-context": "^0.4.0",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.2",
"react-is": "^16.6.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"path-to-regexp": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
"requires": {
"isarray": "0.0.1"
}
}
}
},
"react-router-dom": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-router": "5.2.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}
},
"react-scripts": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.2.tgz",
"integrity": "sha512-okaWNaGDGtnXyM2CLMUl8gYZnAubgxEulC40FYjsxn5bbj+G/mDINdy24wHz4Vypb/LWtIe8rdBU78k/74v8Mw==",
"requires": {
"@babel/core": "7.12.3",
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
@ -11733,6 +11821,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
},
"resolve-pathname": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@ -13410,6 +13503,16 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"tiny-invariant": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
},
"tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"tmpl": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@ -13895,6 +13998,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
"value-equal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@ -14196,7 +14304,9 @@
}
},
"web-vitals": {
"version": "1.1.0"
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-1.1.0.tgz",
"integrity": "sha512-1cx54eRxY/+M0KNKdNpNnuXAXG+vJEvwScV4DiV9rOYDguHoeDIzm09ghBohOPtkqPO5OtPC14FWkNva3SDisg=="
},
"webidl-conversions": {
"version": "6.1.0",

View file

@ -10,6 +10,7 @@
"gh-pages": "^3.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.1"
},
@ -19,7 +20,8 @@
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
"deploy": "gh-pages -d build",
"cleanup": "rm -rf node_modules/.cache/gh-pages"
},
"eslintConfig": {
"extends": [

89
src/App.js Normal file
View file

@ -0,0 +1,89 @@
import React from 'react';
import {
Route, NavLink, HashRouter
} from 'react-router-dom'
import './app.css';
import './template.css'
import Modern from "./Militaer";
import Home from "./Home";
class App extends React.Component {
render() {
return (
<HashRouter>
<div id="parent">
<header>
<Navigation/>
<h1>Hugos Lieblingsflugzeuge</h1>
</header>
<main>
<Route exact path="/" component={Home}/>
<Route path="/flieger-modern" component={Modern}/>
</main>
<Footer/>
</div>
</HashRouter>
);
}
}
export default App;
class Navigation extends React.Component {
render() {
return (
<nav>
<ul>
<li>
<NavLink to="/">Start</NavLink>
</li>
<li>
<NavLink to="/">Militärflugzeuge</NavLink>
<div className="content">
<NavLink to="/">Erste Weltkrieg</NavLink>
<NavLink to="/">Zwischenkriegszeit</NavLink>
<NavLink to="/">Zweiter Weltkrieg</NavLink>
<NavLink to="/">Kalter Krieg</NavLink>
<NavLink to="/flieger-modern">Moderne</NavLink>
</div>
</li>
<li>
<NavLink to="/">Airliner</NavLink>
<div className="content">
<NavLink to="/">Boeing</NavLink>
<NavLink to="/">Airbus</NavLink>
<NavLink to="/">Andere</NavLink>
</div>
</li>
<li>
<NavLink to="/">Sportflugzeuge</NavLink>
<div className="content">
<NavLink to="/">Doppeldecker</NavLink>
<NavLink to="/">Propellerflugzeuge</NavLink>
<NavLink to="/">Segelflugzeuge</NavLink>
<NavLink to="/">Andere</NavLink>
</div>
</li>
<li>
<NavLink to="/">Spezielle</NavLink>
<div className="content">
<NavLink to="/">Helikopter</NavLink>
<NavLink to="/">Zeppeline</NavLink>
<NavLink to="/">Andere</NavLink>
</div>
</li>
</ul>
</nav>
)
}
}
class Footer extends React.Component {
render() {
return (
<footer>
<div>hi</div>
</footer>
)
}
}

11
src/Home.js Normal file
View file

@ -0,0 +1,11 @@
import React, {Component} from "react";
class Home extends Component {
render() {
return (
<h1>Willkommen bei Hugos Lieblingsflugzeugen!</h1>
)
}
}
export default Home;

View file

@ -2,7 +2,7 @@ import React from 'react';
import f22 from './img/raptor-1040097_1920.png'
import harrier from './img/av-8b-harrier-1986422_1920.jpg'
class Content extends React.Component {
class Modern extends React.Component {
render() {
const items = Array(100).fill(1).map((x, y) => x + y)
.map(x => <ModelImage img={f22} name={'F' + (20 + x) + ' Raptor'}/>);
@ -16,9 +16,6 @@ class Content extends React.Component {
}
}
export default Content;
class ModelImage extends React.Component {
constructor(props) {
super(props);
@ -40,4 +37,6 @@ class ModelImage extends React.Component {
</div>
);
}
}
}
export default Modern;

View file

@ -1,82 +0,0 @@
import React from 'react';
import './app.css';
import './template.css'
import Content from "./content";
class App extends React.Component {
render() {
return (
<div id="parent">
<header>
<Navigation/>
<h1>Hugos Lieblingsflugzeuge</h1>
</header>
<main>
<Content/>
</main>
<Footer/>
</div>
);
}
}
export default App;
class Navigation extends React.Component {
render() {
return (
<nav>
<ul>
<li>
<button onClick="">Start</button>
</li>
<li>
<button onClick="">Militärflugzeuge</button>
<div>
<button onClick="">Erste Weltkrieg</button>
<button onClick="">Zwischenkriegszeit</button>
<button onClick="">Zweiter Weltkrieg</button>
<button onClick="">Kalter Krieg</button>
<button onClick="">Moderne</button>
</div>
</li>
<li>
<button onClick="">Airliner</button>
<div>
<button onClick="">Boeing</button>
<button onClick="">Airbus</button>
<button onClick="">Andere</button>
</div>
</li>
<li>
<button onClick="">Sportflugzeuge</button>
<div>
<button onClick="">Doppeldecker</button>
<button onClick="">Propellerflugzeuge</button>
<button onClick="">Segelflugzeuge</button>
<button onClick="">Andere</button>
</div>
</li>
<li>
<button onClick="">Spezielle</button>
<div>
<button onClick="">Helikopter</button>
<button onClick="">Zeppeline</button>
<button onClick="">Andere</button>
</div>
</li>
</ul>
</nav>
)
}
}
class Footer extends React.Component {
render() {
return (
<footer>
<div>hi</div>
</footer>
)
}
}

View file

@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./app";
import App from "./App";
ReactDOM.render(
<App/>

View file

@ -55,10 +55,11 @@ nav ul li:hover {
transition-duration: 0.4s;
}
/*all nav button*/
nav ul li button {
/*all nav a*/
nav ul li a {
display: block;
text-align: center;
text-decoration: none;
color: black;
width: 100%;
height: 100%;
@ -67,18 +68,18 @@ nav ul li button {
cursor: pointer;
}
/*all nav button focus - remove outline so it looks like a normal link*/
nav ul li button:focus {
/*all nav a focus - remove outline so it looks like a normal link*/
nav ul li a:focus {
outline: 0;
}
/*all nav a hover*/
nav ul li button:hover {
nav ul li a:hover {
background-color: var(--nav-hover-color);
}
/*drop menu*/
nav ul li div {
nav ul li .content {
display: none;
background-color: var(--nav-color);
z-index: 1;
@ -86,11 +87,11 @@ nav ul li div {
}
/*drop menu main hover*/
nav ul li:hover div {
nav ul li:hover .content {
display: block;
}
/*drop menu button*/
nav ul li div button {
/*drop menu a*/
nav ul li .content a {
padding: 8px 0 8px 0;
}