-
{this.props.stop.name}
-
-
{this.props.stop.locations[0]}
-
-
+
+ Välj läge:
+
+ <>
+
+
+
+
+
+
+
{this.props.stop.name !== undefined ?
+ this.props.stop.name
+ : "Hållplats saknas"
+ }
+
+ {this.props.stop.name !== undefined && this.props.stop.track !== undefined ?
+
+
+ {"Läge " + this.props.stop.track}
+
+
+
+ :
+ (this.props.stop.name !== undefined ?
+ <>
+ :
Vänligen aktivera platsåtkomst
+ )
+ }
diff --git a/src/components/TripSelector.js b/src/components/TripSelector.js
index d1394c8..d5af5e8 100644
--- a/src/components/TripSelector.js
+++ b/src/components/TripSelector.js
@@ -5,10 +5,10 @@ class TripSelector extends Component {
return (
);
}
diff --git a/src/components/css/BottomMenu.css b/src/components/css/BottomMenu.css
index 8139696..1634795 100644
--- a/src/components/css/BottomMenu.css
+++ b/src/components/css/BottomMenu.css
@@ -1,7 +1,7 @@
#bottomMenu {
width: 100%;
height: 9vh;
- min-height: 60px;
+ min-height: 70px;
background: white;
display: flex;
justify-content: space-evenly;
diff --git a/src/components/css/Button.css b/src/components/css/Button.css
index 19a47ca..4aef246 100644
--- a/src/components/css/Button.css
+++ b/src/components/css/Button.css
@@ -1,3 +1,7 @@
button:active {
background: rgba(0, 0, 0, 0.1);
+}
+
+a:active {
+ background: rgba(0, 0, 0, 0.1);
}
\ No newline at end of file
diff --git a/src/components/css/Header.css b/src/components/css/Header.css
index 4672c4c..3a39c8c 100644
--- a/src/components/css/Header.css
+++ b/src/components/css/Header.css
@@ -3,7 +3,7 @@ header {
display: flex;
flex-direction: row;
align-items: center;
- padding: 15px 15px 15vh 15px;
+ padding: 15px 15px 12vh 15px;
top: 0;
background: linear-gradient(90deg, var(--colorVT1), var(--colorVT2));
}
diff --git a/src/components/css/MainArea.css b/src/components/css/MainArea.css
index 2fd34da..31bc845 100644
--- a/src/components/css/MainArea.css
+++ b/src/components/css/MainArea.css
@@ -3,6 +3,6 @@ main {
flex: 1 1 auto;
display: flex;
flex-flow: column;
- justify-content: space-evenly;
+ justify-content: flex-start;
overflow: hidden scroll;
}
\ No newline at end of file
diff --git a/src/components/css/StopTitle.css b/src/components/css/StopTitle.css
index d03dcb0..8063d66 100644
--- a/src/components/css/StopTitle.css
+++ b/src/components/css/StopTitle.css
@@ -8,21 +8,38 @@
justify-content: space-evenly;
padding: 0 5vw;
z-index: 4;
+ max-width: 80vw;
}
#stopTitle h1, #stopTitle h3 {
font-weight: 100;
}
-#stopTitle div {
- display: flex;
- flex-direction: row;
+#stopTitle h1 {
+ font-size: 9vw;
}
#stopTitle h3 {
+ font-size: 5vw;
color: var(--colorDiscrete);
}
+@media screen and (min-width: 400px) {
+ #stopTitle h1 {
+ font-size: 35px;
+ }
+
+ #stopTitle h3 {
+ font-size: 20px;
+ color: var(--colorDiscrete);
+ }
+}
+
+#stopTitle div {
+ display: flex;
+ flex-direction: row;
+}
+
#stopTitle button {
width: auto;
height: 100%;
diff --git a/src/components/css/TrafficInfo.css b/src/components/css/TrafficInfo.css
index 088bc6c..5b2333f 100644
--- a/src/components/css/TrafficInfo.css
+++ b/src/components/css/TrafficInfo.css
@@ -1,6 +1,7 @@
#trafficList {
height: 100%;
margin-top: 40px;
+ padding-bottom: 40px;
background: white;
}
@@ -10,8 +11,9 @@
justify-content: space-evenly;
align-items: center;
width: 100vw;
- padding: 6vw 0;
+ padding: 8vw 0;
background: white;
+ font-size: 3.5vw;
}
.trafficEntry div {
@@ -19,13 +21,25 @@
display: flex;
flex-direction: row;
justify-content: space-evenly;
- margin-bottom: 8px;
-}
+ margin-bottom: 2vh;
+}
+
+.trafficEntry div:only-child {
+ margin-bottom: 0;
+}
+
+.trafficEntry div:only-child > .timeColumn,
+.trafficEntry div:only-child > .lineColumn {
+ margin-bottom: 0;
+}
+
+.trafficEntry div:only-child > .timeColumn {
+ justify-content: center !important;
+}
.trafficEntry div p {
text-align: left;
- font-size: 3.5vw;
- padding: 3vw 0;
+ padding: 3vh 0 0 0;
}
.trafficEntry div div {
@@ -33,25 +47,6 @@
flex-direction: column;
}
-.timeColumn {
- flex-basis: 15%;
- justify-content: flex-start;
- align-items: center;
-}
-
-.timeColumn img {
- width: 20px;
-}
-
-.lineColumn {
- flex-basis: 75%;
-}
-
-.lineColumn img {
- width: 30px;
- margin-right: 10px;
-}
-
.trafficEntry div div div {
display: flex;
flex-direction: row;
@@ -59,6 +54,53 @@
align-items: flex-end;
}
+.timeColumn {
+ flex-basis: 15%;
+ justify-content: space-between !important;
+ align-items: center;
+}
+
+.timeColumn div {
+ align-items: center !important;
+}
+
+.timeColumn img {
+ width: 3.5vw;
+}
+
+.lineColumn {
+ flex-basis: 75%;
+ max-width: 75%;
+}
+
+.lineColumn div {
+ margin-bottom: 0px;
+}
+
+.lineColumn img {
+ width: 7.5vw;
+ margin-right: 10px;
+}
+
+.infoWrapper p {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ flex-basis: 75%;
+ flex-grow: 1;
+ display: block;
+ white-space: nowrap;
+ max-height: 3.5vw;
+}
+
+.infoWrapper span {
+ flex-basis: 25%;
+}
+
+.expanded {
+ white-space: normal !important;
+ max-height: none !important;
+}
+
.lineName {
background: var(--colorLine);
color: white;
@@ -69,11 +111,10 @@
}
.destination {
- font-size: 100%;
text-align: left;
}
-.trafficEntry button {
+.trafficEntry a {
width: 90%;
font-size: 4vw;
font-weight: bold;
@@ -81,4 +122,5 @@
padding: 4vw 0;
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
+ text-decoration: none;
}
\ No newline at end of file
diff --git a/src/components/pages/Tickets.js b/src/components/pages/Tickets.js
index b79a73b..d1fe324 100644
--- a/src/components/pages/Tickets.js
+++ b/src/components/pages/Tickets.js
@@ -2,13 +2,16 @@ import React, { Component } from 'react';
import Header from '../Header.js';
import MainArea from '../MainArea.js';
+import globalData from '../../GlobalData.js';
class Tickets extends Component {
render() {
+ globalData.currentPage = this;
+
return (
<>
-
+
Du har inga biljetter
diff --git a/src/components/pages/TicketsBuy.js b/src/components/pages/TicketsBuy.js
index db3e092..077d1c0 100644
--- a/src/components/pages/TicketsBuy.js
+++ b/src/components/pages/TicketsBuy.js
@@ -9,8 +9,12 @@ import clockIcon from '../../img/clock.svg';
import calendarIcon from '../../img/calendar.svg';
import recurringIcon from '../../img/redo.svg';
+import globalData from '../../GlobalData.js';
+
class TicketsBuy extends Component {
render() {
+ globalData.currentPage = this;
+
return (
<>
@@ -19,7 +23,7 @@ class TicketsBuy extends Component {
-
+
Du har inga tidigare köp
diff --git a/src/components/pages/TrafficInfo.js b/src/components/pages/TrafficInfo.js
index 0fa69c2..c59c0a3 100644
--- a/src/components/pages/TrafficInfo.js
+++ b/src/components/pages/TrafficInfo.js
@@ -6,34 +6,21 @@ import MainArea from "../MainArea.js";
import StopTitle from "../StopTitle.js";
import TrafficList from "../TrafficList.js";
-import Stop from "../../classes/Stop.js";
-import Departure from "../../classes/Departure.js";
+import globalData from '../../GlobalData.js';
class TrafficInfo extends Component {
render() {
- let testStop = new Stop(
- "Lemmingsgatan",
- ["Läge A", "Läge B", "Läge C"],
- [
- new Departure(
- "519",
- "Mot Heden",
- "11:59",
- "Trafikolycka vid Partille Centrum."
- ),
- new Departure("58", "Mot Västra Eriksberg", "12:07"),
- ]
- );
+ globalData.currentPage = this;
return (
<>
-
+
-
+
);
diff --git a/src/components/pages/Travel.js b/src/components/pages/Travel.js
index bf99ef9..5f582f6 100644
--- a/src/components/pages/Travel.js
+++ b/src/components/pages/Travel.js
@@ -7,15 +7,22 @@ import TripSelector from '../TripSelector.js';
import '../css/TripSelector.css';
+import globalData from '../../GlobalData.js';
+
class Travel extends Component {
render() {
+ globalData.currentPage = this;
+
return (
<>
-
+
-
+
);
diff --git a/src/img/userDark.svg b/src/img/userDark.svg
new file mode 100644
index 0000000..06172f0
--- /dev/null
+++ b/src/img/userDark.svg
@@ -0,0 +1,19 @@
+
+
+