Create structure of basic UI components
This commit is contained in:
16
src/components/BottomMenu.js
Normal file
16
src/components/BottomMenu.js
Normal 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
14
src/components/Header.js
Normal 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;
|
12
src/components/NavigationDrawer.js
Normal file
12
src/components/NavigationDrawer.js
Normal 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;
|
12
src/components/PageArea.js
Normal file
12
src/components/PageArea.js
Normal 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;
|
18
src/components/css/BottomMenu.css
Normal file
18
src/components/css/BottomMenu.css
Normal 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;
|
||||
}
|
5
src/components/css/Header.css
Normal file
5
src/components/css/Header.css
Normal file
@ -0,0 +1,5 @@
|
||||
header {
|
||||
width: 100vw;
|
||||
height: 15vh;
|
||||
background: burlywood;
|
||||
}
|
0
src/components/css/NavigationDrawer.css
Normal file
0
src/components/css/NavigationDrawer.css
Normal file
4
src/components/css/PageArea.css
Normal file
4
src/components/css/PageArea.css
Normal file
@ -0,0 +1,4 @@
|
||||
#pageArea {
|
||||
width: 100vw;
|
||||
flex: 1 1 auto;
|
||||
}
|
Reference in New Issue
Block a user