From 68b6e4e836a819e1c44490ebd7d294500cc44cfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Tue, 8 Dec 2020 12:28:19 +0100 Subject: [PATCH] Polish and button functionality for traffic info page --- src/classes/Departure.js | 11 +++- src/components/MainArea.js | 2 +- src/components/TrafficEntry.js | 47 +++++++++++++-- src/components/TripSelector.js | 4 +- src/components/css/BottomMenu.css | 2 +- src/components/css/Button.css | 4 ++ src/components/css/Header.css | 2 +- src/components/css/MainArea.css | 2 +- src/components/css/StopTitle.css | 22 ++++++- src/components/css/TrafficInfo.css | 94 +++++++++++++++++++++-------- src/components/pages/Tickets.js | 2 +- src/components/pages/TicketsBuy.js | 2 +- src/components/pages/TrafficInfo.js | 10 ++- src/components/pages/Travel.js | 7 ++- 14 files changed, 162 insertions(+), 49 deletions(-) diff --git a/src/classes/Departure.js b/src/classes/Departure.js index ba0eafc..c95e754 100644 --- a/src/classes/Departure.js +++ b/src/classes/Departure.js @@ -3,17 +3,22 @@ lineName : String (Linjenamnet) finalStop : Stop (Ändhållplats) - time : String (Avgångstid) + originalTime : String (Ursprunglig Avgångstid) + newTime : String (Ny Avgångstid) trafficInfo : String (Trafikinformation) */ class Departure { - constructor(lineName, finalStop, time, trafficInfo) { + constructor(lineName, finalStop, originalTime, trafficInfo) { this.lineName = lineName; this.finalStop = finalStop; - this.time = time; + this.originalTime = originalTime; this.trafficInfo = trafficInfo; } + + timeUpdate(time) { + this.newTime = time; + } } export default Departure; \ No newline at end of file diff --git a/src/components/MainArea.js b/src/components/MainArea.js index 2ad5f6c..8fd526d 100644 --- a/src/components/MainArea.js +++ b/src/components/MainArea.js @@ -5,7 +5,7 @@ import './css/MainArea.css'; class MainArea extends Component { render() { return ( -
+
{this.props.children}
); diff --git a/src/components/TrafficEntry.js b/src/components/TrafficEntry.js index c14144a..897b0b0 100644 --- a/src/components/TrafficEntry.js +++ b/src/components/TrafficEntry.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; import './css/TrafficInfo.css'; @@ -6,6 +7,29 @@ import busIcon from '../img/bus.svg'; import warningIcon from '../img/warning.svg'; class TrafficEntry extends Component { + state = { + expanded: false + }; + + toggle = () => { + if (this.state.expanded) + this.collapse(); + else + this.expand(); + }; + + expand = () => { + this.setState({ + expanded: true + }); + }; + + collapse = () => { + this.setState({ + expanded: false + }); + }; + render() { let trafficInfo = this.props.departure.trafficInfo; let lineInterference = trafficInfo !== "" && trafficInfo !== null && trafficInfo !== undefined; @@ -14,25 +38,40 @@ class TrafficEntry extends Component {
- {this.props.departure.time} + {!lineInterference && + {this.props.departure.originalTime} + } {lineInterference && + <> +
+ {this.props.departure.newTime} + {this.props.departure.originalTime} +
+ }
{this.props.departure.lineName} - {this.props.departure.finalStop} + {"Mot " + this.props.departure.finalStop}
{lineInterference && -

{trafficInfo} Visa mer

+
+

{trafficInfo}

+ Visa mer +
}
{lineInterference && - + Hitta annan resväg }
); 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..c1af67e 100644 --- a/src/components/css/StopTitle.css +++ b/src/components/css/StopTitle.css @@ -14,15 +14,31 @@ 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: 350px) { + #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..7858493 100644 --- a/src/components/pages/Tickets.js +++ b/src/components/pages/Tickets.js @@ -8,7 +8,7 @@ class Tickets extends Component { return ( <>
- +

Du har inga biljetter

 diff --git a/src/components/pages/TicketsBuy.js b/src/components/pages/TicketsBuy.js index db3e092..dc6cf1e 100644 --- a/src/components/pages/TicketsBuy.js +++ b/src/components/pages/TicketsBuy.js @@ -19,7 +19,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..265b2bf 100644 --- a/src/components/pages/TrafficInfo.js +++ b/src/components/pages/TrafficInfo.js @@ -12,20 +12,24 @@ import Departure from "../../classes/Departure.js"; class TrafficInfo extends Component { render() { + /* TEST DATA - TO BE REPLACED */ let testStop = new Stop( "Lemmingsgatan", ["Läge A", "Läge B", "Läge C"], [ new Departure( "519", - "Mot Heden", + "Heden", "11:59", - "Trafikolycka vid Partille Centrum." + "Trafikolycka vid Partille Centrum. Olyckan ska ha inträffat i höjd med brandstationen och det är oklart om någon är skadad. Polis på väg. Två av bilarna behöver bärgas från platsen. Inga uppgifter om personskador." ), - new Departure("58", "Mot Västra Eriksberg", "12:07"), + new Departure("58", "Västra Eriksberg", "12:07"), ] ); + testStop.departures[0].timeUpdate("16:50"); + /* TEST DATA - TO BE REPLACED */ + return ( <>
diff --git a/src/components/pages/Travel.js b/src/components/pages/Travel.js index bf99ef9..cf21f18 100644 --- a/src/components/pages/Travel.js +++ b/src/components/pages/Travel.js @@ -13,9 +13,12 @@ class Travel extends Component { <>
- + - + );