Optimize for landing page mobile #19
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
florisdobber
requested changes
Dec 9, 2020
Member
florisdobber
left a comment
florisdobber
left a comment
There was a problem hiding this comment.
Few minor things but otherwise great PR! Lots of code clean up and reusable stuff. If you have time would love if you could address the changes soon so we can merge this and use it else where.
florisdobber
approved these changes
Dec 17, 2020
Member
florisdobber
left a comment
florisdobber
left a comment
There was a problem hiding this comment.
Sorry the delay, approved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why
Monday.com Ticket
What benefit does this bring to the end user? Or, what benefit does this bring to developers working in the codebase?
Makes the logged-in landing page easier to navigate on mobile devices/narrow windows.
useWindowDimensionscan be used to make other components responsive to browser dimensions.This PR
Describe the changes required and any implementation choices you made to give context to reviewers.
Created
useWindowDimensionsto get and use thewindowDimensionsstate when rendering componentswindowDimensionscontains the browser'swidth,height, andwindowTypewindowTypeis determined bywidth:< 650=>'MOBILE'[650, 900)=>'TABLET'[900, 1150)=>'NARROW'> 1150=>'DESKTOP'Created link carousel component using Ant.D Carousel component
Updated PageHeader and HomeContainer components so that top margin decreases for mobile
Screenshots
Provide screenshots of any new components, styling changes, or pages.
Desktop, Mobile
Narrow, Tablet
Verification Steps
What steps did you take to verify your changes work? These should be clear enough for someone to be able to clone the branch and follow the steps themselves.
Visually confirmed the layout updated when resizing the browser, also used Device Mode in Chrome Dev Tools to make sure the layout made sense for mobile.