Skip to content
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

fix: Updating the spacing on detour panel #2944

Merged
merged 8 commits into from
Jan 30, 2025
Merged

fix: Updating the spacing on detour panel #2944

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3b8b88c
firestack Jan 27, 2025
3d5c93b
firestack Jan 27, 2025
b8ce244
firestack Jan 27, 2025
4118be4
fix: changing spacing on activation panel also changes other panels
hannahpurcell Jan 28, 2025
adc2943
fix: snapshot update
hannahpurcell Jan 28, 2025
71e1668
tweak: revert edit that should be separate PR
hannahpurcell Jan 28, 2025
cc96cf2
tweak: using 0 margin more precise than just unset
hannahpurcell Jan 29, 2025
3458949
tweak: use unitless numbers for line-height
hannahpurcell Jan 29, 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
18 changes: 15 additions & 3 deletions assets/css/_diversion_page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@
display: none;
}
}

ol,
ul {
margin-top: unset;
}
hannahpurcell marked this conversation as resolved.
Show resolved Hide resolved
}

.l-diversion-page-panel {
Expand Down Expand Up @@ -156,13 +161,15 @@
font-weight: var(--font-weight-semi);
}

.c-diversion-panel__h2 {
font-size: 1.125rem; // h4 font size
.c-diversion-panel__section-header {
@include font-size($h4-font-size);
font-weight: var(--font-weight-semi);
margin: 0 0 map-get($spacers, 2) 0;
}

.c-diversion-panel__help-text {
line-height: 1.5;
margin-top: map-get($spacers, 2);
}

.c-active-detour__alert-icon {
Expand All @@ -180,11 +187,16 @@
}

// But display each `<dt/>` on it's own line
dt::before {
dl > dt::before {
content: "";
display: block;
}

div {
margin-bottom: map-get($spacers, 1);
line-height: 1.5rem;
hannahpurcell marked this conversation as resolved.
Show resolved Hide resolved
}

// Remove leading margin from `<dd/>`'s
dd {
margin: 0;
Expand Down
16 changes: 8 additions & 8 deletions assets/src/components/detours/detourPanelComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ interface ConnectionPointsProps {
export const ConnectionPoints = ({
connectionPoints: [connectionPointStart, connectionPointEnd],
}: ConnectionPointsProps) => (
<section className="pb-3">
<h2 className="c-diversion-panel__h2">Connection Points</h2>
<section className="mb-4">
<h2 className="c-diversion-panel__section-header">Connection Points</h2>
<ListGroup as="ul">
<ListGroup.Item>{connectionPointStart}</ListGroup.Item>
<ListGroup.Item>{connectionPointEnd}</ListGroup.Item>
Expand All @@ -32,8 +32,8 @@ interface MissedStopsProps {
}

export const MissedStops = ({ missedStops }: MissedStopsProps) => (
<section className="pb-3">
<h2 className="c-diversion-panel__h2">
<section className="mb-4">
<h2 className="c-diversion-panel__section-header">
Missed Stops
<Badge pill bg="missed-stop" className="ms-2 fs-4">
{missedStops.length}
Expand All @@ -60,8 +60,8 @@ export const AffectedRoute = ({
routeOrigin,
routeDirection,
}: AffectedRouteProps) => (
<section className="pb-3">
<h2 className="c-diversion-panel__h2 c-detour-panel__subheader">
<section className="mt-2">
<h2 className="c-diversion-panel__section-header c-detour-panel__subheader">
Affected route
</h2>
<div className="d-flex">
Expand All @@ -71,10 +71,10 @@ export const AffectedRoute = ({
<p className="my-0 c-diversion-panel__description">
{routeDescription}
</p>
<p className="my-0 text-muted c-diversion-panel__origin py-1">
<p className="my-1 text-muted c-diversion-panel__origin">
{routeOrigin}
</p>
<p className="my-0 small c-diversion-panel__direction py-1">
<p className="my-1 small c-diversion-panel__direction">
firestack marked this conversation as resolved.
Show resolved Hide resolved
{routeDirection}
</p>
</div>
Expand Down
42 changes: 25 additions & 17 deletions assets/src/components/detours/detourPanels/activeDetourPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,27 +99,35 @@ export const ActiveDetourPanel = ({
routeDirection={routeDirection}
/>

<dl className="l-inline-dl m-0">
<dt id={dlReasonId} className="fw-bold me-2">
Reason
</dt>
<dd aria-labelledby={dlReasonId}>{detourReason}</dd>
<dl className="l-inline-dl mt-2">
<div>
<dt id={dlReasonId} className="fw-bold me-2">
Reason
</dt>
<dd aria-labelledby={dlReasonId}>{detourReason}</dd>
</div>

<dt id={dlActiveSinceId} className="fw-bold me-2">
On detour since
</dt>
<dd aria-labelledby={dlActiveSinceId}>
{timeAgoLabelFromDate(activatedAt, currentTime)}
</dd>
<div>
<dt id={dlActiveSinceId} className="fw-bold me-2">
On detour since
</dt>
<dd aria-labelledby={dlActiveSinceId}>
{timeAgoLabelFromDate(activatedAt, currentTime)}
</dd>
</div>

<dt id={dlDurationId} className="fw-bold me-2">
Est. Duration
</dt>
<dd aria-labelledby={dlDurationId}>{detourDuration}</dd>
<div>
<dt id={dlDurationId} className="fw-bold me-2">
Est. duration
</dt>
<dd aria-labelledby={dlDurationId}>{detourDuration}</dd>
</div>
</dl>

<section className="pb-3">
<h2 className="c-diversion-panel__h2">Detour Directions</h2>
<section className="my-4">
<h2 className="c-diversion-panel__section-header">
Detour Directions
</h2>
{directions ? (
<ListGroup as="ol">
{directions.map((d) => (
Expand Down
46 changes: 24 additions & 22 deletions assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,29 +52,31 @@ export const DetourFinishedPanel = ({

{affectedRoute}

<h2 className="c-diversion-panel__h2">Directions</h2>
{/*
We need a way to let the form area take up exactly the space of its content
(to avoid double scrollbars). We used this approach:
https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas
<section className="mt-4">
<h2 className="c-diversion-panel__section-header">Directions</h2>
{/*
We need a way to let the form area take up exactly the space of its content
(to avoid double scrollbars). We used this approach:
https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas

The result is that the Form.Control has an invisible twin that helps the
wrapper grow to the appropriate size, and then the Form.Control likewise
assumes that space. All styles that affect layout must be identical
(e.g., `border`, `padding`, `margin`, `font`) between the `<Form.Control/>`
and the `.c-autosized-textarea::after` pseudo-element.
*/}
<div
className="c-autosized-textarea"
data-replicated-value={editableDirections}
>
<Form.Control
as="textarea"
value={editableDirections}
onChange={({ target: { value } }) => onChangeDetourText(value)}
data-fs-element="Detour Text"
/>
</div>
The result is that the Form.Control has an invisible twin that helps the
wrapper grow to the appropriate size, and then the Form.Control likewise
assumes that space. All styles that affect layout must be identical
(e.g., `border`, `padding`, `margin`, `font`) between the `<Form.Control/>`
and the `.c-autosized-textarea::after` pseudo-element.
*/}
<div
className="c-autosized-textarea mb-2"
data-replicated-value={editableDirections}
>
<Form.Control
as="textarea"
value={editableDirections}
onChange={({ target: { value } }) => onChangeDetourText(value)}
data-fs-element="Detour Text"
/>
</div>
</section>

{connectionPoints && (
<ConnectionPoints connectionPoints={connectionPoints} />
Expand Down
12 changes: 7 additions & 5 deletions assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,13 @@ export const DetourRouteSelectionPanel = ({

<Panel.Body className="d-flex flex-column">
<Panel.Body.ScrollArea className="d-flex flex-column">
<section className="pb-3">
<section className="my-4">
<Form
// We're doing js validation, so disable HTML validation
noValidate={true}
>
<Form.Group>
<h2 className="c-diversion-panel__h2" id={selectId}>
<h2 className="c-diversion-panel__section-header" id={selectId}>
Choose route
</h2>
<Form.Select
Expand Down Expand Up @@ -107,8 +107,10 @@ export const DetourRouteSelectionPanel = ({
</Form>
</section>

<section className="pb-3">
<h2 className="c-diversion-panel__h2">Choose direction</h2>
<section className="mb-4">
<h2 className="c-diversion-panel__section-header">
Choose direction
</h2>
{selectedRouteInfo.selectedRoute ? (
<div className="position-relative">
{selectedRouteInfo.routePatterns ? (
Expand All @@ -135,7 +137,7 @@ export const DetourRouteSelectionPanel = ({
)}
</div>
) : (
<p className="fst-italic">
<p className="fst-italic my-2">
Select a route in order to choose a direction.
</p>
)}
Expand Down
6 changes: 4 additions & 2 deletions assets/src/components/detours/detourPanels/drawDetourPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,10 @@ export const DrawDetourPanel = ({
routeDirection={routeDirection}
/>

<section className="pb-3">
<h2 className="c-diversion-panel__h2">Detour Directions</h2>
<section className="my-4">
<h2 className="c-diversion-panel__section-header">
Detour Directions
</h2>
{directions ? (
<ListGroup as="ol">
{directions.map((d) => (
Expand Down
6 changes: 4 additions & 2 deletions assets/src/components/detours/detourPanels/pastDetourPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,10 @@ export const PastDetourPanel = ({
routeDirection={routeDirection}
/>

<section className="pb-3">
<h2 className="c-diversion-panel__h2">Detour Directions</h2>
<section className="my-4">
<h2 className="c-diversion-panel__section-header">
Detour Directions
</h2>
{directions ? (
<ListGroup as="ol">
{directions.map((d) => (
Expand Down
Loading
Loading