Add TopMenu component and page specific content
This commit is contained in:
parent
83cdfb3959
commit
0a99562d83
@ -3,6 +3,7 @@
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--colorBg);
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
|
@ -11,6 +11,8 @@ import Tickets from './components/pages/Tickets.js';
|
||||
import TicketsBuy from './components/pages/TicketsBuy.js';
|
||||
import Travel from './components/pages/Travel.js';
|
||||
import TrafficInfo from './components/pages/TrafficInfo.js';
|
||||
|
||||
import './variables.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import BottomMenuButton from './BottomMenuButton';
|
||||
import MenuButton from './MenuButton';
|
||||
|
||||
import './css/BottomMenu.css';
|
||||
import ticketsIcon from '../img/tickets.svg';
|
||||
@ -14,19 +14,19 @@ class BottomMenu extends Component {
|
||||
return (
|
||||
<div id="bottomMenu">
|
||||
<Link to="/tickets">
|
||||
<BottomMenuButton label="Biljetter" icon={ticketsIcon}/>
|
||||
<MenuButton label="Biljetter" icon={ticketsIcon}/>
|
||||
</Link>
|
||||
|
||||
<Link to="/ticketsBuy">
|
||||
<BottomMenuButton label="Köp biljett" icon={ticketsBuyIcon}/>
|
||||
<MenuButton label="Köp biljett" icon={ticketsBuyIcon}/>
|
||||
</Link>
|
||||
|
||||
<Link to="/travel">
|
||||
<BottomMenuButton label="Reseplanering" icon={travelIcon}/>
|
||||
<MenuButton label="Reseplanering" icon={travelIcon}/>
|
||||
</Link>
|
||||
|
||||
<Link to="/traffic">
|
||||
<BottomMenuButton label="Trafikinfo" icon={trafficIcon}/>
|
||||
<MenuButton label="Trafikinfo" icon={trafficIcon}/>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
@ -1,15 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import './css/BottomMenu.css';
|
||||
|
||||
class BottomMenuButton extends Component {
|
||||
render(label, icon) {
|
||||
return (
|
||||
<button>
|
||||
<img src={this.props.icon}/>
|
||||
<span>{this.props.label}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BottomMenuButton;
|
@ -6,7 +6,7 @@ class MainArea extends Component {
|
||||
render() {
|
||||
return (
|
||||
<main>
|
||||
<div id="topSection" />
|
||||
{this.props.children}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
23
src/components/MenuButton.js
Normal file
23
src/components/MenuButton.js
Normal file
@ -0,0 +1,23 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class MenuButton extends Component {
|
||||
render(label, icon, childOrderReverse) {
|
||||
if (this.props.childOrderReverse) {
|
||||
return (
|
||||
<button>
|
||||
<span>{this.props.label}</span>
|
||||
<img src={this.props.icon}/>
|
||||
</button>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<button>
|
||||
<img src={this.props.icon}/>
|
||||
<span>{this.props.label}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default MenuButton;
|
15
src/components/TopMenu.js
Normal file
15
src/components/TopMenu.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './css/TopMenu.css';
|
||||
|
||||
class TopMenu extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div id="topMenu">
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TopMenu;
|
17
src/components/TripSelector.js
Normal file
17
src/components/TripSelector.js
Normal file
@ -0,0 +1,17 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class TripSelector extends Component {
|
||||
render() {
|
||||
return (
|
||||
<form>
|
||||
<label>Från:</label>
|
||||
<input type="text" placeholder="Hållplats/Adress/Plats" />
|
||||
<hr/>
|
||||
<label for="lname">Till:</label>
|
||||
<input type="text" placeholder="Hållplats/Adress/Plats" />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TripSelector;
|
@ -3,9 +3,9 @@ header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
position: fixed;
|
||||
padding: 15px 15px 15vh 15px;
|
||||
top: 0;
|
||||
background: linear-gradient(90deg, var(--colorVT1), var(--colorVT2));
|
||||
}
|
||||
|
||||
#navBtn img {
|
||||
|
@ -1,11 +1,7 @@
|
||||
main {
|
||||
width: 100vw;
|
||||
flex: 1 1 auto;
|
||||
background: var(--colorBg);
|
||||
}
|
||||
|
||||
#topSection {
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
background: linear-gradient(90deg, var(--colorVT1), var(--colorVT2));
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
32
src/components/css/TopMenu.css
Normal file
32
src/components/css/TopMenu.css
Normal file
@ -0,0 +1,32 @@
|
||||
#topMenu {
|
||||
width: 100vw;
|
||||
height: var(--topMenuHeight);
|
||||
margin-top: calc(var(--topMenuHeight) / -2);
|
||||
display: inline-flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#topMenu button {
|
||||
width: var(--topMenuHeight);
|
||||
height: calc(var(--topMenuHeight) / 1.3);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
background: white;
|
||||
border-radius: calc(var(--topMenuHeight) / 15);
|
||||
box-shadow: var(--boxShadow);
|
||||
}
|
||||
|
||||
#topMenu button:active {
|
||||
background: rgb(235, 235, 235);
|
||||
}
|
||||
|
||||
#topMenu img {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
#topMenu button span {
|
||||
width: 100%;
|
||||
font-size: calc(var(--topMenuHeight) / 7);
|
||||
}
|
32
src/components/css/TripSelector.css
Normal file
32
src/components/css/TripSelector.css
Normal file
@ -0,0 +1,32 @@
|
||||
form {
|
||||
width: 65vw;
|
||||
height: calc(var(--topMenuHeight));
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
padding: 1vw 2vw;
|
||||
border-radius: var(--borderRadius);
|
||||
box-shadow: var(--boxShadow);
|
||||
}
|
||||
|
||||
label {
|
||||
flex-basis: 20%;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
flex-basis: 70%;
|
||||
height: 15px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
--width: 90%;
|
||||
|
||||
flex-basis: var(--width);
|
||||
margin: 0 calc((100% - var(--width)) / 2);
|
||||
opacity: 0.5;
|
||||
}
|
@ -1,14 +1,16 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Header from '../Header.js'
|
||||
import MainArea from '../MainArea.js'
|
||||
import Header from '../Header.js';
|
||||
import MainArea from '../MainArea.js';
|
||||
|
||||
class Tickets extends Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Header title="Biljetter" />
|
||||
<MainArea />
|
||||
<MainArea>
|
||||
<p>Du har inga biljetter</p>
|
||||
</MainArea>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -1,14 +1,27 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Header from '../Header.js'
|
||||
import MainArea from '../MainArea.js'
|
||||
import Header from '../Header.js';
|
||||
import TopMenu from '../TopMenu.js';
|
||||
import MenuButton from '../MenuButton.js';
|
||||
import MainArea from '../MainArea.js';
|
||||
|
||||
import clockIcon from '../../img/clock.svg';
|
||||
import calendarIcon from '../../img/calendar.svg';
|
||||
import recurringIcon from '../../img/redo.svg';
|
||||
|
||||
class TicketsBuy extends Component {
|
||||
render() {
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
<Header title="Köp biljett" />
|
||||
<MainArea />
|
||||
<TopMenu>
|
||||
<MenuButton label="Enkelbiljett" icon={clockIcon} />
|
||||
<MenuButton label="Periodbiljett" icon={calendarIcon} />
|
||||
<MenuButton label="Dygnsbiljett" icon={recurringIcon} />
|
||||
</TopMenu>
|
||||
<MainArea>
|
||||
<p>Du har inga tidigare köp</p>
|
||||
</MainArea>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Header from '../Header.js'
|
||||
import MainArea from '../MainArea.js'
|
||||
import Header from '../Header.js';
|
||||
import MainArea from '../MainArea.js';
|
||||
|
||||
class TrafficInfo extends Component {
|
||||
render() {
|
||||
|
@ -1,14 +1,22 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Header from '../Header.js'
|
||||
import MainArea from '../MainArea.js'
|
||||
import Header from '../Header.js';
|
||||
import TopMenu from '../TopMenu.js';
|
||||
import MainArea from '../MainArea.js';
|
||||
import TripSelector from '../TripSelector.js';
|
||||
|
||||
import '../css/TripSelector.css';
|
||||
|
||||
class Travel extends Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Header title="Reseplanering" />
|
||||
<MainArea />
|
||||
<TopMenu>
|
||||
<TripSelector />
|
||||
</TopMenu>
|
||||
<MainArea>
|
||||
</MainArea>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -2,4 +2,8 @@
|
||||
--colorVT1: rgb(1, 170, 235);
|
||||
--colorVT2: rgb(25, 212, 245);
|
||||
--colorBg: rgb(240, 248, 250);
|
||||
|
||||
--topMenuHeight: 15vh;
|
||||
--borderRadius: calc(var(--topMenuHeight) / 15);
|
||||
--boxShadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.3);
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user