Change to class based components

2020-11-20 09:04:36 +01:00 · 2020-11-20 09:04:36 +01:00 · cf7a1e8b6f
commit cf7a1e8b6f
parent cf36e00662
4 changed files with 77 additions and 29 deletions
--- a/public/index.html
+++ b/public/index.html
@ -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>
--- a/src/App.js
+++ b/src/App.js
@ -1,23 +1,29 @@
-import logo from './logo.svg';
 import './App.css';
+import React, { Component } from 'react';

-function App() {
-    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>
-            </header>
-        </div>
-    );
+
+class App extends Component {
+    render() {
+        return (
+            <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;
--- a/src/fonts/roboto-regular.ttf
+++ b/src/fonts/roboto-regular.ttf
--- a/src/index.css
+++ b/src/index.css
@ -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 {
+    
+}