From 98db97627b1ea8669332ca8b168088899ae1c56c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 11 Dec 2020 11:01:18 +0100 Subject: [PATCH 1/8] Layout fixes --- src/components/css/StopTitle.css | 4 ++-- src/components/css/TrafficInfo.css | 23 ++++++++++++++++------- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/css/StopTitle.css b/src/components/css/StopTitle.css index 2607aac..74abe93 100644 --- a/src/components/css/StopTitle.css +++ b/src/components/css/StopTitle.css @@ -16,7 +16,7 @@ } #stopTitle h1 { - font-size: 9vw; + font-size: 3.5vh; } #stopTitle h3 { @@ -26,7 +26,7 @@ @media screen and (min-width: 400px) { #stopTitle h1 { - font-size: 35px; + font-size: 4vh; } #stopTitle h3 { diff --git a/src/components/css/TrafficInfo.css b/src/components/css/TrafficInfo.css index b9e8775..e87b9fa 100644 --- a/src/components/css/TrafficInfo.css +++ b/src/components/css/TrafficInfo.css @@ -20,7 +20,7 @@ width: 90%; display: flex; flex-direction: row; - justify-content: space-evenly; + justify-content: flex-start; margin-bottom: 2vh; } @@ -50,12 +50,12 @@ .trafficEntry div div div { display: flex; flex-direction: row; - justify-content: flex-start; + justify-content: space-around; align-items: flex-end; } .timeColumn { - flex-basis: 15%; + flex-basis: 20%; justify-content: space-between !important; align-items: center; } @@ -78,8 +78,9 @@ } .lineColumn img { - width: 7.5vw; - margin-right: 10px; + flex-basis: 20%; + height: 9vw; + margin-right: 5%; } .infoWrapper p { @@ -106,12 +107,20 @@ color: white; font-size: 6vw; font-weight: 100; - margin-right: 10px; - padding: 1vw 4vw; + padding: 1vw 2.5vw; + border-radius: var(--borderRadius); + font-family: 'Roboto Light'; + height: 7vw; + flex-basis: 35%; + margin-right: 5%; } .destination { + height: 9vw; + font-size: 4vw; text-align: left; + display: flex; + align-items: flex-end; } .trafficEntry a { From c0a64784acc8f2228cc10269e3c332c278c4421e Mon Sep 17 00:00:00 2001 From: williameriksson126 Date: Fri, 11 Dec 2020 11:38:42 +0100 Subject: [PATCH 2/8] Change: Disruption json file values --- src/APIexamples/departureuser1.json | 4 ++-- src/APIexamples/departureuser2.json | 4 ++-- src/APIexamples/departureuser3.json | 4 ++-- src/APIexamples/departureuser4.json | 2 +- src/APIexamples/disruption1.json | 6 +----- src/APIexamples/disruption2.json | 12 ++++++++++-- src/APIexamples/locationuser1.json | 8 ++++---- src/APIexamples/locationuser2.json | 8 ++++---- src/APIexamples/locationuser3.json | 8 ++++---- src/APIexamples/locationuser4.json | 8 ++++---- 10 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/APIexamples/departureuser1.json b/src/APIexamples/departureuser1.json index 6b56110..f9a5ae9 100644 --- a/src/APIexamples/departureuser1.json +++ b/src/APIexamples/departureuser1.json @@ -10,7 +10,7 @@ "journeyNumber": "22", "type": "BUS", "stopid": "9022014014751002", - "stop": "Guddeby, Kungälv", + "stop": "Guddeby", "time": "09:40", "date": "2020-12-11", "journeyid": "9015014621000022", @@ -32,7 +32,7 @@ "journeyNumber": "2", "type": "BUS", "stopid": "9022014014751002", - "stop": "Guddeby, Kungälv", + "stop": "Guddeby", "time": "12:29", "date": "2020-12-11", "journeyid": "9015014692700002", diff --git a/src/APIexamples/departureuser2.json b/src/APIexamples/departureuser2.json index 3d9f6a0..82848e1 100644 --- a/src/APIexamples/departureuser2.json +++ b/src/APIexamples/departureuser2.json @@ -10,7 +10,7 @@ "journeyNumber": "22", "type": "BUS", "stopid": "9022014014010002", - "stop": "Hålta kyrka, Kungälv", + "stop": "Hålta kyrka", "time": "09:47", "date": "2020-12-11", "journeyid": "9015014621000022", @@ -32,7 +32,7 @@ "journeyNumber": "2", "type": "BUS", "stopid": "9022014014010002", - "stop": "Hålta kyrka, Kungälv", + "stop": "Hålta kyrka", "time": "12:38", "date": "2020-12-11", "journeyid": "9015014692700002", diff --git a/src/APIexamples/departureuser3.json b/src/APIexamples/departureuser3.json index fe689cf..8bcee7a 100644 --- a/src/APIexamples/departureuser3.json +++ b/src/APIexamples/departureuser3.json @@ -10,7 +10,7 @@ "journeyNumber": "22", "type": "BUS", "stopid": "9022014014614002", - "stop": "Stenskärsvägen, Kungälv", + "stop": "Stenskärsvägen", "time": "09:52", "date": "2020-12-11", "journeyid": "9015014621000022", @@ -32,7 +32,7 @@ "journeyNumber": "10", "type": "BUS", "stopid": "9022014014614002", - "stop": "Stenskärsvägen, Kungälv", + "stop": "Stenskärsvägen", "time": "10:44", "date": "2020-12-11", "journeyid": "9015014632000010", diff --git a/src/APIexamples/departureuser4.json b/src/APIexamples/departureuser4.json index d8ad285..325d264 100644 --- a/src/APIexamples/departureuser4.json +++ b/src/APIexamples/departureuser4.json @@ -9,7 +9,7 @@ "journeyNumber": "10", "type": "BUS", "stopid": "9022014014225001", - "stop": "Skrämmenborg, Kungälv", + "stop": "Skrämmenborg", "time": "15:19", "date": "2020-12-11", "journeyid": "9015014692800010", diff --git a/src/APIexamples/disruption1.json b/src/APIexamples/disruption1.json index fe948d3..ca12dce 100644 --- a/src/APIexamples/disruption1.json +++ b/src/APIexamples/disruption1.json @@ -4,13 +4,9 @@ "title":"Nabbensbergsvägen närmast Edsvägen helt avstängd och trafiken hänvisas istället via Korsebergsvägen. Samtidigt tas den tillfälliga förbifarten bort på Edsvägen och trafiken kommer att ledas förbi den nya cirkulationsplatsen i de två västra körfälten tills arbetet på Nabbensbergsvägen är klart Hastighet: 50km/h", "time":"00:07", "affectedStopPoints":[ - { - "gid": "9022014014010001", - "name": "Hålta kyrka, Kungälv" - }, { "gid": "9022014014614001", - "name": "Stenskärsvägen, Kungälv" + "name": "Stenskärsvägen" } ] } \ No newline at end of file diff --git a/src/APIexamples/disruption2.json b/src/APIexamples/disruption2.json index e66a95a..33b5c80 100644 --- a/src/APIexamples/disruption2.json +++ b/src/APIexamples/disruption2.json @@ -5,8 +5,16 @@ "time":"00:09", "affectedStopPoints":[ { - "gid": "9022014014762001", - "name": "Kuröd, Kungälv" + "gid": "9022014014751001", + "name": "Guddeby" + }, + { + "gid": "9022014014010001", + "name": "Hålta kyrka" + }, + { + "gid": "9022014014614001", + "name": "Stenskärsvägen" } ] } \ No newline at end of file diff --git a/src/APIexamples/locationuser1.json b/src/APIexamples/locationuser1.json index f8b13db..41e5132 100644 --- a/src/APIexamples/locationuser1.json +++ b/src/APIexamples/locationuser1.json @@ -5,27 +5,27 @@ "serverdate": "2020-12-11", "StopLocation": [ { - "name": "Guddeby, Kungälv", + "name": "Guddeby", "id": "9022014014751001", "lat": "57.874665", "lon": "11.903884", "track": "A" }, { - "name": "Guddeby, Kungälv", + "name": "Guddeby", "id": "9021014014751000", "lat": "57.874710", "lon": "11.903929" }, { - "name": "Guddeby, Kungälv", + "name": "Guddeby", "id": "9022014014751002", "lat": "57.874746", "lon": "11.903965", "track": "B" }, { - "name": "Stället, Kungälv", + "name": "Stället", "id": "9022014014744001", "lat": "57.869784", "lon": "11.904172", diff --git a/src/APIexamples/locationuser2.json b/src/APIexamples/locationuser2.json index 7fdd235..1468101 100644 --- a/src/APIexamples/locationuser2.json +++ b/src/APIexamples/locationuser2.json @@ -5,27 +5,27 @@ "serverdate": "2020-12-11", "StopLocation": [ { - "name": "Hålta kyrka, Kungälv", + "name": "Hålta kyrka", "id": "9022014014010001", "lat": "57.895125", "lon": "11.827854", "track": "A" }, { - "name": "Hålta kyrka, Kungälv", + "name": "Hålta kyrka", "id": "9021014014010000", "lat": "57.895206", "lon": "11.827647" }, { - "name": "Hålta kyrka, Kungälv", + "name": "Hålta kyrka", "id": "9022014014010002", "lat": "57.895278", "lon": "11.827440", "track": "B" }, { - "name": "Hålta skola, Kungälv", + "name": "Hålta skola", "id": "9022014014015001", "lat": "57.896015", "lon": "11.824555", diff --git a/src/APIexamples/locationuser3.json b/src/APIexamples/locationuser3.json index cb4906f..64140f1 100644 --- a/src/APIexamples/locationuser3.json +++ b/src/APIexamples/locationuser3.json @@ -5,27 +5,27 @@ "serverdate": "2020-12-11", "StopLocation": [ { - "name": "Stenskärsvägen, Kungälv", + "name": "Stenskärsvägen", "id": "9022014014614001", "lat": "57.894594", "lon": "11.740128", "track": "A" }, { - "name": "Stenskärsvägen, Kungälv", + "name": "Stenskärsvägen", "id": "9022014014614002", "lat": "57.894729", "lon": "11.739984", "track": "B" }, { - "name": "Stenskärsvägen, Kungälv", + "name": "Stenskärsvägen", "id": "9021014014614000", "lat": "57.894738", "lon": "11.739858" }, { - "name": "Tjuvkilsboden, Kungälv", + "name": "Tjuvkilsboden", "id": "9022014014615002", "lat": "57.892743", "lon": "11.743490", diff --git a/src/APIexamples/locationuser4.json b/src/APIexamples/locationuser4.json index 38f7289..db0eb86 100644 --- a/src/APIexamples/locationuser4.json +++ b/src/APIexamples/locationuser4.json @@ -5,27 +5,27 @@ "serverdate": "2020-12-11", "StopLocation": [ { - "name": "Kuröd, Kungälv", + "name": "Kuröd", "id": "9022014014762001", "lat": "57.856687", "lon": "11.864727", "track": "A" }, { - "name": "Kuröd, Kungälv", + "name": "Kuröd", "id": "9021014014762000", "lat": "57.856831", "lon": "11.864260" }, { - "name": "Kuröd, Kungälv", + "name": "Kuröd", "id": "9022014014762002", "lat": "57.856966", "lon": "11.863774", "track": "B" }, { - "name": "Skrämmenborg, Kungälv", + "name": "Skrämmenborg", "id": "9021014014225000", "lat": "57.863528", "lon": "11.867406" From 84fa5e059788739409defde4c9a97bdadbcca7de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 11 Dec 2020 17:00:02 +0100 Subject: [PATCH 3/8] Change usernames to stop names --- src/components/NavigationDrawer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/NavigationDrawer.js b/src/components/NavigationDrawer.js index c4bd993..6dcaeca 100644 --- a/src/components/NavigationDrawer.js +++ b/src/components/NavigationDrawer.js @@ -71,10 +71,10 @@ class NavigationDrawer extends Component { example@gmail.com
From b07708f3e98a73ebe6a475671501648cba172f70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 11 Dec 2020 17:00:36 +0100 Subject: [PATCH 4/8] Add border to button for alternative routes --- src/components/css/TrafficInfo.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/css/TrafficInfo.css b/src/components/css/TrafficInfo.css index e87b9fa..e1052a4 100644 --- a/src/components/css/TrafficInfo.css +++ b/src/components/css/TrafficInfo.css @@ -132,4 +132,5 @@ border-radius: var(--borderRadius); box-shadow: var(--boxShadow); text-decoration: none; + border: 1px solid rgba(0, 0, 0, 0.2); } \ No newline at end of file From 6fc5fd8ea49c496aea52b4ca00174ef65a58edfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 11 Dec 2020 18:19:55 +0100 Subject: [PATCH 5/8] Add snackbar notification for disruptions --- src/App.js | 63 ++++++++--- src/components/DisruptionButton.js | 175 +++++++++++++++-------------- src/img/close.svg | 12 ++ src/index.css | 66 +++++++++++ src/index.js | 6 +- 5 files changed, 217 insertions(+), 105 deletions(-) create mode 100644 src/img/close.svg diff --git a/src/App.js b/src/App.js index f338a98..41a973a 100644 --- a/src/App.js +++ b/src/App.js @@ -2,12 +2,12 @@ import "./variables.css"; import "./App.css"; import React, { Component } from "react"; -import { BrowserRouter as Router, Route } from "react-router-dom"; +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import Snackbar from "@material-ui/core/Snackbar"; +import IconButton from "@material-ui/core/IconButton"; +import globalData from './GlobalData.js'; import BottomMenu from "./components/BottomMenu.js"; -import NearbyStation from "./components/NearbyStation.js"; -import Disruption from "./components/Disruption.js"; -import StationDisruption from "./components/StationDisruption.js"; import Tickets from "./components/pages/Tickets.js"; import TicketsBuy from "./components/pages/TicketsBuy.js"; @@ -15,23 +15,52 @@ import Travel from "./components/pages/Travel.js"; import TrafficInfo from "./components/pages/TrafficInfo.js"; import "./variables.css"; +import warningIcon from './img/warning.svg'; +import closeIcon from './img/close.svg'; + class App extends Component { - render() { - return ( - -
- - - - - + render() { + globalData.root = this; - -
- + return ( + +
+ + + + + + + + + globalData.snackbarVisible = false} + message={ +
+ + Trafikstörning upptäckt +
+ } + action={[ + { globalData.snackbarVisible = false; globalData.root.forceUpdate() }} + > + Visa trafikinfo + + , + ]} + /> +
+ ); - } + } } export default App; diff --git a/src/components/DisruptionButton.js b/src/components/DisruptionButton.js index af5ddcf..9fb3769 100644 --- a/src/components/DisruptionButton.js +++ b/src/components/DisruptionButton.js @@ -23,97 +23,104 @@ import ex2 from '../APIexamples/disruption2.json' class DisruptionButton extends Button { - state = { - jsonLocation: this.props.path, - disruption: "", - u1 : user1, - u2 : user2, - u3 : user3, - u4 : user4, - } - + constructor(props) { + super(props); + this.state = { + jsonLocation: this.props.path, + disruption: "", + u1: user1, + u2: user2, + u3: user3, + u4: user4, + }; + } + updatePage = () => { globalData.currentPage.forceUpdate(); - } - - showMomentTime = (time) => { - return(time.format("HH:mm")) - } + } - genUsers = () => { - if(globalData.users.length < 2){ - this.state.first = true; - this.state.u1.stop = locationuser1.LocationList.StopLocation[0]; - this.state.u1.stop.departures = departureuser1.DepartureBoard.Departures; - this.state.u2.stop = locationuser2.LocationList.StopLocation[0]; - this.state.u2.stop.departures = departureuser2.DepartureBoard.Departures; - this.state.u3.stop = locationuser3.LocationList.StopLocation[0]; - this.state.u3.stop.departures = departureuser3.DepartureBoard.Departures; - this.state.u4.stop = locationuser4.LocationList.StopLocation[0]; - this.state.u4.stop.departures = departureuser4.DepartureBoard.Departures; - globalData.users = [ - this.state.u1, - this.state.u2, - this.state.u3, - this.state.u4 - ] - } - } + showMomentTime = (time) => { + return (time.format("HH:mm")) + } - genDisrupt = () => { - this.genUsers() + genUsers = () => { + if (globalData.users.length < 2) { + this.state.first = true; + this.state.u1.stop = locationuser1.LocationList.StopLocation[0]; + this.state.u1.stop.departures = departureuser1.DepartureBoard.Departures; + this.state.u2.stop = locationuser2.LocationList.StopLocation[0]; + this.state.u2.stop.departures = departureuser2.DepartureBoard.Departures; + this.state.u3.stop = locationuser3.LocationList.StopLocation[0]; + this.state.u3.stop.departures = departureuser3.DepartureBoard.Departures; + this.state.u4.stop = locationuser4.LocationList.StopLocation[0]; + this.state.u4.stop.departures = departureuser4.DepartureBoard.Departures; + globalData.users = [ + this.state.u1, + this.state.u2, + this.state.u3, + this.state.u4 + ] + } + } - this.state.disruption = undefined - if(this.state.jsonLocation === "ex1"){ - for (let stopPoint of ex1.affectedStopPoints) { - for (let user of globalData.users){ - if(stopPoint.gid === user.stoppointgid){ - this.state.disruption = ex1; - var old1t = moment(user.stop.departures[0].time,"HH:mm"); - old1t.add(ex1.time, "HH:mm"); - user.stop.departures[0].newTime = this.showMomentTime(old1t); - user.stop.departures[0].trafficInfo = ex1.title; - } - } - if(stopPoint.gid === globalData.user.stoppointgid){ - this.state.disruption = ex1; - var old2t = moment(globalData.stop.departures[0].time,"HH:mm"); - old2t.add(ex1.time, "HH:mm"); - globalData.stop.departures[0].newTime = this.showMomentTime(old2t); - globalData.stop.departures[0].trafficInfo = ex1.title; - } - } - } else if (this.state.jsonLocation === "ex2"){ - for (let stopPoint of ex2.affectedStopPoints) { - for (let user of globalData.users){ - if(stopPoint.gid === user.stoppointgid){ - this.state.disruption = ex2; - var old3t = moment(user.stop.departures[0].time,"HH:mm"); - old3t.add(ex2.time, "HH:mm"); - user.stop.departures[0].newTime = this.showMomentTime(old3t); - user.stop.departures[0].trafficInfo = ex2.title; - } - } - if(stopPoint.gid === globalData.user.stoppointgid){ - this.state.disruption = ex2; - var old4t = moment(globalData.stop.departures[0].time,"HH:mm"); - old4t.add(ex2.time, "HH:mm"); - globalData.stop.departures[0].newTime = this.showMomentTime(old4t); - globalData.stop.departures[0].trafficInfo = ex2.title; - } - } - } + genDisrupt = () => { + this.genUsers() - globalData.disruption = this.state.disruption - } + this.state.disruption = undefined + if (this.state.jsonLocation === "ex1") { + for (let stopPoint of ex1.affectedStopPoints) { + for (let user of globalData.users) { + if (stopPoint.gid === user.stoppointgid) { + this.state.disruption = ex1; + var old1t = moment(user.stop.departures[0].time, "HH:mm"); + old1t.add(ex1.time, "HH:mm"); + user.stop.departures[0].newTime = this.showMomentTime(old1t); + user.stop.departures[0].trafficInfo = ex1.title; + } + } + if (stopPoint.gid === globalData.user.stoppointgid) { + this.state.disruption = ex1; + var old2t = moment(globalData.stop.departures[0].time, "HH:mm"); + old2t.add(ex1.time, "HH:mm"); + globalData.stop.departures[0].newTime = this.showMomentTime(old2t); + globalData.stop.departures[0].trafficInfo = ex1.title; + globalData.snackbarVisible = true; globalData.root.forceUpdate(); + } + } + } else if (this.state.jsonLocation === "ex2") { + for (let stopPoint of ex2.affectedStopPoints) { + for (let user of globalData.users) { + if (stopPoint.gid === user.stoppointgid) { + this.state.disruption = ex2; + var old3t = moment(user.stop.departures[0].time, "HH:mm"); + old3t.add(ex2.time, "HH:mm"); + user.stop.departures[0].newTime = this.showMomentTime(old3t); + user.stop.departures[0].trafficInfo = ex2.title; + } + } + if (stopPoint.gid === globalData.user.stoppointgid) { + this.state.disruption = ex2; + var old4t = moment(globalData.stop.departures[0].time, "HH:mm"); + old4t.add(ex2.time, "HH:mm"); + globalData.stop.departures[0].newTime = this.showMomentTime(old4t); + globalData.stop.departures[0].trafficInfo = ex2.title; + globalData.snackbarVisible = true; globalData.root.forceUpdate(); + } + } + } - render() { - return ( - - ); - } + globalData.disruption = this.state.disruption + } + + render() { + return ( +
+ +
+ ); + } } diff --git a/src/img/close.svg b/src/img/close.svg new file mode 100644 index 0000000..20590cc --- /dev/null +++ b/src/img/close.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/src/index.css b/src/index.css index 7f00a1c..7071e84 100644 --- a/src/index.css +++ b/src/index.css @@ -32,4 +32,70 @@ button { .hidden { opacity: 0; pointer-events: none; +} + +.MuiSnackbarContent-root { + background: white; + color: black; + justify-content: space-between; + padding: 3.5vw 4vw !important; +} + +.MuiSnackbarContent-action { + flex-basis: 38%; + justify-content: flex-end; + margin-left: 0 !important; + margin-right: 0 !important; + padding-left: 0 !important; + height: 7.5vw; + align-items: center; +} + +.MuiButtonBase-root{ + width: 100%; + padding: 0 !important; + justify-content: space-between; +} + +.MuiButtonBase-root:active { + background: none; +} + +.MuiTouchRipple-root { + display: none; +} + +.MuiSnackbarContent-message { + flex-basis: 60%; + padding: 0 !important; +} + +.MuiIconButton-label { + justify-content: space-between !important; +} + +.MuiIconButton-label a { + align-items: center; +} + +.MuiIconButton-label a { + font-size: 3.5vw; + color: white; + text-decoration: none; +} + +.MuiIconButton-label img { + height: 3.5vw; +} + +#snackDisruptInfo { + display: flex; + height: 7.5vw; + align-items: center; + font-size: 3.5vw; +} + +#snackDisruptInfo img { + height: 100%; + margin-right: 15px; } \ No newline at end of file diff --git a/src/index.js b/src/index.js index ef2edf8..03e8e28 100644 --- a/src/index.js +++ b/src/index.js @@ -5,10 +5,8 @@ import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( - - - , - document.getElementById('root') + , + document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function From 30bcbd0286b7ec2b9d658aa7e05bbfb1ed6b5b4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 11 Dec 2020 18:23:51 +0100 Subject: [PATCH 6/8] Add 'Show less' in detailed traffic info paragraph --- src/components/TrafficEntry.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/TrafficEntry.js b/src/components/TrafficEntry.js index 3b6e82a..2793ef0 100644 --- a/src/components/TrafficEntry.js +++ b/src/components/TrafficEntry.js @@ -59,7 +59,10 @@ class TrafficEntry extends Component { {lineInterference &&
-

{trafficInfo}

+

+ {trafficInfo} + Visa mindre +

Visa mer
} From 13bf20c2ea46c91847480ac1cfdbb711f0380e55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 11 Dec 2020 19:05:30 +0100 Subject: [PATCH 7/8] Hide snackbar option to view traffic info if already on that page --- src/App.js | 11 ++++++++++- src/GlobalData.js | 3 ++- src/components/css/TrafficInfo.css | 2 +- src/index.css | 6 ++---- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 41a973a..fd40510 100644 --- a/src/App.js +++ b/src/App.js @@ -20,6 +20,13 @@ import closeIcon from './img/close.svg'; class App extends Component { + currentPageName = () => { + if (globalData.currentPage.constructor !== undefined) + return globalData.currentPage.constructor.name; + else + return ""; + }; + render() { globalData.root = this; @@ -52,7 +59,9 @@ class App extends Component { color="inherit" onClick={() => { globalData.snackbarVisible = false; globalData.root.forceUpdate() }} > - Visa trafikinfo + {this.currentPageName() !== "TrafficInfo" && + Visa trafikinfo + } , ]} diff --git a/src/GlobalData.js b/src/GlobalData.js index fa6caba..d6a3f4b 100644 --- a/src/GlobalData.js +++ b/src/GlobalData.js @@ -14,7 +14,8 @@ let globalData = { disruption: new Disruption( ), stop: new Stop( - ) + ), + currentPage: "" }; export default globalData; \ No newline at end of file diff --git a/src/components/css/TrafficInfo.css b/src/components/css/TrafficInfo.css index e1052a4..abfb678 100644 --- a/src/components/css/TrafficInfo.css +++ b/src/components/css/TrafficInfo.css @@ -56,7 +56,7 @@ .timeColumn { flex-basis: 20%; - justify-content: space-between !important; + justify-content: flex-start !important; align-items: center; } diff --git a/src/index.css b/src/index.css index 7071e84..8bab8fb 100644 --- a/src/index.css +++ b/src/index.css @@ -71,17 +71,15 @@ button { } .MuiIconButton-label { - justify-content: space-between !important; + justify-content: flex-end !important; } .MuiIconButton-label a { align-items: center; -} - -.MuiIconButton-label a { font-size: 3.5vw; color: white; text-decoration: none; + margin-right: 5vw; } .MuiIconButton-label img { From c294b60b5ad7d9b6423d63080b724f5db5ade737 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 11 Dec 2020 19:05:47 +0100 Subject: [PATCH 8/8] Minor layout adjustments --- src/components/css/TrafficInfo.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/css/TrafficInfo.css b/src/components/css/TrafficInfo.css index abfb678..b1b898f 100644 --- a/src/components/css/TrafficInfo.css +++ b/src/components/css/TrafficInfo.css @@ -39,7 +39,7 @@ .trafficEntry div p { text-align: left; - padding: 3vh 0 0 0; + padding: 2vh 0 0 0; } .trafficEntry div div { @@ -54,6 +54,10 @@ align-items: flex-end; } +.timeColumn div:first-child, .lineColumn div:first-child { + height: 5.5vh; +} + .timeColumn { flex-basis: 20%; justify-content: flex-start !important; @@ -78,9 +82,8 @@ } .lineColumn img { - flex-basis: 20%; + flex-basis: 25%; height: 9vw; - margin-right: 5%; } .infoWrapper p { @@ -112,10 +115,10 @@ font-family: 'Roboto Light'; height: 7vw; flex-basis: 35%; - margin-right: 5%; } .destination { + flex-basis: 40%; height: 9vw; font-size: 4vw; text-align: left;