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 (
+
+ );
+ }
+}
+
+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