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

Jump to bottom

fix: Pre-fare polish -- Text only resizes for bypassed stations #1946

Merged
merged 4 commits into from
Dec 20, 2023
Merged

fix: Pre-fare polish -- Text only resizes for bypassed stations #1946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0125c3e
Adjust container size for the font resizing
hannahpurcell Dec 18, 2023
9a2189b
Merge branch 'prefare-alerts' into hp/prefare-polish-text-resizing
hannahpurcell Dec 19, 2023
5f5a61e
The maxheight for text resizing is actually defined in the design
hannahpurcell Dec 19, 2023
e5839e7
Small text size updated in design to be regular font weight
hannahpurcell Dec 19, 2023
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 assets/css/v2/pre_fare/alert-banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,6 @@
padding: 86px 74px 102px 74px;
}
.alert-banner--small {
padding: 64px 65px;
padding: 52px 88px;
align-items: center;
}
1 change: 0 additions & 1 deletion assets/css/v2/pre_fare/prefare_single_screen_alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
@mixin small-text {
font-size: 35px;
line-height: 42px;
font-weight: 600;
}

.pre-fare-alert__page {
Expand Down
68 changes: 24 additions & 44 deletions assets/src/components/v2/pre_fare_single_screen_alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@ import ISAIcon from "../../../static/images/svgr_bundled/isa.svg";
import WalkingIcon from "../../../static/images/svgr_bundled/nearby.svg";
import ShuttleBusIcon from "../../../static/images/svgr_bundled/bus.svg";

const SCREEN_HEIGHT = 1720,
FOOTER_HEIGHT = 84,
BOTTOM_MARGIN = 32,
ALERT_CARD_PADDING = 120 + 32;

interface PreFareSingleScreenAlertProps {
issue: string;
location: string;
Expand All @@ -42,43 +37,44 @@ interface StandardLayoutProps {
remedy: string;
effect: string;
location: string | null;
bannerHeight: number;
disruptionDiagram?: DisruptionDiagramData;
}

// For the standard layout, issue font can be medium or large.
// If remedy is "Seek alternate route", font size is static. Otherwise, it uses the same font size as
// the issue.
// Bypassed station alerts can have resizing font based on how many stations are affected
// Other alerts have static font sizes:
// - issue font is size large
// - "Seek alternate route" remedy is medium
// - "Use shuttle bus" remedy is large
const StandardLayout: React.ComponentType<StandardLayoutProps> = ({
issue,
remedy,
effect,
location,
bannerHeight,
disruptionDiagram,
}) => {
const maxTextHeight =
SCREEN_HEIGHT -
(FOOTER_HEIGHT + BOTTOM_MARGIN + ALERT_CARD_PADDING + bannerHeight);
const maxTextHeight = 772

const { ref: contentBlockRef, size: contentTextSize } = useTextResizer({
sizes: ["medium", "large"],
maxHeight: maxTextHeight,
// the 32 is padding on the text object
maxHeight: maxTextHeight + 32,
resetDependencies: [issue, remedy],
});

return (
<div className="alert-card__content-block" ref={contentBlockRef}>
<StandardIssueSection
issue={issue}
location={location}
contentTextSize={contentTextSize}
/>
<RemedySection
effect={effect}
remedy={remedy}
contentTextSize={contentTextSize}
/>
<div className="alert-card__content-block" >
<div ref={contentBlockRef}>
<StandardIssueSection
issue={issue}
location={location}
contentTextSize={effect === "station_closure" ? contentTextSize : "large"}
Copy link
Contributor

Choose a reason for hiding this comment

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

Similar question as my other about the remedy. Removing this prop would also mean an effect prop would be needed, so not sure if there's much benefit for this one.

/>
<RemedySection
effect={effect}
remedy={remedy}
contentTextSize="large"
Copy link
Contributor

Choose a reason for hiding this comment

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

Since we know what size each remedy will use, can we remove this prop and just delegate the hardcoding to the component? Would centralize the different hardcoded values into a single component.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We do need a way of passing the text size one way or another. StandardLayout uses font size large for the remedy, and DownstreamLayout uses font size medium for this component, so the component alone can't dictate which font size it uses

Copy link
Contributor

Choose a reason for hiding this comment

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

Gotcha. Makes sense.

/>
</div>
{disruptionDiagram && (
<MapSection disruptionDiagram={disruptionDiagram} />
)}
Expand Down Expand Up @@ -166,22 +162,16 @@ interface FallbackLayoutProps {
issue: string;
remedy: string;
effect: string;
bannerHeight: number;
}

const FallbackLayout: React.ComponentType<FallbackLayoutProps> = ({
issue,
remedy,
effect,
bannerHeight,
}) => {
const maxTextHeight =
SCREEN_HEIGHT -
(FOOTER_HEIGHT + BOTTOM_MARGIN + ALERT_CARD_PADDING + bannerHeight);

const { ref: pioTextBlockRef, size: pioSecondaryTextSize } = useTextResizer({
sizes: ["small", "medium"],
maxHeight: maxTextHeight,
maxHeight: 460,
resetDependencies: [issue, remedy],
});

Expand All @@ -195,7 +185,7 @@ const FallbackLayout: React.ComponentType<FallbackLayoutProps> = ({
);

return (
<div className="alert-card__pio-text" ref={pioTextBlockRef}>
<div className="alert-card__pio-text">
{icon}
{issue && <div className="alert-card__pio-text__main-text">{issue}</div>}
{remedy && (
Expand All @@ -204,6 +194,7 @@ const FallbackLayout: React.ComponentType<FallbackLayoutProps> = ({
"alert-card__pio-text__secondary-text",
pioSecondaryTextSize
)}
ref={pioTextBlockRef}
>
{remedy}
</div>
Expand Down Expand Up @@ -350,13 +341,6 @@ const PreFareSingleScreenAlert: React.ComponentType<
disruption_diagram,
} = alert;

// If there is more than 1 route in the banner, or the 1 route is longer than "GL·B"
// the banner will be tall. Otherwise, it'll be 1-line
const bannerHeight =
routes.length > 1 || (routes[0] && routes[0].svg_name.length > 4)
? 368
: 200;

/**
* This switch statement picks the alert layout
* - fallback: icon, followed by a summary & pio text, or just the pio text
Expand All @@ -373,7 +357,6 @@ const PreFareSingleScreenAlert: React.ComponentType<
issue={issue}
remedy={remedy}
effect={effect}
bannerHeight={bannerHeight}
/>
);
break;
Expand All @@ -393,7 +376,6 @@ const PreFareSingleScreenAlert: React.ComponentType<
remedy={remedy}
effect={effect}
location={location}
bannerHeight={bannerHeight}
disruptionDiagram={disruption_diagram}
/>
);
Expand All @@ -407,7 +389,6 @@ const PreFareSingleScreenAlert: React.ComponentType<
remedy={remedy}
effect={effect}
location={location}
bannerHeight={bannerHeight}
disruptionDiagram={disruption_diagram}
/>
);
Expand All @@ -430,7 +411,6 @@ const PreFareSingleScreenAlert: React.ComponentType<
issue={issue}
remedy={remedy}
effect={effect}
bannerHeight={bannerHeight}
/>
);
}
Expand Down
Loading