Create structure of basic UI components
This commit is contained in:
parent
cf7a1e8b6f
commit
12af81f21f
@ -1,5 +1,8 @@
|
|||||||
.App {
|
.App {
|
||||||
text-align: center;
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-logo {
|
.App-logo {
|
||||||
@ -35,4 +38,4 @@
|
|||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
26
src/App.js
26
src/App.js
@ -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;
|
||||||
|
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;
|
||||||
|
}
|
@ -13,43 +13,4 @@
|
|||||||
html, body, #root, #app {
|
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 {
|
|
||||||
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user