3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-17 11:07:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: wrong padding for single row mobile nav (#1191)

Browse source
This commit is contained in:
Marvin Chin 2019-01-24 13:42:16 +08:00 • committed by Yangshun Tay
parent d5fd15ecbe
commit 4ce7ae2c98
2 changed files with 26 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

19
v1/lib/core/Site.js
View file

@ -7,12 +7,14 @@
const React = require('react'); const React = require('react');
const fs = require('fs'); const fs = require('fs');
const classNames = require('classnames');
const HeaderNav = require('./nav/HeaderNav.js'); const HeaderNav = require('./nav/HeaderNav.js');
const Head = require('./Head.js'); const Head = require('./Head.js');
const Footer = require(`${process.cwd()}/core/Footer.js`); const Footer = require(`${process.cwd()}/core/Footer.js`);
const translation = require('../server/translation.js'); const translation = require('../server/translation.js');
const env = require('../server/env.js');
const liveReloadServer = require('../server/liveReloadServer.js'); const liveReloadServer = require('../server/liveReloadServer.js');
const {idx} = require('./utils.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 // Component used to provide same head, header, footer, other scripts to all pages
class Site extends React.Component { 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() { render() {
const tagline = const tagline =
idx(translation, [this.props.language, 'localized-strings', 'tagline']) || idx(translation, [this.props.language, 'localized-strings', 'tagline']) ||
@ -43,6 +54,12 @@ class Site extends React.Component {
docsVersion = latestVersion; docsVersion = latestVersion;
} }
const navPusherClasses = classNames('navPusher', {
singleRowMobileNav: this.mobileNavHasOneRow(
this.props.config.headerLinks,
),
});
return ( return (
<html lang={this.props.language}> <html lang={this.props.language}>
<Head <Head
@ -62,7 +79,7 @@ class Site extends React.Component {
version={this.props.version} version={this.props.version}
current={this.props.metadata} current={this.props.metadata}
/> />
<div className="navPusher"> <div className={navPusherClasses}>
{this.props.children} {this.props.children}
<Footer config={this.props.config} language={this.props.language} /> <Footer config={this.props.config} language={this.props.language} />
</div> </div>

8
v1/lib/static/css/main.css
View file

@ -1317,6 +1317,10 @@ input::placeholder {
z-index: 99; z-index: 99;
} }
.singleRowMobileNav.navPusher {
padding-top: 50px;
}
.navPusher:after { .navPusher:after {
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
content: ''; content: '';
@ -2006,6 +2010,10 @@ input::placeholder {
z-index: 10; z-index: 10;
} }
.tocActive .singleRowMobileNav .onPageNav {
top: 98px;
}
.tocActive .navToggle, .tocActive .navToggle,
.tocActive .navBreadcrumb h2 { .tocActive .navBreadcrumb h2 {
visibility: hidden; visibility: hidden;