[landing] fix mobile nav bar peeking into screen when quickly resizing window
ClosedPublic
Actions

Authored by ginsu on May 19 2023, 5:53 AM.

Details

Reviewers

atul
kamil

Commits

rCOMM5316c4f343fe: [landing] fix mobile nav bar peeking into screen when quickly resizing window

Summary

As I was doing more tests for the landing page, I noticed that when I quickly resized the window, the MobileNav component would sometimes peek from the top and be visible. To fix this I made the background color of the MobileNav component transparent whenever it was not active so it would not be visible.

Depends on D7870

Test Plan

Please watch the demo videos below

Before:

After:

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.May 19 2023, 5:53 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMay 19 2023, 5:53 AM

Harbormaster completed remote builds in B19503: Diff 26668.May 19 2023, 6:11 AM

ginsu requested review of this revision.May 19 2023, 6:11 AM

ginsu edited the test plan for this revision. (Show Details)May 19 2023, 6:14 AM

ginsu edited the summary of this revision. (Show Details)May 21 2023, 1:38 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, kamil.

ginsu added a parent revision: D7870: [landing] fix mobile nav still being shown when window resizes.

ginsu added inline comments.

landing/mobile-nav.css
27 ↗	(On Diff #26668)	Not a super related change, but thought it would be good to make all the transitions consistent in this file

ginsu attached a referenced file: F548611: Screen Recording 2023-05-19 at 3.57.35 PM.mov. (Show Details)May 21 2023, 1:38 AM

ginsu attached a referenced file: F545427: Screen Recording 2023-05-19 at 3.56.59 PM.mov. (Show Details)

ginsu added a child revision: D7898: [landing] minor improvements to mobile nav ui.May 22 2023, 6:56 AM

atul retitled this revision from [landing] fix mobile nav bar peaking into screen when quickly resizing window to [landing] fix mobile nav bar peeking into screen when quickly resizing window.May 22 2023, 9:19 AM

atul accepted this revision.May 22 2023, 9:38 AM

atul added inline comments.

landing/mobile-nav.css
11 ↗	(On Diff #26668)	Hm, so if I understand correctly it looks like we transition the `background-color` all at once (`0ms` duration) AFTER a `500ms` delay.

This revision is now accepted and ready to land.May 22 2023, 9:38 AM

ginsu added inline comments.May 23 2023, 2:19 AM

landing/mobile-nav.css
11 ↗	(On Diff #26668)	Yes so immediately after the top transition finishes (the mobile nav bar slides out) we change the `background-color` back to `transparent`