Change to class based components
This commit is contained in:
parent
cf36e00662
commit
cf7a1e8b6f
@ -24,7 +24,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Västtrafik</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
34
src/App.js
34
src/App.js
@ -1,23 +1,29 @@
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
function App() {
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>Hello World!</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
<div id="App">
|
||||
<div id="navDrawer"></div>
|
||||
|
||||
<header>
|
||||
<button id="navDrawBtn"></button>
|
||||
</header>
|
||||
|
||||
<div id="pageArea"></div>
|
||||
|
||||
<div id="bottomMenu">
|
||||
<button>Biljetter</button>
|
||||
<button>Köp biljett</button>
|
||||
<button>Reseplanering</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const app = document.getElementById('App');
|
||||
|
||||
export default App;
|
||||
|
BIN
src/fonts/roboto-regular.ttf
Normal file
BIN
src/fonts/roboto-regular.ttf
Normal file
Binary file not shown.
@ -1,13 +1,55 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('fonts/roboto-regular.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html, body, #root, #app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100vw;
|
||||
height: 15vh;
|
||||
background: burlywood;
|
||||
}
|
||||
|
||||
#pageArea {
|
||||
width: 100vw;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
#bottomMenu {
|
||||
width: 100%;
|
||||
height: 8vh;
|
||||
background: lightcoral;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#bottomMenu button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 5px;
|
||||
flex-basis: calc(100%/3);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#bottomMenu button:active {
|
||||
|
||||
}
|
Loading…
Reference in New Issue
Block a user