Paths

Table of Contentst

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

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

Details

Reviewers

atul
kamil

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.Fri, May 19, 5:53 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptFri, May 19, 5:53 AM

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

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

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

ginsu edited the summary of this revision. (Show Details)Sun, May 21, 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)Sun, May 21, 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.Mon, May 22, 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.Mon, May 22, 9:19 AM

atul accepted this revision.Mon, May 22, 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.Mon, May 22, 9:38 AM

ginsu added inline comments.Tue, May 23, 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`

Revision Contents
Changeset List

Path

Size

landing/

mobile-nav.css

12 lines

Diff 26668

View Options

[landing] fix mobile nav bar peeking into screen when quickly resizing windowAcceptedPublicActions