fix: wrong padding for single row mobile nav

facebook · Jan 19, 2019 · 1b16063 · 1b16063
1 parent 3ff79fc
commit 1b16063
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/v1/lib/core/Site.js b/v1/lib/core/Site.js
@@ -7,19 +7,31 @@
 
 const React = require('react');
 const fs = require('fs');
+const classNames = require('classnames');
 
 const HeaderNav = require('./nav/HeaderNav.js');
 const Head = require('./Head.js');
 
 const Footer = require(`${process.cwd()}/core/Footer.js`);
 const translation = require('../server/translation.js');
+const env = require('../server/env.js');
 const liveReloadServer = require('../server/liveReloadServer.js');
 const {idx} = require('./utils.js');
 
 const CWD = process.cwd();
 
 // Component used to provide same head, header, footer, other scripts to all pages
 class Site extends React.Component {
+  mobileNavHasOneRow(headerLinks) {
+    const hasLanguageDropdown =
+      env.translation.enabled && env.translation.enabledLanguages().length > 1;
+    const ordinaryHeaderLinks = headerLinks.filter(
+      link => !link.languages && !link.search,
+    );
+    const hasOrdinaryHeaderLinks = ordinaryHeaderLinks.length > 1;
+    return !hasLanguageDropdown && !hasOrdinaryHeaderLinks;
+  }
+
   render() {
     const tagline =
       idx(translation, [this.props.language, 'localized-strings', 'tagline']) ||
@@ -43,6 +55,12 @@ class Site extends React.Component {
       docsVersion = latestVersion;
     }
 
+    const navPusherClasses = classNames('navPusher', {
+      singleRowMobileNav: this.mobileNavHasOneRow(
+        this.props.config.headerLinks,
+      ),
+    });
+
     return (
       <html lang={this.props.language}>
         <Head
@@ -62,7 +80,7 @@ class Site extends React.Component {
             version={this.props.version}
             current={this.props.metadata}
           />
-          <div className="navPusher">
+          <div className={navPusherClasses}>
             {this.props.children}
             <Footer config={this.props.config} language={this.props.language} />
           </div>

diff --git a/v1/lib/static/css/main.css b/v1/lib/static/css/main.css
@@ -1317,6 +1317,10 @@ input::placeholder {
   z-index: 99;
 }
 
+.singleRowMobileNav.navPusher {
+  padding-top: 50px;
+}
+
 .navPusher:after {
   background: rgba(0, 0, 0, 0.4);
   content: '';
@@ -1990,6 +1994,10 @@ input::placeholder {
       z-index: 10;
     }
 
+    .tocActive .singleRowMobileNav .onPageNav {
+      top: 98px;
+    }
+
     .tocActive .navToggle,
     .tocActive .navBreadcrumb h2 {
       visibility: hidden;