feat: Current elevator closure layout #2315
Conversation
cmaddox5
force-pushed
the
cm/current-station-closure
branch
4 times, most recently
from
3d38319
to
3f58dc3
Compare
| .header-container { | ||
| margin: 48px; | ||
| margin-bottom: 0; | ||
| .shape { |
There was a problem hiding this comment.
This feels like it could be named better — looking at the markup also wasn't super informative, as it's just an empty div. What would we call this design element? A "notch"?
There was a problem hiding this comment.
"notch" is honestly the best term I can think of. I'll go with that.
| &__title { | ||
| word-spacing: 9999px; | ||
| .header { | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
While we're building an entirely new screen type, now might be a good time to consider "universal box sizing":
*, *:before, *:after { box-sizing: border-box }From what I gather this is a common way to do things, and it could make our lives easier in the future.
| .header { | ||
| box-sizing: border-box; | ||
| height: 528px; | ||
| padding: 53px 68px 51px 48px; |
There was a problem hiding this comment.
All these hyper-specific values for element dimensions are wild... I know we don't generally expect to have to support displays of differing aspect ratios within the same screen type, but if that day ever comes there would have to be a serious reckoning. Let's just try to make sure any pixel measurement we're specifying is actually required to achieve the intended effects, rather than copying every measurement from the designs.
| &__text { | ||
| line-height: 68.13px; | ||
| } | ||
| .alternate-direction-text.small { |
There was a problem hiding this comment.
These could be nested to avoid the repetition, like
.alternate-direction-text {
color: $cool-black-30;
&.small {
// ...
}There was a problem hiding this comment.
This was intentional due to some issues using the nesting selector when implementing the other layout. This is one of the places where having a working browserslist + stylelint configuration would be very helpful. I think I should add a comment to the top of this file communicating the modern styles that I know don't work on these screens.
There was a problem hiding this comment.
I'm not sure what browser-specific issues could exist here? Sass is going to compile things like nesting and & down to the equivalent "flat" CSS, unless something has changed and they've started using the (very new) native CSS nesting spec.
There was a problem hiding this comment.
Yeah that's true, I didn't think about that. I will try out nesting here again in case I was wrong.
| } | ||
| } | ||
|
|
||
| .outside-closures-view { |
There was a problem hiding this comment.
Since current-elevator-closed-view and outside-closures-view are pretty independent of each other, what do you think about splitting them into separate stylesheets? This file is getting pretty long as it is.
There was a problem hiding this comment.
Good call. Will work on splitting out the styles and React components.
|
|
||
| interface OutsideClosuresViewProps extends OutsideClosureListProps {} | ||
|
|
||
| const OutsideClosuresView = ({ |
There was a problem hiding this comment.
Same comment as with the stylesheets — these "views" seem so separate, and each complex enough, that they deserve their own modules. (This also makes me wonder about making them separate widgets on the backend, if that would make sense.)
There was a problem hiding this comment.
The separate widgets idea is interesting. Essentially move the conditional to the CG. Would simplify the widget data for sure because I don't think the CurrentElevatorClosedView ever has a reason to care about any other alert.
| pageIndex: number; | ||
| } | ||
|
|
||
| const PagingIndicators = ({ numPages, pageIndex }: PagingIndicatorsProps) => { |
There was a problem hiding this comment.
Good refactor, making this a proper component.
| in_station_closures: Enum.map(in_station_alerts, &alert_to_elevator_closure/1), | ||
| other_stations_with_closures: | ||
| format_outside_closures(outside_alerts, parent_station_map, routes_map) | ||
| format_outside_closures(outside_alerts, parent_station_map, routes_map), | ||
| elevator_config: config |
There was a problem hiding this comment.
app_params might be a better name for this — config is a little imprecise and has a lot of overlap with the general notion of a screen's whole "config".
cmaddox5
force-pushed
the
cm/current-station-closure
branch
from
3f58dc3
to
f72c504
Compare
| :main_content, | ||
| :footer | ||
| ] | ||
| normal: [:main_content] |
There was a problem hiding this comment.
Want to call this change out. I am having trouble styling the header and footer when the current elevator is closed (:has is not supported on the screens). I made this change as more of an RFC because I'm not sure how I feel about it.
This PR adds a new layout for elevator screens. When the current elevator is closed at all, we show this layout that helps riders get to an alternate elevator. Maps will be created by Betsy and added to S3. Coordinates for the map marker will also be provided by Betsy.
Config that can be used for testing:
{ "ELE-101": { "disabled": false, "name": "", "app_id": "elevator_v2", "app_params": { "evergreen_content": [], "elevator_id": "842", "alternate_direction_text": "Alternate direction text goes here. This is the largest body text class. Use this for shorter sets of directions. Add up to 6 lines at this size", "accessible_path_image_url": "images/elevator/maps/forest-hills-map.png", "accessible_path_direction_arrow": "e", "accessible_path_image_here_coordinates": { "x": 151, "y": 182 } }, "device_id": "", "hidden_from_screenplay": false, "refresh_if_loaded_before": null, "tags": [], "vendor": "mimo" } }