From 5a6443754fb798bb575d273f5a0f7371b8d67da4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juho=20H=C3=A4nninen?= Date: Fri, 8 Sep 2023 15:44:09 +0300 Subject: [PATCH 1/2] Add icons and css styles for pikaratikka Also remove some unused styles and use colors as variables --- src/components/home.module.css | 10 ++- src/components/lineIcon.css | 30 --------- src/components/lineIcon.js | 6 +- src/components/lineIcon.module.css | 6 +- src/components/routeFilterItem.css | 79 ----------------------- src/components/routeFilterItem.module.css | 8 --- src/icons/icon-lrail.js | 21 ++++++ src/styles/common.css | 2 + 8 files changed, 40 insertions(+), 122 deletions(-) delete mode 100644 src/components/lineIcon.css delete mode 100644 src/components/routeFilterItem.css create mode 100644 src/icons/icon-lrail.js diff --git a/src/components/home.module.css b/src/components/home.module.css index 2231d5a..7df9c55 100644 --- a/src/components/home.module.css +++ b/src/components/home.module.css @@ -70,15 +70,19 @@ } .bus { - color: rgb(0, 122, 201); + color: var(--busBlue) } .tram { - color: rgb(0, 152, 95); + color: var(--tramGreen) +} + +.lrail { + color: var(--lrailAzure) } .trunk { - color: #ff6319; + color: var(--trunkOrange) } .row { diff --git a/src/components/lineIcon.css b/src/components/lineIcon.css deleted file mode 100644 index add452d..0000000 --- a/src/components/lineIcon.css +++ /dev/null @@ -1,30 +0,0 @@ -@value contentWrapperMargin, tramGreen, busBlue from "styles/common.css"; - -.lineIconWrapper:first-child { - display: flex; - align-items: center; -} - -.lineIconWrapper > * { - margin-top: 0px; - margin-bottom: 0px; -} - -.lineIconWrapper > svg { - flex: 0 0 24px; -} - -.lineNumber { - font-size: 24px; - font-weight: 600; - margin-right: 12px; - margin-left: 8px; -} - -.bus { - color: busBlue; -} - -.tram { - color: tramGreen; -} diff --git a/src/components/lineIcon.js b/src/components/lineIcon.js index 30f31e4..313e26a 100644 --- a/src/components/lineIcon.js +++ b/src/components/lineIcon.js @@ -1,6 +1,7 @@ import React from "react"; import classNames from "classnames"; import BusIcon from "../icons/icon-bus-station.js"; +import LRailIcon from "../icons/icon-lrail.js"; import TramIcon from "../icons/icon-tram.js"; import TrunkIcon from "../icons/icon-trunk-station.js"; import styles from "./lineIcon.module.css"; @@ -19,13 +20,16 @@ const LineIcon = ({ ) : transportType === "TRAM" ? ( + ) : transportType === "L_RAIL" ? ( + ) : ( )} {shortName} diff --git a/src/components/lineIcon.module.css b/src/components/lineIcon.module.css index b5549b3..add6fe0 100644 --- a/src/components/lineIcon.module.css +++ b/src/components/lineIcon.module.css @@ -27,6 +27,10 @@ color: var(--tramGreen); } +.lrail { + color: var(--lrailAzure); +} + .trunk { - color: #ff6319; + color: var(--trunkOrange); } diff --git a/src/components/routeFilterItem.css b/src/components/routeFilterItem.css deleted file mode 100644 index c5919f7..0000000 --- a/src/components/routeFilterItem.css +++ /dev/null @@ -1,79 +0,0 @@ -@value busBlue, tramGreen, lightGray from "styles/common.css"; - -.root { - position: relative; - min-height: 45px; - height: 100%; -} - -.textRoute { - font-size: 20px; - font-weight: 500; -} - -.textDirection { - font-size: 14px; -} - -.switch { - position: absolute; - top: -6px; - left: 180px; - display: inline-block; - width: 60px; - height: 34px; -} - -.switch input { - display: none; -} - -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: lightGray; - transition: 0.4s; - border-radius: 30px; -} - -.slider:before { - position: absolute; - content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background-color: white; - transition: 0.4s; - border-radius: 50%; -} - -input:checked + .slider:before { - transform: translateX(26px); -} - -input:checked + .bus { - background-color: busBlue; -} - -input:checked + .tram { - background-color: tramGreen; -} - -.stopListButtonWrapper { - padding-left: 20px; -} - -.stopListButton:hover { - opacity: 0.7; -} - -.icon { - position: absolute; - top: 5px; - left: 0px; -} diff --git a/src/components/routeFilterItem.module.css b/src/components/routeFilterItem.module.css index 782a487..2049e79 100644 --- a/src/components/routeFilterItem.module.css +++ b/src/components/routeFilterItem.module.css @@ -54,14 +54,6 @@ input:checked + .slider:before { transform: translateX(26px); } -input:checked + .bus { - background-color: var(--busBlue); -} - -input:checked + .tram { - background-color: var(--tramGreen); -} - .stopListButtonWrapper { padding-left: 20px; } diff --git a/src/icons/icon-lrail.js b/src/icons/icon-lrail.js new file mode 100644 index 0000000..44b658f --- /dev/null +++ b/src/icons/icon-lrail.js @@ -0,0 +1,21 @@ +/* eslint-disable max-len */ + +import React from "react"; + +export default function LRailIcon({ height }) { + return ( + + + + + + + + ); +} diff --git a/src/styles/common.css b/src/styles/common.css index 971a09c..8c10af0 100644 --- a/src/styles/common.css +++ b/src/styles/common.css @@ -11,6 +11,8 @@ --fontColor: rgb(20, 20, 20); --busBlue: rgb(0, 122, 201); --tramGreen: rgb(0, 152, 95); + --lrailAzure: #00b2a9; + --trunkOrange: #ff6319; --lightGray: rgb(221, 222, 220); --mediumGray: rgb(102, 102, 102); --warningRed: rgb(220, 4, 81); From 983a938cacf29107782ebefdb4f80dcfcb9c3e65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juho=20H=C3=A4nninen?= Date: Fri, 8 Sep 2023 15:48:41 +0300 Subject: [PATCH 2/2] Remove hardcoded transporttype and add pikaratikka color to numbers Also refactor some duplicated functions under the same module --- src/components/home.js | 7 +++--- src/components/lineList.js | 40 ++++++++++------------------------ src/components/mapContainer.js | 14 ++---------- src/components/sidebar.js | 19 +++------------- src/utils/lineDataUtils.js | 28 ++++++++++++++++++++++++ 5 files changed, 47 insertions(+), 61 deletions(-) create mode 100644 src/utils/lineDataUtils.js diff --git a/src/components/home.js b/src/components/home.js index 749dba0..9e453b8 100644 --- a/src/components/home.js +++ b/src/components/home.js @@ -25,14 +25,13 @@ class Home extends React.Component { lineNumbers = (selectedLines) => { return selectedLines.map((line, index) => { - const type = - line.routes.nodes.length > 0 ? line.routes.nodes[0].mode : line.transportType; return (
{line.lineNumber} diff --git a/src/components/lineList.js b/src/components/lineList.js index 74e8ddf..7125379 100644 --- a/src/components/lineList.js +++ b/src/components/lineList.js @@ -8,45 +8,27 @@ import { get, groupBy, orderBy } from "lodash"; import Line from "./line"; import LineSearch from "./lineSearch"; import styles from "./lineList.module.css"; - -const transportTypeOrder = ["tram", "bus"]; +import { + parseLineNumber, + parseTransportType, + compareLineNameOrder, +} from "../utils/lineDataUtils"; const removeTrainsFilter = (line) => line.lineId.substring(0, 1) !== "3"; const removeFerryFilter = (line) => { return line.routes.nodes[0].type !== "07"; }; -const setTransportTypeMapper = (line) => { - if (line.lineId.substring(0, 4) >= 1001 && line.lineId.substring(0, 4) <= 1010) { - return { ...line, transportType: "tram" }; - } - return { ...line, transportType: "bus" }; -}; - -const parseLineNumber = (lineId) => - // Remove 1st number, which represents the city - // Remove all zeros from the beginning - lineId.substring(1).replace(/^0+/, ""); +const setTransportTypeMapper = (line) => ({ + ...line, + transportType: parseTransportType(line), +}); const lineNumberMapper = (line) => ({ ...line, lineNumber: parseLineNumber(line.lineId), }); -const linesSorter = (a, b) => { - if (a.transportType !== b.transportType) { - return transportTypeOrder.indexOf(a.transportType) > - transportTypeOrder.indexOf(b.transportType) - ? 1 - : -1; - } else if (a.lineId.substring(1, 4) !== b.lineId.substring(1, 4)) { - return a.lineId.substring(1, 4) > b.lineId.substring(1, 4) ? 1 : -1; - } else if (a.lineId.substring(0, 1) !== b.lineId.substring(0, 1)) { - return a.lineId.substring(0, 1) > b.lineId.substring(0, 1) ? 1 : -1; - } - return a.lineId.substring(4, 6) > b.lineId.substring(4, 6) ? 1 : -1; -}; - const allLinesQuery = gql` query AllLinesQuery { allLines { @@ -156,7 +138,7 @@ const LineList = (props) => { .filter((line) => isIgnoredLine(line)) .map(setTransportTypeMapper) .map(lineNumberMapper) - .sort(linesSorter) + .sort(compareLineNameOrder) .filter((value) => { if (value.lineId) { return ( @@ -184,7 +166,7 @@ const LineList = (props) => { lineId={line.lineId} longName={line.nameFi} shortName={line.lineNumber} - transportType={line.routes.nodes[0].mode} + transportType={line.transportType} dateBegin={line.dateBegin} dateEnd={line.dateEnd} trunkRoute={line.trunkRoute === "1"} diff --git a/src/components/mapContainer.js b/src/components/mapContainer.js index 9c63042..9611d3a 100644 --- a/src/components/mapContainer.js +++ b/src/components/mapContainer.js @@ -7,17 +7,7 @@ import uniq from "lodash/uniq"; import Map from "./map"; import dayjs from "dayjs"; -const parseLineNumber = (lineId) => - // Remove 1st number, which represents the city - // Remove all zeros from the beginning - lineId.substring(1).replace(/^0+/, ""); - -const getTransportType = (line) => { - if (line.lineId.substring(0, 4) >= 1001 && line.lineId.substring(0, 4) <= 1010) { - return "tram"; - } - return "bus"; -}; +import { parseLineNumber, parseTransportType } from "../utils/lineDataUtils"; const lineQuery = gql` query lineQuery($id: String!, $dateBegin: Date!, $dateEnd: Date!) { @@ -249,7 +239,7 @@ class MapContainer extends Component { lineId: line.lineId, nameFi: line.nameFi, lineKey: lineKey, - transportType: getTransportType(line), + transportType: parseTransportType(line), lineNumber: parseLineNumber(line.lineId), lineRoutes: sortBy(line.routes.nodes, "dateBegin"), trunkRoute: line.trunkRoute === "1", diff --git a/src/components/sidebar.js b/src/components/sidebar.js index f88b944..1e2c2ee 100644 --- a/src/components/sidebar.js +++ b/src/components/sidebar.js @@ -1,16 +1,16 @@ import React from "react"; -import { FiXCircle } from "react-icons/fi"; +import { FiXCircle, FiChevronDown, FiChevronUp } from "react-icons/fi"; import { inject, observer } from "mobx-react"; import classnames from "classnames"; import RouteFilter from "./routeFilter"; import LineList from "./lineList"; -import { FiChevronDown, FiChevronUp } from "react-icons/fi"; import Header from "./header"; import Notes from "./notes"; import styles from "./sidebar.module.css"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import LineAlertList from "./lineAlertList"; import { runInAction } from "mobx"; +import { compareLineNameOrder } from "../utils/lineDataUtils"; class Sidebar extends React.Component { constructor() { @@ -63,20 +63,7 @@ class Sidebar extends React.Component { )}
); - const sortedLines = this.props.lines.sort((a, b) => { - const transportTypeOrder = ["tram", "bus"]; - if (a.transportType !== b.transportType) { - return transportTypeOrder.indexOf(a.transportType) > - transportTypeOrder.indexOf(b.transportType) - ? 1 - : -1; - } else if (a.lineId.substring(1, 4) !== b.lineId.substring(1, 4)) { - return a.lineId.substring(1, 4) > b.lineId.substring(1, 4) ? 1 : -1; - } else if (a.lineId.substring(0, 1) !== b.lineId.substring(0, 1)) { - return a.lineId.substring(0, 1) > b.lineId.substring(0, 1) ? 1 : -1; - } - return a.lineId.substring(4, 6) > b.lineId.substring(4, 6) ? 1 : -1; - }); + const sortedLines = this.props.lines.sort(compareLineNameOrder); const isMobile = this.props.isMobile; const mappedAlerts = this.props.alerts.map(({ lineId, alerts }) => { return { diff --git a/src/utils/lineDataUtils.js b/src/utils/lineDataUtils.js new file mode 100644 index 0000000..d252515 --- /dev/null +++ b/src/utils/lineDataUtils.js @@ -0,0 +1,28 @@ +// Util functions to handle line data. + +const parseLineNumber = (lineId) => + // Remove 1st number, which represents the city + // Remove all zeros from the beginning + lineId.substring(1).replace(/^0+/, ""); + +const parseTransportType = (line) => { + if (line.routes.nodes.length > 0) { + return line.routes.nodes[0].mode; + } + // Backup if mode not found from routes. The old hardcoded way. + if (line.lineId.substring(0, 4) >= 1001 && line.lineId.substring(0, 4) <= 1010) { + return "TRAM"; + } + return "BUS"; +}; + +const compareLineNameOrder = (a, b) => { + if (a.lineId.substring(1, 4) !== b.lineId.substring(1, 4)) { + return a.lineId.substring(1, 4) > b.lineId.substring(1, 4) ? 1 : -1; + } else if (a.lineId.substring(0, 1) !== b.lineId.substring(0, 1)) { + return a.lineId.substring(0, 1) > b.lineId.substring(0, 1) ? 1 : -1; + } + return a.lineId.substring(4, 6) > b.lineId.substring(4, 6) ? 1 : -1; +}; + +export { parseLineNumber, parseTransportType, compareLineNameOrder };