From f65f5635c24bea32036747beb5b782083d96c1d3 Mon Sep 17 00:00:00 2001 From: Simo Partinen Date: Fri, 27 Dec 2024 13:35:42 +0200 Subject: [PATCH] fix: streamlined markup and classes --- app/component/itinerary/navigator/NaviCard.js | 77 +++++---- .../itinerary/navigator/NaviCardContainer.js | 24 ++- .../itinerary/navigator/navigator.scss | 158 +++++++++--------- 3 files changed, 129 insertions(+), 130 deletions(-) diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js index 75eaac285f..e60a560729 100644 --- a/app/component/itinerary/navigator/NaviCard.js +++ b/app/component/itinerary/navigator/NaviCard.js @@ -1,13 +1,13 @@ +import PropTypes from 'prop-types'; import React from 'react'; import { FormattedMessage } from 'react-intl'; -import PropTypes from 'prop-types'; -import { legShape, configShape } from '../../../util/shapes'; -import Icon from '../../Icon'; import { isRental } from '../../../util/legUtils'; -import NaviInstructions from './NaviInstructions'; +import { getRouteMode } from '../../../util/modeUtils'; +import { configShape, legShape } from '../../../util/shapes'; +import Icon from '../../Icon'; import NaviCardExtension from './NaviCardExtension'; +import NaviInstructions from './NaviInstructions'; import { LEGTYPE } from './NaviUtils'; -import { getRouteMode } from '../../../util/modeUtils'; const iconMap = { BICYCLE: 'icon-icon_cyclist', @@ -29,46 +29,44 @@ export default function NaviCard( { leg, nextLeg, legType, cardExpanded, startTime, time, position, origin }, { config }, ) { + let mainCardContent; if (legType === LEGTYPE.PENDING) { - return ( + mainCardContent = ( ); - } - if (legType === LEGTYPE.END) { - return ; - } - if (!leg && !nextLeg) { + } else if (legType === LEGTYPE.END) { + mainCardContent = ; + } else if (!leg && !nextLeg) { return null; - } - let iconColor = 'currentColor'; - let iconName; - let instructions = ''; - if (legType === LEGTYPE.TRANSIT) { - const m = getRouteMode(leg.route, config); - iconColor = config.colors.iconColors[`mode-${m}`] || leg.route.color; - iconName = iconMap[m.toUpperCase()]; + } else { + let iconColor = 'currentColor'; + let iconName; + let instructions = ''; + if (legType === LEGTYPE.TRANSIT) { + const m = getRouteMode(leg.route, config); + iconColor = config.colors.iconColors[`mode-${m}`] || leg.route.color; + iconName = iconMap[m.toUpperCase()]; - instructions = `navileg-in-transit`; - } else if (legType !== LEGTYPE.WAIT && isRental(leg, nextLeg)) { - if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') { - instructions = `navileg-rent-scooter`; - } else { - instructions = 'rent-cycle-at'; + instructions = `navileg-in-transit`; + } else if (legType !== LEGTYPE.WAIT && isRental(leg, nextLeg)) { + if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') { + instructions = `navileg-rent-scooter`; + } else { + instructions = 'rent-cycle-at'; + } + iconName = iconMap[leg.mode]; + } else if (legType === LEGTYPE.MOVE) { + instructions = `navileg-${leg?.mode.toLowerCase()}`; + iconName = iconMap.WALK; + } else if (legType === LEGTYPE.WAIT) { + iconName = iconMap.WAIT; } - iconName = iconMap[leg.mode]; - } else if (legType === LEGTYPE.MOVE) { - instructions = `navileg-${leg?.mode.toLowerCase()}`; - iconName = iconMap.WALK; - } else if (legType === LEGTYPE.WAIT) { - iconName = iconMap.WAIT; - } - return ( -
-
+ mainCardContent = ( + <>
-
+
-
+ + ); + } + return ( +
+
{mainCardContent}
{cardExpanded && ( {activeMessages.length > 0 && ( diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss index d7db39fb0b..482711ceaa 100644 --- a/app/component/itinerary/navigator/navigator.scss +++ b/app/component/itinerary/navigator/navigator.scss @@ -61,7 +61,7 @@ $fixed-width-padding: 16px; } } -.navitop { +.navi-top-card-button { margin: 0 var(--space-s) 5px var(--space-s); border-radius: 8px; min-height: 70px; @@ -78,116 +78,114 @@ $fixed-width-padding: 16px; max-height: unset; } - .navitop-arrow { + .navi-top-card-arrow { .inverted { transform: rotate(180deg); } } - .content { + .main-card { width: 100%; + margin: var(--space-m) var(--space-l); - .navi-top-card { - margin: 16px 24px 16px; + .content { + display: flex; + flex-direction: row; + color: black; + justify-content: center; - .main-card { - display: flex; - flex-direction: row; + .mode { + width: 32px; + height: 32px; color: black; + margin-right: var(--space-s); + margin-top: var(--space-xxs); + } + } - .mode { - width: 32px; - height: 32px; - color: black; - margin-right: var(--space-s); - margin-top: var(--space-xxs); - } + .instructions { + display: flex; + flex-direction: column; + width: 100%; + font-size: $font-size-normal; + font-weight: $font-weight-medium; + + &.expanded { + margin-bottom: 0; } - .instructions { - display: flex; - flex-direction: column; - width: 100%; + .destination-header { font-size: $font-size-normal; - font-weight: $font-weight-medium; + font-weight: 500; + display: flex; + } - &.expanded { - margin-bottom: 0; - } + .vehicle-leg { + display: flex; + margin-top: var(--space-xs); + font-weight: $font-weight-book; + width: 80%; + text-align: left; + } - .destination-header { - font-size: $font-size-normal; - font-weight: 500; + .wait-leg { + display: flex; + margin-top: 3px; + flex-direction: column; + align-items: flex-start; + + .route-info { display: flex; + align-self: flex-start; + margin-bottom: var(--space-xcs); } - .vehicle-leg { - display: flex; - margin-top: var(--space-xs); + .wait-duration { font-weight: $font-weight-book; - width: 80%; - text-align: left; + margin-top: var(--space-xs); } - .wait-leg { - display: flex; - margin-top: 3px; - flex-direction: column; - align-items: flex-start; - - .route-info { - display: flex; - align-self: flex-start; - margin-bottom: var(--space-xcs); - } - - .wait-duration { - font-weight: $font-weight-book; - margin-top: var(--space-xs); - } - - .bar { - border-radius: $border-radius; - } - - .route-number { - .vcenter-children { - .vehicle-number { - color: white; - margin-top: 5px; - } + .bar { + border-radius: $border-radius; + } - display: flex; + .route-number { + .vcenter-children { + .vehicle-number { + color: white; + margin-top: 5px; } - } - .headsign { - margin-left: 10px; - font-size: $font-size-small; - font-weight: $font-weight-book; - max-width: 85%; - text-align: left; - align-content: center; + display: flex; } + } - .icon { - margin-top: 2px; - height: 25px; - width: 25px; - } + .headsign { + margin-left: 10px; + font-size: $font-size-small; + font-weight: $font-weight-book; + max-width: 85%; + text-align: left; + align-content: center; } - } - .duration { - &.fade-out { - animation: fadeOut 3s forwards; + .icon { + margin-top: 2px; + height: 25px; + width: 25px; } + } + } - font-size: $font-size-xsmall; - font-weight: $font-weight-book; - display: flex; - margin-top: 4px; + .duration { + &.fade-out { + animation: fadeOut 3s forwards; } + + font-size: $font-size-xsmall; + font-weight: $font-weight-book; + display: flex; + margin-top: 4px; } .extension {