Page MenuHomePhabricator
Differential D7871

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

Authored by ginsu on May 19 2023, 5:53 AM.
Tags
None
Referenced Files
F3407310: D7871.diff
Wed, Dec 4, 5:36 AM
Unknown Object (File)
Sun, Nov 17, 2:19 AM
Unknown Object (File)
Sun, Nov 17, 1:38 AM
Unknown Object (File)
Sun, Nov 17, 1:38 AM
Unknown Object (File)
Sun, Nov 17, 1:38 AM
Unknown Object (File)
Sat, Nov 16, 11:27 PM
Unknown Object (File)
Oct 18 2024, 11:42 PM
Unknown Object (File)
Oct 17 2024, 3:05 AM
View All 74 Files
Subscribers
ashoat
atul
tomek

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
No Lint Coverage
Unit
No Test Coverage

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

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

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

Yes so immediately after the top transition finishes (the mobile nav bar slides out) we change the background-color back to transparent

ginsu updated this revision to Diff 29648.Aug 8 2023, 12:09 PM

rebase before landing

Harbormaster completed remote builds in B21608: Diff 29648.Aug 8 2023, 12:37 PM
Closed by commit rCOMM5316c4f343fe: [landing] fix mobile nav bar peeking into screen when quickly resizing window (authored by ginsu). · Explain WhyAug 8 2023, 2:07 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMM5316c4f343fe: [landing] fix mobile nav bar peeking into screen when quickly resizing window.

Revision Contents
Changeset List

PathSize
landing/
12 lines

Diff 26668

View Options

landing/mobile-nav.css

Loading...