Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: wrong padding for single row mobile nav #1191

Merged
merged 1 commit into from
Jan 24, 2019

Conversation

marvinchin
Copy link
Contributor

Motivation

Fix #1187. Padding for certain components assumed that there will always be two rows in the nav bar in mobile view. Here we handle the case where the nav bar only has a single row on mobile devices.

I'm not 100% certain if Site.js is the best place to check whether the mobile nav bar occupies a single row, or if I'm applying the singleRowMobileNav class at the most suitable place. Please do let me know if there is a better way to achieve this!

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

We test for the cases where there are two rows in the mobile nav bar (at least 1 doc/blog/page/href/language link) and when there is one row in the mobile nav bar (no doc/blog/page/href/language link).

Padding for mobile devices should be correct when there are two rows in the mobile nav bar:

screenshot 2019-01-20 at 12 58 50 am

screenshot 2019-01-20 at 12 58 59 am

screenshot 2019-01-20 at 12 59 10 am

Padding for mobile devices should be correct when there is one row in the mobile nav bar:

screenshot 2019-01-20 at 1 05 15 am

screenshot 2019-01-20 at 1 05 21 am

screenshot 2019-01-20 at 1 05 30 am

Padding for full screen devices should be correct when there are two rows in the mobile nav bar:

screenshot 2019-01-20 at 1 08 50 am

Padding for full screen devices should be correct when there is one row in the mobile nav bar

screenshot 2019-01-20 at 1 07 57 am

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jan 19, 2019
@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Jan 19, 2019

Deploy preview for docusaurus-preview ready!

Built with commit 908cac2

https://deploy-preview-1191--docusaurus-preview.netlify.com

Copy link
Contributor

@yangshun yangshun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good, pending some review comments to be addressed before we can merge this 😄

const hasLanguageDropdown =
env.translation.enabled && env.translation.enabledLanguages().length > 1;
const ordinaryHeaderLinks = headerLinks.filter(
link => !link.languages && !link.search,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you change this to link.languages || link.search? It's easier to read.

link => !link.languages && !link.search,
);
const hasOrdinaryHeaderLinks = ordinaryHeaderLinks.length > 1;
return !hasLanguageDropdown && !hasOrdinaryHeaderLinks;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This too.

mobileNavHasOneRow(headerLinks) {
const hasLanguageDropdown =
env.translation.enabled && env.translation.enabledLanguages().length > 1;
const ordinaryHeaderLinks = headerLinks.filter(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to headerLinks.some() and you don't need to check for .length > 1.

@marvinchin
Copy link
Contributor Author

@yangshun fixed!

Copy link
Contributor

@yangshun yangshun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thank you!

@yangshun yangshun merged commit 4ce7ae2 into facebook:master Jan 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants