[landing] clean up header icons user experience
ClosedPublic
Actions

Authored by ginsu on May 18 2023, 10:11 AM.

Details

Reviewers

atul
kamil

Commits

rCOMM9f3ce033ed46: [landing] clean up header icons user experience

Summary

After some feedback from D7835 regarding the hover effect of the hamburger menu icon, I created this diff to address that feedback and add the hover effect in for the hamburger menu icon only for non-mobile/non-touch devices. In addition to adding the hover effect to the hamburger menu icon, I cleaned up the hover effects for the other icons in the header on mobile/touch devices. While this is not the most necessary thing, since we are immediately redirecting the user to a different webpage after the user presses on an icon, I figured it would be good to do to keep the styling consistent among the icons in the header

Depends on D7839

Test Plan

Please watch the demo video to see how the header icons look and behave:

Using a non-mobile/non-touch device:

Using a mobile/touch device:

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.May 18 2023, 10:11 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMay 18 2023, 10:11 AM

ginsu mentioned this in D7835: [landing] update header strucutre to use flexbox over grid.May 18 2023, 10:15 AM

ginsu edited the summary of this revision. (Show Details)May 18 2023, 10:25 AM

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

ginsu added reviewers: atul, kamil.

ginsu added a parent revision: D7839: [landing] introduce new header elements to header component.

ginsu attached a referenced file: F544540: Screen Recording 2023-05-18 at 8.23.45 PM.mov. (Show Details)

ginsu attached a referenced file: F544529: Screen Recording 2023-05-18 at 8.22.31 PM.mov. (Show Details)

ginsu added inline comments.May 18 2023, 10:29 AM

landing/header.css
62	@atul and I discussed using this in D7763
89	This media selector means that we will only show the hover effect on devices that can use hovering as an input from the user. This prevents the case where after the user taps on the icon, the hover effect still persists even after the user removes their finger from the screen

Harbormaster completed remote builds in B19490: Diff 26655.May 18 2023, 10:29 AM

ginsu requested review of this revision.May 18 2023, 10:29 AM

update breakpoint width

landing/header.css
61 ↗	(On Diff #26660)	@atul and I discussed using this in D7763
88 ↗	(On Diff #26660)	This media selector means that we will only show the hover effect on devices that can use hovering as an input from the user. This prevents the case where after the user taps on the icon, the hover effect still persists even after the user removes their finger from the screen