From 6a33cfee10009ec3ed22e4c6d0bca8dd1fb01f82 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Thu, 14 Nov 2024 16:22:31 +0200 Subject: [PATCH 01/12] refactor wait leg --- .../itinerary/Navigator/NaviCardContainer.js | 1 + .../itinerary/Navigator/NaviCardExtension.js | 4 +- .../itinerary/Navigator/NaviInstructions.js | 42 +++++++++++++------ .../itinerary/Navigator/navigator.scss | 28 +++++++++++++ app/translations.js | 9 ++-- 5 files changed, 66 insertions(+), 18 deletions(-) diff --git a/app/component/itinerary/Navigator/NaviCardContainer.js b/app/component/itinerary/Navigator/NaviCardContainer.js index bb39e2ccfc..e9ca733cf2 100644 --- a/app/component/itinerary/Navigator/NaviCardContainer.js +++ b/app/component/itinerary/Navigator/NaviCardContainer.js @@ -180,6 +180,7 @@ function NaviCardContainer( // Card has 4 sizes: first leg collapsed, expanded // and in transit collapsed, expanded. + // Todo: postfix fo wait leg let classPostfix = ''; if (legType === LEGTYPE.TRANSIT && cardExpanded) { classPostfix = 'expand-transit'; diff --git a/app/component/itinerary/Navigator/NaviCardExtension.js b/app/component/itinerary/Navigator/NaviCardExtension.js index 4bd9fba5e9..95dedd57c3 100644 --- a/app/component/itinerary/Navigator/NaviCardExtension.js +++ b/app/component/itinerary/Navigator/NaviCardExtension.js @@ -28,7 +28,7 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { } if (legType === LEGTYPE.TRANSIT) { - const { intermediatePlaces } = leg; + const { intermediatePlaces, headsign } = leg; const now = Date.now(); const idx = intermediatePlaces.findIndex(p => legTime(p.arrival) > now); @@ -48,7 +48,7 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { vertical withBar /> -
{leg.to.name}
+
{headsign}
); } - if (legType === LEGTYPE.WAIT) { - const { mode, headsign, route } = nextLeg; - + const { mode, headsign, route, end } = nextLeg; const color = route.color ? route.color : 'currentColor'; const localizedMode = intl.formatMessage({ - id: `${mode.toLowerCase()}`, + id: `to-${mode.toLowerCase()}`, defaultMessage: `${mode}`, }); + const t = legTime(end); + const remainingDuration = Math.ceil((t - Date.now()) / 60000); // ms to minutes + const rt = nextLeg.realtimeState === 'UPDATED'; + const values = { + duration: ( + {remainingDuration} + ), + legTime: {legTimeStr(end)}, + }; return ( <>
- -
{headsign}
+
+ +
{headsign}
+
+
+ +
); diff --git a/app/component/itinerary/Navigator/navigator.scss b/app/component/itinerary/Navigator/navigator.scss index 759879fc14..e49fe2abf6 100644 --- a/app/component/itinerary/Navigator/navigator.scss +++ b/app/component/itinerary/Navigator/navigator.scss @@ -120,12 +120,40 @@ display: flex; align-items: center; margin-top: 3px; + flex-direction: column; + align-self: flex-start; + + .route-info { + display: flex; + align-self: flex-start; + } + + .routeinfo { + display: flex; + margin-top: var(--space-xs); + font-weight: $font-weight-book; + text-align: left; + } + + .route-number { + min-width: 55px; + + .vcenter-children { + .vehicle-number { + color: white; + margin-top: 4px; + } + + display: flex; + } + } .headsign { margin-left: 10px; font-size: $font-size-small; font-weight: $font-weight-book; max-width: 120px; + margin-top: 6px; } .icon { diff --git a/app/translations.js b/app/translations.js index 7a06f86353..56ba592ba4 100644 --- a/app/translations.js +++ b/app/translations.js @@ -1312,7 +1312,7 @@ const translations = { 'navigation-start': 'Start journey', 'navigation-ticket': 'Ticket', 'navigation-wait': 'Wait at the stop', - 'navigation-wait-mode': 'Odota {mode}a', + 'navigation-wait-mode': 'Nouse {mode}', 'navileg-bicycle': 'Cycle to', 'navileg-car': 'Drive to', 'navileg-from-station': 'asemalla', @@ -1683,6 +1683,7 @@ const translations = { 'to-ferry': 'ferry', 'to-frontpage': 'To the front page', 'to-rail': 'train', + 'to-speedtram': 'TODO_pikaraitiovaunuun', 'to-subway': 'subway', 'to-tram': 'tram', today: 'Today', @@ -2570,7 +2571,7 @@ const translations = { 'navigation-start': 'Matkalle', 'navigation-ticket': 'Lippu', 'navigation-wait': 'Odota pysäkillä', - 'navigation-wait-mode': 'Odota {mode}a', + 'navigation-wait-mode': 'Nouse {mode}', 'navileg-bicycle': 'Pyöräile', 'navileg-car': 'Aja', 'navileg-from-station': 'asemalla', @@ -2940,6 +2941,7 @@ const translations = { 'to-ferry': 'lauttaan', 'to-frontpage': 'Etusivulle', 'to-rail': 'junaan', + 'to-speedtram': 'TODO_pikaraitiovaunuun', 'to-subway': 'metroon', 'to-tram': 'raitiovaunuun', today: 'Tänään', @@ -5479,7 +5481,7 @@ const translations = { 'navigation-start': 'På resa', 'navigation-ticket': 'Biljett', 'navigation-wait': 'Vänta på hållplatsen', - 'navigation-wait-mode': 'Odota {mode}a', + 'navigation-wait-mode': 'Odota {mode}', 'navileg-bicycle': 'Cycla till', 'navileg-car': 'Kör till', 'navileg-from-station': 'TODO_asemalla', @@ -5852,6 +5854,7 @@ const translations = { 'to-ferry': 'färjan', 'to-frontpage': 'Till startsidan', 'to-rail': 'tåget', + 'to-speedtram': 'TODO_pikaraitiovaunuun', 'to-subway': 'metron', 'to-tram': 'spårvagnen', today: 'I dag', From fd9a40e630d3a5e87cce4fd9cf7e2402b6a7e81b Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Fri, 15 Nov 2024 14:48:16 +0200 Subject: [PATCH 02/12] wait leg appears if there is waiting on the itinerary --- app/component/itinerary/Navigator/NaviCard.js | 13 ++++++---- .../itinerary/Navigator/NaviCardContainer.js | 25 ++++++++++--------- .../itinerary/Navigator/NaviCardExtension.js | 20 ++++++++++----- .../itinerary/Navigator/NaviInstructions.js | 8 +++--- .../itinerary/Navigator/NaviUtils.js | 13 ++++++---- 5 files changed, 47 insertions(+), 32 deletions(-) diff --git a/app/component/itinerary/Navigator/NaviCard.js b/app/component/itinerary/Navigator/NaviCard.js index b0c02dfb36..1c13d9fa2e 100644 --- a/app/component/itinerary/Navigator/NaviCard.js +++ b/app/component/itinerary/Navigator/NaviCard.js @@ -22,14 +22,14 @@ const iconMap = { export default function NaviCard({ leg, nextLeg, legType, cardExpanded }) { const iconName = legType === LEGTYPE.WAIT ? iconMap.WAIT : iconMap[leg.mode]; - let instructions = `navileg-${leg.mode.toLowerCase()}`; + let instructions = `navileg-${leg?.mode.toLowerCase()}`; if (legType === LEGTYPE.TRANSIT) { instructions = `navileg-in-transit`; - } else if (isRental(leg, nextLeg)) { + } else if (legType !== LEGTYPE.WAIT && isRental(leg, nextLeg)) { if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') { instructions = `navileg-rent-scooter`; } else { - instructions = `navileg-rent-cycle`; + instructions = 'rent-cycle-at'; } } return ( @@ -51,18 +51,21 @@ export default function NaviCard({ leg, nextLeg, legType, cardExpanded }) {
- {cardExpanded && } + {cardExpanded && ( + + )} ); } NaviCard.propTypes = { - leg: legShape.isRequired, + leg: legShape, nextLeg: legShape, legType: PropTypes.string.isRequired, cardExpanded: PropTypes.bool, }; NaviCard.defaultProps = { cardExpanded: false, + leg: undefined, nextLeg: undefined, }; diff --git a/app/component/itinerary/Navigator/NaviCardContainer.js b/app/component/itinerary/Navigator/NaviCardContainer.js index e9ca733cf2..2158daab6c 100644 --- a/app/component/itinerary/Navigator/NaviCardContainer.js +++ b/app/component/itinerary/Navigator/NaviCardContainer.js @@ -144,6 +144,10 @@ function NaviCardContainer( const { first, last } = getFirstLastLegs(realTimeLegs); let legType; let naviTopContent; + const t = currentLeg ? legTime(currentLeg.start) : time; + const nextLeg = realTimeLegs.find(leg => { + return legTime(leg.start) > t; + }); if (time < legTime(first.start)) { naviTopContent = ( ); } else if (currentLeg) { - const nextLeg = realTimeLegs.find(leg => { - return legTime(leg.start) > legTime(currentLeg.start); - }); if (!currentLeg.transitLeg) { if (destCountRef.current >= TIME_AT_DESTINATION) { legType = LEGTYPE.WAIT; @@ -164,19 +165,19 @@ function NaviCardContainer( } else { legType = LEGTYPE.TRANSIT; } - naviTopContent = ( - - ); } else if (time > legTime(last.end)) { naviTopContent = ; } else { - naviTopContent = ; + legType = LEGTYPE.WAIT; } + naviTopContent = ( + + ); // Card has 4 sizes: first leg collapsed, expanded // and in transit collapsed, expanded. diff --git a/app/component/itinerary/Navigator/NaviCardExtension.js b/app/component/itinerary/Navigator/NaviCardExtension.js index 95dedd57c3..b7de5da3a5 100644 --- a/app/component/itinerary/Navigator/NaviCardExtension.js +++ b/app/component/itinerary/Navigator/NaviCardExtension.js @@ -12,15 +12,21 @@ import { getDestinationProperties, LEGTYPE } from './NaviUtils'; import RouteNumberContainer from '../../RouteNumberContainer'; -const NaviCardExtension = ({ legType, leg }, { config }) => { - const { stop, name } = leg.to; +const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => { + const { stop, name, rentalVehicle, vehicleParking, vehicleRentalStation } = + leg ? leg.to : nextLeg.from; const { code, platformCode, zoneId, vehicleMode } = stop || {}; const [place, address] = name?.split(/, (.+)/) || []; let destination = {}; if (stop) { - destination = getDestinationProperties(leg, stop, config); - destination.name = stop.name; + destination = getDestinationProperties( + rentalVehicle, + vehicleParking, + vehicleRentalStation, + stop, + config, + ); } else { destination.iconId = 'icon-icon_mapMarker-to'; destination.className = 'place'; @@ -60,7 +66,6 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { ); } - return (
@@ -98,12 +103,15 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { }; NaviCardExtension.propTypes = { - leg: legShape.isRequired, + leg: legShape, + nextLeg: legShape, legType: PropTypes.string, }; NaviCardExtension.defaultProps = { legType: '', + leg: undefined, + nextLeg: undefined, }; NaviCardExtension.contextTypes = { diff --git a/app/component/itinerary/Navigator/NaviInstructions.js b/app/component/itinerary/Navigator/NaviInstructions.js index 3e87e6ffbf..704bd4548e 100644 --- a/app/component/itinerary/Navigator/NaviInstructions.js +++ b/app/component/itinerary/Navigator/NaviInstructions.js @@ -13,7 +13,6 @@ export default function NaviInstructions( { leg, nextLeg, instructions, legType }, { intl, config }, ) { - const { distance, duration } = leg; const [fadeOut, setFadeOut] = useState(false); useEffect(() => { @@ -27,6 +26,7 @@ export default function NaviInstructions( }, [leg]); if (legType === LEGTYPE.MOVE) { + const { distance, duration } = leg; return ( <>
@@ -44,13 +44,13 @@ export default function NaviInstructions( ); } if (legType === LEGTYPE.WAIT) { - const { mode, headsign, route, end } = nextLeg; - const color = route.color ? route.color : 'currentColor'; + const { mode, headsign, route, end, start } = nextLeg; + const color = route?.color ? route.color : 'currentColor'; const localizedMode = intl.formatMessage({ id: `to-${mode.toLowerCase()}`, defaultMessage: `${mode}`, }); - const t = legTime(end); + const t = leg ? legTime(end) : legTime(start); const remainingDuration = Math.ceil((t - Date.now()) / 60000); // ms to minutes const rt = nextLeg.realtimeState === 'UPDATED'; const values = { diff --git a/app/component/itinerary/Navigator/NaviUtils.js b/app/component/itinerary/Navigator/NaviUtils.js index cb3eff2831..6dc20a7998 100644 --- a/app/component/itinerary/Navigator/NaviUtils.js +++ b/app/component/itinerary/Navigator/NaviUtils.js @@ -174,13 +174,16 @@ export const getItineraryAlerts = (realTimeLegs, intl, messages) => { * Get the properties of the destination based on the leg. * */ -export const getDestinationProperties = (leg, stop, config) => { - const { rentalVehicle, vehicleParking, vehicleRentalStation } = leg.to; - const { vehicleMode, routes } = stop; - +export const getDestinationProperties = ( + rentalVehicle, + vehicleParking, + vehicleRentalStation, + stop, + config, +) => { + const { routes, vehicleMode } = stop; let destination = {}; let mode = vehicleMode; - if (routes && vehicleMode === 'BUS' && config.useExtendedRouteTypes) { if (routes.some(p => p.type === ExtendedRouteTypes.BusExpress)) { mode = 'bus-express'; From a885be2cc16f2ee95ad424aae07e90934cb2e43e Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Mon, 18 Nov 2024 12:57:00 +0200 Subject: [PATCH 03/12] add styles for waiting mode. resiliency for headsign, stack position for wait mode --- .../itinerary/Navigator/NaviCardContainer.js | 4 +++ .../itinerary/Navigator/NaviCardExtension.js | 5 ++-- .../itinerary/Navigator/NaviInstructions.js | 5 ++-- .../itinerary/Navigator/navigator.scss | 29 +++++++++++++------ 4 files changed, 30 insertions(+), 13 deletions(-) diff --git a/app/component/itinerary/Navigator/NaviCardContainer.js b/app/component/itinerary/Navigator/NaviCardContainer.js index 2158daab6c..d79a0ba5fe 100644 --- a/app/component/itinerary/Navigator/NaviCardContainer.js +++ b/app/component/itinerary/Navigator/NaviCardContainer.js @@ -187,6 +187,10 @@ function NaviCardContainer( classPostfix = 'expand-transit'; } else if (legType === LEGTYPE.TRANSIT) { classPostfix = 'transit'; + } else if (legType === LEGTYPE.WAIT && cardExpanded) { + classPostfix = 'expand-wait'; + } else if (legType === LEGTYPE.WAIT) { + classPostfix = 'wait'; } else if (cardExpanded) { classPostfix = 'expanded'; } diff --git a/app/component/itinerary/Navigator/NaviCardExtension.js b/app/component/itinerary/Navigator/NaviCardExtension.js index b7de5da3a5..1062a2f94f 100644 --- a/app/component/itinerary/Navigator/NaviCardExtension.js +++ b/app/component/itinerary/Navigator/NaviCardExtension.js @@ -34,7 +34,8 @@ const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => { } if (legType === LEGTYPE.TRANSIT) { - const { intermediatePlaces, headsign } = leg; + const { intermediatePlaces, headsign, trip } = leg; + const hs = headsign || trip?.tripHeadsign; const now = Date.now(); const idx = intermediatePlaces.findIndex(p => legTime(p.arrival) > now); @@ -54,7 +55,7 @@ const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => { vertical withBar /> -
{headsign}
+
{hs}
-
{headsign}
+
{hs}
-
+
Date: Mon, 18 Nov 2024 14:47:36 +0200 Subject: [PATCH 04/12] broaden the top card as designed, new navi expand icon --- .../itinerary/Navigator/NaviInstructions.js | 3 ++ .../itinerary/Navigator/navigator.scss | 29 ++++++++++--------- static/assets/svg-sprite.default.svg | 6 ++-- static/assets/svg-sprite.hsl.svg | 6 ++-- 4 files changed, 26 insertions(+), 18 deletions(-) diff --git a/app/component/itinerary/Navigator/NaviInstructions.js b/app/component/itinerary/Navigator/NaviInstructions.js index a49d248f11..6b08558d36 100644 --- a/app/component/itinerary/Navigator/NaviInstructions.js +++ b/app/component/itinerary/Navigator/NaviInstructions.js @@ -13,6 +13,9 @@ export default function NaviInstructions( { leg, nextLeg, instructions, legType }, { intl, config }, ) { + if (!leg && !nextLeg) { + return null; + } const [fadeOut, setFadeOut] = useState(false); useEffect(() => { diff --git a/app/component/itinerary/Navigator/navigator.scss b/app/component/itinerary/Navigator/navigator.scss index 1e2f95b423..808910abe0 100644 --- a/app/component/itinerary/Navigator/navigator.scss +++ b/app/component/itinerary/Navigator/navigator.scss @@ -75,11 +75,12 @@ width: 100%; .navi-top-card { + margin: 16px 24px 16px; + .main-card { display: flex; flex-direction: row; color: black; - margin: var(--space-s) var(--space-m) 0; .mode { width: var(--space-l); @@ -104,7 +105,7 @@ .destination-header { font-size: $font-size-normal; - font-weight: 500; // $font-weight-medium; + font-weight: 500; display: flex; } @@ -142,7 +143,7 @@ .vcenter-children { .vehicle-number { color: white; - margin-top: 4px; + margin-top: 5px; } display: flex; @@ -184,14 +185,14 @@ .extension-divider { border: 1px solid #ddd; width: 75%; - margin-left: 50px; + margin-left: 35px; margin-top: var(--space-s); margin-bottom: var(--space-s); } .stop-count { display: flex; - margin-left: 48px; + margin-left: 35px; font-weight: $font-weight-book; } @@ -199,7 +200,7 @@ display: flex; flex-direction: row; font-weight: $font-weight-book; - margin-left: 48px; + margin-left: 35px; margin-bottom: var(--space-s); text-align: left; @@ -211,7 +212,7 @@ .vcenter-children { .vehicle-number { color: white; - margin-top: 4px; + margin-top: 5px; } display: flex; @@ -237,7 +238,7 @@ .extension-walk { display: flex; - margin-left: var(--space-xxl); + margin-left: var(--space-xl); margin-bottom: var(--space-s); margin-top: var(--space-xs); } @@ -364,7 +365,7 @@ height: 69px; margin-left: 5%; width: 90%; - top: 155px; + top: 160px; div:first-child { margin-top: 0; @@ -375,23 +376,23 @@ } &.expanded { - top: 190px; + top: 205px; } &.expand-transit { - top: 235px; + top: 250px; } &.transit { - top: 162px; + top: 158px; } &.wait { - top: 172px; + top: 200px; } &.expand-wait { - top: 225px; + top: 245px; } &.slide-out { diff --git a/static/assets/svg-sprite.default.svg b/static/assets/svg-sprite.default.svg index 9ffdc699a9..eb90ad78d7 100644 --- a/static/assets/svg-sprite.default.svg +++ b/static/assets/svg-sprite.default.svg @@ -2847,8 +2847,10 @@ - - + + + + diff --git a/static/assets/svg-sprite.hsl.svg b/static/assets/svg-sprite.hsl.svg index 6be1983b93..44ccd31144 100644 --- a/static/assets/svg-sprite.hsl.svg +++ b/static/assets/svg-sprite.hsl.svg @@ -2792,7 +2792,9 @@ - - + + + + From 5036058dafd86a401659cb769b51568ab0cd223b Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Tue, 19 Nov 2024 10:22:29 +0200 Subject: [PATCH 05/12] Move navitopContent to navicard --- app/component/itinerary/Navigator/NaviCard.js | 23 +++++++++++- .../itinerary/Navigator/NaviCardContainer.js | 36 ++++++++----------- .../itinerary/Navigator/NaviUtils.js | 2 ++ .../itinerary/Navigator/navigator.scss | 3 +- 4 files changed, 40 insertions(+), 24 deletions(-) diff --git a/app/component/itinerary/Navigator/NaviCard.js b/app/component/itinerary/Navigator/NaviCard.js index 1c13d9fa2e..d20a37c9fc 100644 --- a/app/component/itinerary/Navigator/NaviCard.js +++ b/app/component/itinerary/Navigator/NaviCard.js @@ -1,4 +1,5 @@ import React from 'react'; +import { FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; import { legShape } from '../../../util/shapes'; import Icon from '../../Icon'; @@ -20,8 +21,26 @@ const iconMap = { FERRY: 'icon-icon_ferry', }; -export default function NaviCard({ leg, nextLeg, legType, cardExpanded }) { +export default function NaviCard({ + leg, + nextLeg, + legType, + cardExpanded, + startTime, +}) { + if (legType === LEGTYPE.PENDING) { + return ( + + ); + } + if (legType === LEGTYPE.END) { + return ; + } const iconName = legType === LEGTYPE.WAIT ? iconMap.WAIT : iconMap[leg.mode]; + let instructions = `navileg-${leg?.mode.toLowerCase()}`; if (legType === LEGTYPE.TRANSIT) { instructions = `navileg-in-transit`; @@ -63,9 +82,11 @@ NaviCard.propTypes = { nextLeg: legShape, legType: PropTypes.string.isRequired, cardExpanded: PropTypes.bool, + startTime: PropTypes.string, }; NaviCard.defaultProps = { cardExpanded: false, leg: undefined, nextLeg: undefined, + startTime: '', }; diff --git a/app/component/itinerary/Navigator/NaviCardContainer.js b/app/component/itinerary/Navigator/NaviCardContainer.js index d79a0ba5fe..3b49f02b13 100644 --- a/app/component/itinerary/Navigator/NaviCardContainer.js +++ b/app/component/itinerary/Navigator/NaviCardContainer.js @@ -1,6 +1,6 @@ import React, { useEffect, useState, useRef } from 'react'; import PropTypes from 'prop-types'; -import { FormattedMessage, intlShape } from 'react-intl'; +import { intlShape } from 'react-intl'; import distance from '@digitransit-search-util/digitransit-search-util-distance'; import { legShape, configShape } from '../../../util/shapes'; import { legTime, legTimeStr } from '../../../util/legUtils'; @@ -143,18 +143,12 @@ function NaviCardContainer( const { first, last } = getFirstLastLegs(realTimeLegs); let legType; - let naviTopContent; const t = currentLeg ? legTime(currentLeg.start) : time; const nextLeg = realTimeLegs.find(leg => { return legTime(leg.start) > t; }); if (time < legTime(first.start)) { - naviTopContent = ( - - ); + legType = LEGTYPE.PENDING; } else if (currentLeg) { if (!currentLeg.transitLeg) { if (destCountRef.current >= TIME_AT_DESTINATION) { @@ -166,22 +160,14 @@ function NaviCardContainer( legType = LEGTYPE.TRANSIT; } } else if (time > legTime(last.end)) { - naviTopContent = ; + legType = LEGTYPE.END; } else { legType = LEGTYPE.WAIT; } - naviTopContent = ( - - ); - // Card has 4 sizes: first leg collapsed, expanded - // and in transit collapsed, expanded. - // Todo: postfix fo wait leg + // Card has 6 sizes: first leg collapsed, expanded + // in transit collapsed, expanded. + // Wait leg collapsed, expanded. let classPostfix = ''; if (legType === LEGTYPE.TRANSIT && cardExpanded) { classPostfix = 'expand-transit'; @@ -205,7 +191,15 @@ function NaviCardContainer( className={`navitop ${cardExpanded ? 'expanded' : ''}`} onClick={handleClick} > -
{naviTopContent}
+
+ +
{activeMessages.length > 0 && ( Date: Tue, 19 Nov 2024 14:19:01 +0200 Subject: [PATCH 06/12] calculate navistack top position instead of using classnames --- .../itinerary/Navigator/NaviCardContainer.js | 37 ++++++++----------- .../itinerary/Navigator/NaviStack.js | 8 ++-- .../itinerary/Navigator/navigator.scss | 20 ---------- 3 files changed, 20 insertions(+), 45 deletions(-) diff --git a/app/component/itinerary/Navigator/NaviCardContainer.js b/app/component/itinerary/Navigator/NaviCardContainer.js index 3b49f02b13..3a1e1bf4d8 100644 --- a/app/component/itinerary/Navigator/NaviCardContainer.js +++ b/app/component/itinerary/Navigator/NaviCardContainer.js @@ -35,11 +35,25 @@ function NaviCardContainer( const focusRef = useRef(false); // Destination counter. How long user has been at the destination. * 10 seconds const destCountRef = useRef(0); + const [topPosition, setTopPosition] = useState(0); + const cardRef = useRef(null); + + const handleRemove = index => { + setActiveMessages(activeMessages.filter((_, i) => i !== index)); + }; const handleClick = () => { setCardExpanded(!cardExpanded); }; + useEffect(() => { + if (cardRef.current) { + const contentHeight = cardRef.current.clientHeight; + // Navistack top position depending on main card height. + setTopPosition(contentHeight + 86); + } + }, [currentLeg, cardExpanded]); + useEffect(() => { const newLeg = realTimeLegs.find(leg => { return legTime(leg.start) <= time && time <= legTime(leg.end); @@ -165,25 +179,6 @@ function NaviCardContainer( legType = LEGTYPE.WAIT; } - // Card has 6 sizes: first leg collapsed, expanded - // in transit collapsed, expanded. - // Wait leg collapsed, expanded. - let classPostfix = ''; - if (legType === LEGTYPE.TRANSIT && cardExpanded) { - classPostfix = 'expand-transit'; - } else if (legType === LEGTYPE.TRANSIT) { - classPostfix = 'transit'; - } else if (legType === LEGTYPE.WAIT && cardExpanded) { - classPostfix = 'expand-wait'; - } else if (legType === LEGTYPE.WAIT) { - classPostfix = 'wait'; - } else if (cardExpanded) { - classPostfix = 'expanded'; - } - const handleRemove = index => { - setActiveMessages(activeMessages.filter((_, i) => i !== index)); - }; - return ( <>