schulze/hallbarUtvecklingVT7
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change to class based components

Browse Source
This commit is contained in:
André Wahlberg 2020-11-20 09:04:36 +01:00
parent cf36e00662
commit cf7a1e8b6f
4 changed files with 77 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Västtrafik</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

42
src/App.js
View File

@ -1,23 +1,29 @@
import logo from './logo.svg';
import './App.css'; import './App.css';
import React, { Component } from 'react';
function App() {
return ( class App extends Component {
<div className="App"> render() {
<header className="App-header"> return (
<img src={logo} className="App-logo" alt="logo" /> <div id="App">
<p>Hello World!</p> <div id="navDrawer"></div>
<a
className="App-link" <header>
href="https://reactjs.org" <button id="navDrawBtn"></button>
target="_blank" </header>
rel="noopener noreferrer"
> <div id="pageArea"></div>
Learn React
</a> <div id="bottomMenu">
</header> <button>Biljetter</button>
</div> <button>Köp biljett</button>
); <button>Reseplanering</button>
</div>
</div>
);
}
} }
const app = document.getElementById('App');
export default App; export default App;

BIN
src/fonts/roboto-regular.ttf Normal file
View File

Binary file not shown.

62
src/index.css
View File

@ -1,13 +1,55 @@
body { @font-face {
margin: 0; font-family: 'Roboto';
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', src: url('fonts/roboto-regular.ttf') format('truetype'); /* Safari, Android, iOS */
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
code { * {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', margin: 0;
monospace; 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 {
}