From 0125c3ee30569cbc015606a871bbebcff6a56f2c Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Mon, 18 Dec 2023 17:34:42 -0500 Subject: [PATCH 1/3] Adjust container size for the font resizing --- assets/css/v2/pre_fare/alert-banner.scss | 2 +- .../components/v2/pre_fare_single_screen_alert.tsx | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/assets/css/v2/pre_fare/alert-banner.scss b/assets/css/v2/pre_fare/alert-banner.scss index 6c7b48199..ad3cacca9 100644 --- a/assets/css/v2/pre_fare/alert-banner.scss +++ b/assets/css/v2/pre_fare/alert-banner.scss @@ -51,6 +51,6 @@ padding: 86px 74px 102px 74px; } .alert-banner--small { - padding: 64px 65px; + padding: 52px 88px; align-items: center; } diff --git a/assets/src/components/v2/pre_fare_single_screen_alert.tsx b/assets/src/components/v2/pre_fare_single_screen_alert.tsx index 8f2fc905e..2a3de77cb 100644 --- a/assets/src/components/v2/pre_fare_single_screen_alert.tsx +++ b/assets/src/components/v2/pre_fare_single_screen_alert.tsx @@ -14,9 +14,15 @@ import WalkingIcon from "../../../static/images/svgr_bundled/nearby.svg"; import ShuttleBusIcon from "../../../static/images/svgr_bundled/bus.svg"; const SCREEN_HEIGHT = 1720, + // The footer has effect type and updated time FOOTER_HEIGHT = 84, - BOTTOM_MARGIN = 32, - ALERT_CARD_PADDING = 120 + 32; + // Color margin at the very edge of the alert + BOTTOM_MARGIN = 32 + +const getBannerPadding = (effect: string) => { + if (effect === "shuttle") return 80 + else return 120 +} interface PreFareSingleScreenAlertProps { issue: string; @@ -59,7 +65,7 @@ const StandardLayout: React.ComponentType = ({ }) => { const maxTextHeight = SCREEN_HEIGHT - - (FOOTER_HEIGHT + BOTTOM_MARGIN + ALERT_CARD_PADDING + bannerHeight); + (FOOTER_HEIGHT + BOTTOM_MARGIN + getBannerPadding(effect) + bannerHeight); const { ref: contentBlockRef, size: contentTextSize } = useTextResizer({ sizes: ["medium", "large"], @@ -177,7 +183,7 @@ const FallbackLayout: React.ComponentType = ({ }) => { const maxTextHeight = SCREEN_HEIGHT - - (FOOTER_HEIGHT + BOTTOM_MARGIN + ALERT_CARD_PADDING + bannerHeight); + (FOOTER_HEIGHT + BOTTOM_MARGIN + getBannerPadding(effect) + bannerHeight); const { ref: pioTextBlockRef, size: pioSecondaryTextSize } = useTextResizer({ sizes: ["small", "medium"], From 5f5a61eb1dc2b6b7cd464ffa19ee8b896cb9196d Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Tue, 19 Dec 2023 15:33:00 -0500 Subject: [PATCH 2/3] The maxheight for text resizing is actually defined in the design --- .../v2/pre_fare_single_screen_alert.tsx | 74 ++++++------------- 1 file changed, 24 insertions(+), 50 deletions(-) diff --git a/assets/src/components/v2/pre_fare_single_screen_alert.tsx b/assets/src/components/v2/pre_fare_single_screen_alert.tsx index 2a3de77cb..d30da4814 100644 --- a/assets/src/components/v2/pre_fare_single_screen_alert.tsx +++ b/assets/src/components/v2/pre_fare_single_screen_alert.tsx @@ -13,17 +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, - // The footer has effect type and updated time - FOOTER_HEIGHT = 84, - // Color margin at the very edge of the alert - BOTTOM_MARGIN = 32 - -const getBannerPadding = (effect: string) => { - if (effect === "shuttle") return 80 - else return 120 -} - interface PreFareSingleScreenAlertProps { issue: string; location: string; @@ -48,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 = ({ issue, remedy, effect, location, - bannerHeight, disruptionDiagram, }) => { - const maxTextHeight = - SCREEN_HEIGHT - - (FOOTER_HEIGHT + BOTTOM_MARGIN + getBannerPadding(effect) + 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 ( -
- - +
+
+ + +
{disruptionDiagram && ( )} @@ -172,22 +162,16 @@ interface FallbackLayoutProps { issue: string; remedy: string; effect: string; - bannerHeight: number; } const FallbackLayout: React.ComponentType = ({ issue, remedy, effect, - bannerHeight, }) => { - const maxTextHeight = - SCREEN_HEIGHT - - (FOOTER_HEIGHT + BOTTOM_MARGIN + getBannerPadding(effect) + bannerHeight); - const { ref: pioTextBlockRef, size: pioSecondaryTextSize } = useTextResizer({ sizes: ["small", "medium"], - maxHeight: maxTextHeight, + maxHeight: 460, resetDependencies: [issue, remedy], }); @@ -201,7 +185,7 @@ const FallbackLayout: React.ComponentType = ({ ); return ( -
+
{icon} {issue &&
{issue}
} {remedy && ( @@ -210,6 +194,7 @@ const FallbackLayout: React.ComponentType = ({ "alert-card__pio-text__secondary-text", pioSecondaryTextSize )} + ref={pioTextBlockRef} > {remedy}
@@ -356,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 @@ -379,7 +357,6 @@ const PreFareSingleScreenAlert: React.ComponentType< issue={issue} remedy={remedy} effect={effect} - bannerHeight={bannerHeight} /> ); break; @@ -399,7 +376,6 @@ const PreFareSingleScreenAlert: React.ComponentType< remedy={remedy} effect={effect} location={location} - bannerHeight={bannerHeight} disruptionDiagram={disruption_diagram} /> ); @@ -413,7 +389,6 @@ const PreFareSingleScreenAlert: React.ComponentType< remedy={remedy} effect={effect} location={location} - bannerHeight={bannerHeight} disruptionDiagram={disruption_diagram} /> ); @@ -436,7 +411,6 @@ const PreFareSingleScreenAlert: React.ComponentType< issue={issue} remedy={remedy} effect={effect} - bannerHeight={bannerHeight} /> ); } From e5839e7993836bcd49bfe400cced591d3c885732 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Tue, 19 Dec 2023 15:33:19 -0500 Subject: [PATCH 3/3] Small text size updated in design to be regular font weight --- assets/css/v2/pre_fare/prefare_single_screen_alert.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/css/v2/pre_fare/prefare_single_screen_alert.scss b/assets/css/v2/pre_fare/prefare_single_screen_alert.scss index 279b925ee..d0daa58f1 100644 --- a/assets/css/v2/pre_fare/prefare_single_screen_alert.scss +++ b/assets/css/v2/pre_fare/prefare_single_screen_alert.scss @@ -7,7 +7,6 @@ @mixin small-text { font-size: 35px; line-height: 42px; - font-weight: 600; } .pre-fare-alert__page {