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

Fix nav to take full width in the docs page (#935)

Browse source 
* Fix nav to take full width in the docs page

Fix #911

* Remove using important in css

* Make Getting started flushed together with icon
This commit is contained in:
Fienny Angelina 2018-09-09 18:00:47 +08:00 • committed by Yangshun Tay
parent 89f49b02c8
commit f2dceffc09
2 changed files with 25 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
lib/core/DocsLayout.js
View file

@ -78,7 +78,7 @@ class DocsLayout extends React.Component {
metadata={metadata}> metadata={metadata}>
<div className="docMainWrapper wrapper"> <div className="docMainWrapper wrapper">
<DocsSidebar metadata={metadata} /> <DocsSidebar metadata={metadata} />
<Container className="mainContainer"> <Container className="mainContainer docMainContainer">
<DocComponent <DocComponent
metadata={metadata} metadata={metadata}
content={content} content={content}
@ -133,7 +133,7 @@ class DocsLayout extends React.Component {
)} )}
</Container> </Container>
{hasOnPageNav && ( {hasOnPageNav && (
<nav className="onPageNav"> <nav className="onPageNav docOnPageNav">
<OnPageNav rawContent={content} /> <OnPageNav rawContent={content} />
</nav> </nav>
)} )}

26
lib/static/css/main.css
View file

@ -1489,7 +1489,8 @@ input::placeholder {
@media only screen and (min-width: 1024px) { @media only screen and (min-width: 1024px) {
.docMainWrapper { .docMainWrapper {
width: 100%; max-width:100% !important ;
margin: 0;
} }
.docMainWrapper > * { .docMainWrapper > * {
@ -1588,7 +1589,9 @@ input::placeholder {
@media only screen and (min-width: 1024px) { @media only screen and (min-width: 1024px) {
.docsNavContainer { .docsNavContainer {
flex: 0 0 240px; flex: 1 0 240px;
display: flex;
justify-content: flex-end;
height: calc(100vh - 50px); height: calc(100vh - 50px);
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
@ -1631,7 +1634,7 @@ input::placeholder {
} }
.separateOnPageNav .docsNavContainer { .separateOnPageNav .docsNavContainer {
flex: 0 0 240px; flex: 1 0 240px;
} }
} }
@ -1976,6 +1979,11 @@ input::placeholder {
width: auto; width: auto;
} }
.docsNavContainer > :first-child {
width: 240px;
max-width: 240px;
}
.separateOnPageNav.sideNavVisible .navPusher .mainContainer { .separateOnPageNav.sideNavVisible .navPusher .mainContainer {
flex: 1 auto; flex: 1 auto;
max-width: 100%; max-width: 100%;
@ -1993,6 +2001,10 @@ input::placeholder {
top: 90px; top: 90px;
} }
.docOnPageNav {
flex: 1 0 240px;
}
.onPageNav > .toc-headings { .onPageNav > .toc-headings {
border-left: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0;
padding: 10px 0 2px 15px; padding: 10px 0 2px 15px;
@ -2004,6 +2016,14 @@ input::placeholder {
} }
} }
@media only screen and (min-width: 1024px) {
.separateOnPageNav.sideNavVisible .navPusher .docMainContainer {
flex-basis: 784px;
flex-grow: 0;
}
}
/* Blog */ /* Blog */
.blog .wrapper { .blog .wrapper {
max-width: 1100px; max-width: 1100px;