From 908cac25acd5c6e5802d56e36c6543f76006b8e8 Mon Sep 17 00:00:00 2001 From: marvinchin Date: Sun, 20 Jan 2019 00:57:18 +0800 Subject: [PATCH] fix: wrong padding for single row mobile nav --- v1/lib/core/Site.js | 19 ++++++++++++++++++- v1/lib/static/css/main.css | 8 ++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/v1/lib/core/Site.js b/v1/lib/core/Site.js index f37d4968f567..671775ce215c 100644 --- a/v1/lib/core/Site.js +++ b/v1/lib/core/Site.js @@ -7,12 +7,14 @@ 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'); @@ -20,6 +22,15 @@ 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 hasOrdinaryHeaderLinks = headerLinks.some( + link => !(link.languages || link.search), + ); + return !(hasLanguageDropdown || hasOrdinaryHeaderLinks); + } + render() { const tagline = idx(translation, [this.props.language, 'localized-strings', 'tagline']) || @@ -43,6 +54,12 @@ class Site extends React.Component { docsVersion = latestVersion; } + const navPusherClasses = classNames('navPusher', { + singleRowMobileNav: this.mobileNavHasOneRow( + this.props.config.headerLinks, + ), + }); + return ( -
+
{this.props.children}
diff --git a/v1/lib/static/css/main.css b/v1/lib/static/css/main.css index b61ce39d0efb..2d3997770634 100644 --- 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;