Create structure of basic UI components

This commit is contained in:
André Wahlberg 2020-11-20 09:33:40 +01:00
parent cf7a1e8b6f
commit 12af81f21f
11 changed files with 95 additions and 58 deletions

View File

@ -1,5 +1,8 @@
.App { .App {
text-align: center; height: 100%;
text-align: center;
display: flex;
flex-direction: column;
} }
.App-logo { .App-logo {

View File

@ -1,29 +1,21 @@
import './App.css'; import './App.css';
import React, { Component } from 'react'; import React, { Component } from 'react';
import NavigationDrawer from './components/NavigationDrawer.js'
import Header from './components/Header.js'
import PageArea from './components/PageArea.js'
import BottomMenu from './components/BottomMenu.js'
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<div id="App"> <div className="App">
<div id="navDrawer"></div> <NavigationDrawer />
<Header />
<header> <PageArea />
<button id="navDrawBtn"></button> <BottomMenu />
</header>
<div id="pageArea"></div>
<div id="bottomMenu">
<button>Biljetter</button>
<button>Köp biljett</button>
<button>Reseplanering</button>
</div>
</div> </div>
); );
} }
} }
const app = document.getElementById('App');
export default App; export default App;

View File

@ -0,0 +1,16 @@
import './css/BottomMenu.css';
import React, { Component } from 'react';
class BottomMenu extends Component {
render() {
return (
<div id="bottomMenu">
<button>Biljetter</button>
<button>Köp biljett</button>
<button>Reseplanering</button>
</div>
);
}
}
export default BottomMenu;

14
src/components/Header.js Normal file
View File

@ -0,0 +1,14 @@
import './css/Header.css';
import React, { Component } from 'react';
class Header extends Component {
render() {
return (
<header>
<button id="navDrawBtn"></button>
</header>
);
}
}
export default Header;

View File

@ -0,0 +1,12 @@
import './css/NavigationDrawer.css';
import React, { Component } from 'react';
class NavigationDrawer extends Component {
render() {
return (
<div id="navDrawer"></div>
);
}
}
export default NavigationDrawer;

View File

@ -0,0 +1,12 @@
import './css/PageArea.css';
import React, { Component } from 'react';
class PageArea extends Component {
render() {
return (
<div id="pageArea"></div>
);
}
}
export default PageArea;

View File

@ -0,0 +1,18 @@
#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;
}

View File

@ -0,0 +1,5 @@
header {
width: 100vw;
height: 15vh;
background: burlywood;
}

View File

View File

@ -0,0 +1,4 @@
#pageArea {
width: 100vw;
flex: 1 1 auto;
}

View File

@ -14,42 +14,3 @@ html, body, #root, #app {
width: 100%; width: 100%;
height: 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 {
}