Skip to content

Move map expansion button to itinerary header #1502

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alec-georgoff wants to merge 13 commits into
base: dev
Choose a base branch
from
Open

Move map expansion button to itinerary header #1502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0c51eea
Move map expansion button to itinerary header
alec-georgoff Dec 3, 2025
df4bc0c
Prevent scrolling of collapsed header button
alec-georgoff Dec 5, 2025
79f4e6a
Update to use chevron icon
alec-georgoff Dec 5, 2025
8c48f28
Add title and aria-label to button component
alec-georgoff Dec 10, 2025
b053a42
Move styles to ItinerariesHeaderContainer styled component
alec-georgoff Dec 10, 2025
9756696
Create TOGGLE_MAP_BUTTON_HEIGHT const and implement
alec-georgoff Dec 10, 2025
a62b0e9
Merge remote-tracking branch 'origin/dev' into fix-st-mobile-map
alec-georgoff Dec 10, 2025
bcab5e4
Change default zoom button position to top-left
alec-georgoff Dec 11, 2025
c8bd357
Add missing percent sign
alec-georgoff Dec 11, 2025
e096357
Update scaling and color of chevron icon
alec-georgoff Dec 11, 2025
a7b5e57
Use unicode chevron and tweak styling
alec-georgoff Dec 16, 2025
b8a3746
Update UnicodeChevron to take expanded prop
alec-georgoff Dec 19, 2025
788e13d
Update styling to accommodate different vertical screen sizes
alec-georgoff Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/components/map/default-map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -540,7 +540,7 @@ class DefaultMap extends Component<DefaultMapProps> {
{typeof getCustomMapOverlays === 'function' &&
getCustomMapOverlays(!itinerary && !pending)}
<NavigationControl
position={navigationControlPosition || 'bottom-right'}
position={navigationControlPosition || 'top-left'}
/>
</BaseMap>
</MapContainer>
Expand Down
35 changes: 10 additions & 25 deletions lib/components/mobile/batch-results-screen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
/* eslint-disable react/prop-types */
import { ArrowsAlt } from '@styled-icons/fa-solid/ArrowsAlt'
import { Button } from 'react-bootstrap'
import { connect } from 'react-redux'
import { FormattedMessage } from 'react-intl'
import { ListUl } from '@styled-icons/fa-solid/ListUl'
import { useMap } from 'react-map-gl/maplibre'
import coreUtils from '@opentripplanner/core-utils'
import React, { useEffect } from 'react'
Expand All @@ -16,7 +12,6 @@ import {
getResponsesWithErrors
} from '../../util/state'
import { getItineraryView, ItineraryView } from '../../util/ui'
import { IconWithText } from '../util/styledIcon'
import Map from '../map/map'
import NarrativeItineraries from '../narrative/narrative-itineraries'

Expand All @@ -39,19 +34,15 @@ const StyledMobileContainer = styled(MobileContainer)`
}
`

const ExpandMapButton = styled(Button)`
bottom: 10px;
left: 10px;
position: absolute;
z-index: 999999;
`

const NARRATIVE_SPLIT_TOP_PERCENT = 45
const NARRATIVE_SPLIT_TOP_PERCENT = 41
export const TOGGLE_MAP_BUTTON_HEIGHT = 6

// Styles for the results map also include prop-independent styles copied from mobile.css.
const ResultsMap = styled.div`
bottom: ${(props) =>
props.expanded ? '0' : `${100 - NARRATIVE_SPLIT_TOP_PERCENT}%`};
props.expanded
? `${TOGGLE_MAP_BUTTON_HEIGHT}%`
: `${100 - NARRATIVE_SPLIT_TOP_PERCENT}%`};
display: ${(props) => (props.visible ? 'inherit' : 'none')};
left: 0;
position: fixed;
Expand All @@ -65,7 +56,7 @@ const narrativeCss = css`
? props.expanded
? '100px'
: `${NARRATIVE_SPLIT_TOP_PERCENT}%`
: '100%'};
: `${100 - TOGGLE_MAP_BUTTON_HEIGHT}%`};
transition: top 300ms;
`

Expand Down Expand Up @@ -105,15 +96,6 @@ const BatchMobileResultsScreen = ({
<ResultsHeader />
<ResultsMap expanded={mapExpanded} visible={!itineraryExpanded}>
<Map />
<ExpandMapButton bsSize="small" onClick={toggleBatchResultsMap}>
<IconWithText Icon={mapExpanded ? ListUl : ArrowsAlt}>
{mapExpanded ? (
<FormattedMessage id="components.BatchResultsScreen.showResults" />
) : (
<FormattedMessage id="components.BatchResultsScreen.expandMap" />
)}
</IconWithText>
</ExpandMapButton>
</ResultsMap>
{hasErrorsAndNoResult ? (
<StyledResultsError
Expand All @@ -127,7 +109,10 @@ const BatchMobileResultsScreen = ({
expanded={itineraryExpanded}
visible={!mapExpanded}
>
<NarrativeItineraries />
<NarrativeItineraries
mapExpanded={mapExpanded}
onClickExpansionButton={toggleBatchResultsMap}
/>
</NarrativeContainer>
)}
</StyledMobileContainer>
Expand Down
138 changes: 99 additions & 39 deletions lib/components/narrative/narrative-itineraries-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { ComponentContext } from '../../util/contexts'
import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
import { ItinerarySortOption } from '../../util/config-types'
import { sortOptions } from '../util/sortOptions'
import { TOGGLE_MAP_BUTTON_HEIGHT } from '../mobile/batch-results-screen'
import { UnstyledButton } from '../util/unstyled-button'
import InvisibleA11yLabel from '../util/invisible-a11y-label'
import PopupTriggerText from '../app/popup-trigger-text'
Expand All @@ -19,10 +20,13 @@ import PlanFirstLastButtons from './plan-first-last-buttons'
import SaveTripButton from './save-trip-button'

const ItinerariesHeaderContainer = styled.div<{ showHeaderText: boolean }>`
align-items: flex-end;
display: flex;
flex-direction: column;
float: left;
gap: 8px;
margin-left: ${(props) => (props.showHeaderText ? 'inherit' : 'auto')};
width: 100%;
`

const SortResultsDropdown = styled(Dropdown)`
Expand All @@ -31,11 +35,18 @@ const SortResultsDropdown = styled(Dropdown)`
}
`

