From 0a99562d831a7678ea58550927daf0a2140e30db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Thu, 26 Nov 2020 19:37:44 +0100 Subject: [PATCH] Add TopMenu component and page specific content --- src/App.css | 1 + src/App.js | 2 ++ src/components/BottomMenu.js | 10 ++++----- src/components/BottomMenuButton.js | 15 -------------- src/components/MainArea.js | 2 +- src/components/MenuButton.js | 23 +++++++++++++++++++++ src/components/TopMenu.js | 15 ++++++++++++++ src/components/TripSelector.js | 17 +++++++++++++++ src/components/css/Header.css | 4 ++-- src/components/css/MainArea.css | 10 +++------ src/components/css/TopMenu.css | 32 +++++++++++++++++++++++++++++ src/components/css/TripSelector.css | 32 +++++++++++++++++++++++++++++ src/components/pages/Tickets.js | 8 +++++--- src/components/pages/TicketsBuy.js | 21 +++++++++++++++---- src/components/pages/TrafficInfo.js | 4 ++-- src/components/pages/Travel.js | 14 ++++++++++--- src/variables.css | 4 ++++ 17 files changed, 172 insertions(+), 42 deletions(-) delete mode 100644 src/components/BottomMenuButton.js create mode 100644 src/components/MenuButton.js create mode 100644 src/components/TopMenu.js create mode 100644 src/components/TripSelector.js create mode 100644 src/components/css/TopMenu.css create mode 100644 src/components/css/TripSelector.css diff --git a/src/App.css b/src/App.css index 221c2cf..b5c9af4 100644 --- a/src/App.css +++ b/src/App.css @@ -3,6 +3,7 @@ text-align: center; display: flex; flex-direction: column; + background: var(--colorBg); } .App-logo { diff --git a/src/App.js b/src/App.js index 742b2a2..94f819c 100644 --- a/src/App.js +++ b/src/App.js @@ -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() { diff --git a/src/components/BottomMenu.js b/src/components/BottomMenu.js index 90c34de..e89f40f 100644 --- a/src/components/BottomMenu.js +++ b/src/components/BottomMenu.js @@ -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 (
- + - + - + - +
); diff --git a/src/components/BottomMenuButton.js b/src/components/BottomMenuButton.js deleted file mode 100644 index 9ee3b47..0000000 --- a/src/components/BottomMenuButton.js +++ /dev/null @@ -1,15 +0,0 @@ -import React, { Component } from 'react'; -import './css/BottomMenu.css'; - -class BottomMenuButton extends Component { - render(label, icon) { - return ( - - ); - } -} - -export default BottomMenuButton; \ No newline at end of file diff --git a/src/components/MainArea.js b/src/components/MainArea.js index f5a3246..2ad5f6c 100644 --- a/src/components/MainArea.js +++ b/src/components/MainArea.js @@ -6,7 +6,7 @@ class MainArea extends Component { render() { return (
-
+ {this.props.children}
); } diff --git a/src/components/MenuButton.js b/src/components/MenuButton.js new file mode 100644 index 0000000..5205da4 --- /dev/null +++ b/src/components/MenuButton.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; + +class MenuButton extends Component { + render(label, icon, childOrderReverse) { + if (this.props.childOrderReverse) { + return ( + + ); + } else { + return ( + + ); + } + } +} + +export default MenuButton; \ No newline at end of file diff --git a/src/components/TopMenu.js b/src/components/TopMenu.js new file mode 100644 index 0000000..ce19f18 --- /dev/null +++ b/src/components/TopMenu.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +import './css/TopMenu.css'; + +class TopMenu extends Component { + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +export default TopMenu; \ No newline at end of file diff --git a/src/components/TripSelector.js b/src/components/TripSelector.js new file mode 100644 index 0000000..838f1b5 --- /dev/null +++ b/src/components/TripSelector.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; + +class TripSelector extends Component { + render() { + return ( +
+ + +
+ + +
+ ); + } +} + +export default TripSelector; \ No newline at end of file diff --git a/src/components/css/Header.css b/src/components/css/Header.css index 0ffe297..4672c4c 100644 --- a/src/components/css/Header.css +++ b/src/components/css/Header.css @@ -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 { diff --git a/src/components/css/MainArea.css b/src/components/css/MainArea.css index 32504ee..8e74147 100644 --- a/src/components/css/MainArea.css +++ b/src/components/css/MainArea.css @@ -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; } \ No newline at end of file diff --git a/src/components/css/TopMenu.css b/src/components/css/TopMenu.css new file mode 100644 index 0000000..74b52d0 --- /dev/null +++ b/src/components/css/TopMenu.css @@ -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); +} \ No newline at end of file diff --git a/src/components/css/TripSelector.css b/src/components/css/TripSelector.css new file mode 100644 index 0000000..c760a1b --- /dev/null +++ b/src/components/css/TripSelector.css @@ -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; +} \ No newline at end of file diff --git a/src/components/pages/Tickets.js b/src/components/pages/Tickets.js index 3e14766..b79a73b 100644 --- a/src/components/pages/Tickets.js +++ b/src/components/pages/Tickets.js @@ -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 ( <>
- + +

Du har inga biljetter

+ ); } diff --git a/src/components/pages/TicketsBuy.js b/src/components/pages/TicketsBuy.js index 6343e13..db3e092 100644 --- a/src/components/pages/TicketsBuy.js +++ b/src/components/pages/TicketsBuy.js @@ -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 ( <>
- + + + + + + +

Du har inga tidigare köp

+ ); } diff --git a/src/components/pages/TrafficInfo.js b/src/components/pages/TrafficInfo.js index c393a62..284e9ad 100644 --- a/src/components/pages/TrafficInfo.js +++ b/src/components/pages/TrafficInfo.js @@ -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() { diff --git a/src/components/pages/Travel.js b/src/components/pages/Travel.js index 930c7bc..bf99ef9 100644 --- a/src/components/pages/Travel.js +++ b/src/components/pages/Travel.js @@ -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 ( <>
- + + + + + ); } diff --git a/src/variables.css b/src/variables.css index 20427b5..9867467 100644 --- a/src/variables.css +++ b/src/variables.css @@ -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); } \ No newline at end of file