From 286c5698b838090a21140738cdf592e62851faf5 Mon Sep 17 00:00:00 2001 From: Kim Date: Thu, 30 Jan 2025 16:00:00 -0500 Subject: [PATCH 1/7] Fix row heights and truncate wrapping text when multiple closures at single station --- .../v2/elevator/elevator_closures_list.scss | 20 ++++++++++++++- .../v2/elevator/elevator_closures_list.tsx | 25 +++++++++++-------- 2 files changed, 34 insertions(+), 11 deletions(-) diff --git a/assets/css/v2/elevator/elevator_closures_list.scss b/assets/css/v2/elevator/elevator_closures_list.scss index 64d1611a1..22f01eb28 100644 --- a/assets/css/v2/elevator/elevator_closures_list.scss +++ b/assets/css/v2/elevator/elevator_closures_list.scss @@ -50,12 +50,13 @@ .closure-list { display: flex; flex-flow: column wrap; - height: 904px; + height: 1000px; transform: translateX(calc(-100% * var(--closure-list-offset))); .closure-row { position: relative; width: 1080px; + height: 333px; padding: 26px 48px 24px; &:not(.current-station) { @@ -84,6 +85,10 @@ background-color: $warm-neutral-85; } + &.large { + height: auto; + } + &__station-name { font-size: 62px; font-weight: 600; @@ -116,6 +121,10 @@ } } + &__elevator-name-container { + margin-bottom: 3px; + } + &__elevator-name { font-weight: 500; } @@ -124,10 +133,19 @@ display: list-item; margin-bottom: 8px; margin-left: 48px; + font-size: 48px; + line-height: 62px; + list-style-position: inside; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc(100% - 96px); } &__summary.important { font-weight: 700; + font-size: 48px; + line-height: 62px; } } } diff --git a/assets/src/components/v2/elevator/elevator_closures_list.tsx b/assets/src/components/v2/elevator/elevator_closures_list.tsx index a6d7887ee..59de82081 100644 --- a/assets/src/components/v2/elevator/elevator_closures_list.tsx +++ b/assets/src/components/v2/elevator/elevator_closures_list.tsx @@ -31,6 +31,7 @@ const ClosureRow = ({ className={cx("closure-row", { "current-station": isCurrentStation, "first-row-on-page": isFirstRowOnPage, + large: closures.length > 2, })} >
@@ -46,16 +47,20 @@ const ClosureRow = ({ )}
- {closures.map((closure) => ( -
1, - })} - > - {closure.name} ({closure.id}) -
- ))} +
+ {closures.map((closure) => { + return ( +
1, + })} + > + {closure.name} ({closure.id}) +
+ ); + })} +
{summary ?? "Accessible route available"} From 8b772fcf935b20216bbd4de2a39573fcba69766a Mon Sep 17 00:00:00 2001 From: Kim Date: Thu, 30 Jan 2025 16:45:43 -0500 Subject: [PATCH 2/7] frontend styling check --- assets/css/v2/elevator/closures.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/css/v2/elevator/closures.scss b/assets/css/v2/elevator/closures.scss index 139da3f01..4587bd83a 100644 --- a/assets/css/v2/elevator/closures.scss +++ b/assets/css/v2/elevator/closures.scss @@ -131,20 +131,20 @@ &__elevator-name.list-item { display: list-item; + max-width: calc(100% - 96px); margin-bottom: 8px; margin-left: 48px; + overflow: hidden; font-size: 48px; line-height: 62px; - list-style-position: inside; - white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; - max-width: calc(100% - 96px); + white-space: nowrap; + list-style-position: inside; } &__summary.important { - font-weight: 700; font-size: 48px; + font-weight: 700; line-height: 62px; } } From 344720f752f2d87a1829872206bdb8cd7ee5a921 Mon Sep 17 00:00:00 2001 From: Kim Date: Thu, 30 Jan 2025 17:53:15 -0500 Subject: [PATCH 3/7] PR feedback --- assets/css/v2/elevator/closures.scss | 14 +--------- .../src/components/v2/elevator/closures.tsx | 27 +++++++++---------- 2 files changed, 13 insertions(+), 28 deletions(-) diff --git a/assets/css/v2/elevator/closures.scss b/assets/css/v2/elevator/closures.scss index 4587bd83a..78d6183e4 100644 --- a/assets/css/v2/elevator/closures.scss +++ b/assets/css/v2/elevator/closures.scss @@ -50,7 +50,7 @@ .closure-list { display: flex; flex-flow: column wrap; - height: 1000px; + height: 1024px; transform: translateX(calc(-100% * var(--closure-list-offset))); .closure-row { @@ -85,10 +85,6 @@ background-color: $warm-neutral-85; } - &.large { - height: auto; - } - &__station-name { font-size: 62px; font-weight: 600; @@ -121,10 +117,6 @@ } } - &__elevator-name-container { - margin-bottom: 3px; - } - &__elevator-name { font-weight: 500; } @@ -135,17 +127,13 @@ margin-bottom: 8px; margin-left: 48px; overflow: hidden; - font-size: 48px; - line-height: 62px; text-overflow: ellipsis; white-space: nowrap; list-style-position: inside; } &__summary.important { - font-size: 48px; font-weight: 700; - line-height: 62px; } } } diff --git a/assets/src/components/v2/elevator/closures.tsx b/assets/src/components/v2/elevator/closures.tsx index 2bbd50367..b0fc88ba9 100644 --- a/assets/src/components/v2/elevator/closures.tsx +++ b/assets/src/components/v2/elevator/closures.tsx @@ -31,7 +31,6 @@ const ClosureRow = ({ className={cx("closure-row", { "current-station": isCurrentStation, "first-row-on-page": isFirstRowOnPage, - large: closures.length > 2, })} >
@@ -47,20 +46,18 @@ const ClosureRow = ({ )}
-
- {closures.map((closure) => { - return ( -
1, - })} - > - {closure.name} ({closure.id}) -
- ); - })} -
+ {closures.map((closure) => { + return ( +
1, + })} + > + {closure.name} ({closure.id}) +
+ ); + })}
{summary ?? "Accessible route available"} From fc40a61f962aba851f0c7dac58b13b6742190b8e Mon Sep 17 00:00:00 2001 From: Kim Date: Thu, 30 Jan 2025 17:57:04 -0500 Subject: [PATCH 4/7] make closure row height dynamic --- assets/css/v2/elevator/closures.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/css/v2/elevator/closures.scss b/assets/css/v2/elevator/closures.scss index 78d6183e4..c8a867fab 100644 --- a/assets/css/v2/elevator/closures.scss +++ b/assets/css/v2/elevator/closures.scss @@ -56,7 +56,6 @@ .closure-row { position: relative; width: 1080px; - height: 333px; padding: 26px 48px 24px; &:not(.current-station) { From d06f025191f35dc538fde3e0f0d1bb0027f8ce6c Mon Sep 17 00:00:00 2001 From: Kim Date: Thu, 30 Jan 2025 18:13:57 -0500 Subject: [PATCH 5/7] Account for more height on closures list --- assets/css/v2/elevator/closures.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/v2/elevator/closures.scss b/assets/css/v2/elevator/closures.scss index c8a867fab..d5b13fede 100644 --- a/assets/css/v2/elevator/closures.scss +++ b/assets/css/v2/elevator/closures.scss @@ -50,7 +50,7 @@ .closure-list { display: flex; flex-flow: column wrap; - height: 1024px; + height: 1048px; transform: translateX(calc(-100% * var(--closure-list-offset))); .closure-row { From 7b97cd7de5b4dbd71c05bf301f567df24bbfc7f8 Mon Sep 17 00:00:00 2001 From: Kim Date: Thu, 30 Jan 2025 18:20:43 -0500 Subject: [PATCH 6/7] Forgot to include removing max-width from prior commit --- assets/css/v2/elevator/closures.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/v2/elevator/closures.scss b/assets/css/v2/elevator/closures.scss index d5b13fede..81a8500f7 100644 --- a/assets/css/v2/elevator/closures.scss +++ b/assets/css/v2/elevator/closures.scss @@ -122,7 +122,7 @@ &__elevator-name.list-item { display: list-item; - max-width: calc(100% - 96px); + margin-right: 48px; margin-bottom: 8px; margin-left: 48px; overflow: hidden; From 926d3b97fff56f93377724bbf5867f57ce7fbfde Mon Sep 17 00:00:00 2001 From: Kim Date: Fri, 31 Jan 2025 11:33:31 -0500 Subject: [PATCH 7/7] PR feedback --- assets/css/v2/elevator/closures.scss | 4 ++-- .../src/components/v2/elevator/closures.tsx | 22 +++++++++---------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/assets/css/v2/elevator/closures.scss b/assets/css/v2/elevator/closures.scss index 81a8500f7..1d3e5b2a2 100644 --- a/assets/css/v2/elevator/closures.scss +++ b/assets/css/v2/elevator/closures.scss @@ -3,7 +3,7 @@ flex: 1; flex-direction: column; font-size: 48px; - line-height: 64px; + line-height: 62px; color: $cool-black-30; .in-station-summary { @@ -50,7 +50,7 @@ .closure-list { display: flex; flex-flow: column wrap; - height: 1048px; + height: 1000px; transform: translateX(calc(-100% * var(--closure-list-offset))); .closure-row { diff --git a/assets/src/components/v2/elevator/closures.tsx b/assets/src/components/v2/elevator/closures.tsx index b0fc88ba9..7d91484d2 100644 --- a/assets/src/components/v2/elevator/closures.tsx +++ b/assets/src/components/v2/elevator/closures.tsx @@ -46,18 +46,16 @@ const ClosureRow = ({ )}
- {closures.map((closure) => { - return ( -
1, - })} - > - {closure.name} ({closure.id}) -
- ); - })} + {closures.map((closure) => ( +
1, + })} + > + {closure.name} ({closure.id}) +
+ ))}
{summary ?? "Accessible route available"}