const UnicodeChevron = styled.div<{ expanded: boolean }>`
transform: rotate(${(props) => (props.expanded ? '270' : '90')}deg) scaleY(2)
scaleX(1.5);
`

export default function NarrativeItinerariesHeader({
customBatchUiBackground,
enabledSortModes,
itineraries,
itineraryIsExpanded,
mapExpanded,
onClickExpansionButton = undefined,
onSortChange,
onSortDirChange,
onViewAllOptions,
Expand All @@ -49,6 +60,8 @@ export default function NarrativeItinerariesHeader({
enabledSortModes: ItinerarySortOption[]
itineraries: unknown[]
itineraryIsExpanded: boolean
mapExpanded: boolean
onClickExpansionButton?: () => void
onSortChange: (type: string) => VoidFunction
onSortDirChange: () => void
onViewAllOptions: () => void
Expand Down Expand Up @@ -161,46 +174,93 @@ export default function NarrativeItinerariesHeader({
<PopupTriggerText compact popupTarget={popupTarget} />
</button>
)}
<button
className="clear-button-formatting"
onClick={onSortDirChange}
title={intl.formatMessage({
id: 'components.NarrativeItinerariesHeader.changeSortDir'
})}
>
<StyledIconWrapper
className={`${customBatchUiBackground && 'base-color-bg'}`}
{onClickExpansionButton && (
<button
Copy link
Contributor

@amy-corson-ibigroup amy-corson-ibigroup Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This button needs to have a title and an aria-label for non-sighted users. You can repurpose the i18n strings for "expand map" and "show results"

Copy link
Collaborator Author

@alec-georgoff alec-georgoff Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah thanks for looking out for that; I assume the same value is okay for title and aria-label? That's what I implemented. If not, let me know what the difference is and I can fix

Copy link
Contributor

@amy-corson-ibigroup amy-corson-ibigroup Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the same text is good for both! But I would create two variables showResultsText and expandMapText so you're not duplicating code.

aria-label={
mapExpanded
? intl.formatMessage({
id: 'components.BatchResultsScreen.showResults'
})
: intl.formatMessage({
id: 'components.BatchResultsScreen.expandMap'
})
}
className="clear-button-formatting"
onClick={onClickExpansionButton}
style={{
alignItems: 'center',
display: 'flex',
height: `${TOGGLE_MAP_BUTTON_HEIGHT}vh`,
justifyContent: 'center',
margin: '-10px 0',
width: '100%'
}}
title={
mapExpanded
? intl.formatMessage({
id: 'components.BatchResultsScreen.showResults'
})
: intl.formatMessage({
id: 'components.BatchResultsScreen.expandMap'
})
}
>
<StyledIconWrapper>
{mapExpanded ? (
<UnicodeChevron expanded={mapExpanded}>
&#10095;
</UnicodeChevron>
) : (
<UnicodeChevron expanded={mapExpanded}>
&#10095;
</UnicodeChevron>
)}
</StyledIconWrapper>
</button>
)}
<div style={{ display: 'flex' }}>
<button
className="clear-button-formatting"
onClick={onSortDirChange}
style={{ marginRight: '6px' }}
title={intl.formatMessage({
id: 'components.NarrativeItinerariesHeader.changeSortDir'
})}
>
{sort.direction.toLowerCase() === 'asc' ? (
<SortUp />
) : (
<SortDown />
)}
</StyledIconWrapper>
</button>
<SortResultsDropdown
id="sort-results"
label={sortResultsLabel}
text={sortText}
title={sortResultsLabel}
>
{sortOptionsArr.map((sortOption) => (
<li className="sort-option" key={sortOption.value}>
<UnstyledButton
aria-selected={sortText === sortOption.text || undefined}
onClick={() => onSortChange(sortOption.value)}
role="option"
>
{sortOption.text}
{sortText === sortOption.text && (
<InvisibleA11yLabel>
<FormattedMessage id="common.currentlySelected" />
</InvisibleA11yLabel>
)}
</UnstyledButton>
</li>
))}
</SortResultsDropdown>
<StyledIconWrapper
className={`${customBatchUiBackground && 'base-color-bg'}`}
>
{sort.direction.toLowerCase() === 'asc' ? (
<SortUp />
) : (
<SortDown />
)}
</StyledIconWrapper>
</button>
<SortResultsDropdown
id="sort-results"
label={sortResultsLabel}
text={sortText}
title={sortResultsLabel}
>
{sortOptionsArr.map((sortOption) => (
<li className="sort-option" key={sortOption.value}>
<UnstyledButton
aria-selected={sortText === sortOption.text || undefined}
onClick={() => onSortChange(sortOption.value)}
role="option"
>
{sortOption.text}
{sortText === sortOption.text && (
<InvisibleA11yLabel>
<FormattedMessage id="common.currentlySelected" />
</InvisibleA11yLabel>
)}
</UnstyledButton>
</li>
))}
</SortResultsDropdown>
</div>
</ItinerariesHeaderContainer>
<PlanFirstLastButtons />
</>
Expand Down
7 changes: 7 additions & 0 deletions lib/components/narrative/narrative-itineraries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,9 @@ class NarrativeItineraries extends Component {
enabledSortModes: PropTypes.object,
itineraries: PropTypes.array,
itineraryIsExpanded: PropTypes.bool,
mapExpanded: PropTypes.bool,
modes: PropTypes.object,
onClickExpansionButton: PropTypes.func,
pending: PropTypes.bool,
popupTarget: PropTypes.string,
realtimeEffects: PropTypes.object,
Expand Down Expand Up @@ -378,7 +380,9 @@ class NarrativeItineraries extends Component {
intl,
itineraries,
itineraryIsExpanded,
mapExpanded,
mergedItineraries,
onClickExpansionButton,
pending,
popupTarget,
setPopupContent,
Expand Down Expand Up @@ -425,6 +429,7 @@ class NarrativeItineraries extends Component {
className={`options itinerary ${
customBatchUiBackground && !itineraryIsExpanded && 'base-color-bg'
}`}
style={{ overflow: 'hidden' }}
>
<PageTitle
title={summarizeQuery(activeSearch.query, intl, user.savedLocations)}
Expand All @@ -435,6 +440,8 @@ class NarrativeItineraries extends Component {
itineraries={mergedItineraries}
itinerary={itinerary}
itineraryIsExpanded={itineraryIsExpanded}
mapExpanded={mapExpanded}
onClickExpansionButton={onClickExpansionButton}
onSortChange={this._onSortChange}
onSortDirChange={this._onSortDirChange}
onViewAllOptions={this._onViewAllOptions}
Expand Down
Loading