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

* Fix nav to take full width in the docs page Fix #911 * Remove using important in css * Make Getting started flushed together with icon
facebook · Sep 9, 2018 · f2dceff · f2dceff
1 parent 89f49b0
commit f2dceff
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
@@ -78,7 +78,7 @@ class DocsLayout extends React.Component {
         metadata={metadata}>
         <div className="docMainWrapper wrapper">
           <DocsSidebar metadata={metadata} />
-          <Container className="mainContainer">
+          <Container className="mainContainer docMainContainer">
             <DocComponent
               metadata={metadata}
               content={content}
@@ -133,7 +133,7 @@ class DocsLayout extends React.Component {
               )}
           </Container>
           {hasOnPageNav && (
-            <nav className="onPageNav">
+            <nav className="onPageNav docOnPageNav">
               <OnPageNav rawContent={content} />
             </nav>
           )}

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
@@ -1489,7 +1489,8 @@ input::placeholder {
 
 @media only screen and (min-width: 1024px) {
   .docMainWrapper {
-    width: 100%;
+    max-width:100% !important ;
+    margin: 0;
   }
 
   .docMainWrapper > * {
@@ -1588,7 +1589,9 @@ input::placeholder {
 
 @media only screen and (min-width: 1024px) {
   .docsNavContainer {
-    flex: 0 0 240px;
+    flex: 1 0 240px;
+    display: flex;
+    justify-content: flex-end;
     height: calc(100vh - 50px);
     position: -webkit-sticky;
     position: sticky;
@@ -1631,7 +1634,7 @@ input::placeholder {
   }
 
   .separateOnPageNav .docsNavContainer {
-    flex: 0 0 240px;
+    flex: 1 0 240px;
   }
 }
 
@@ -1976,6 +1979,11 @@ input::placeholder {
       width: auto;
     }
 
+    .docsNavContainer > :first-child {
+      width: 240px;
+      max-width: 240px;
+    }
+
     .separateOnPageNav.sideNavVisible .navPusher .mainContainer {
       flex: 1 auto;
       max-width: 100%;
@@ -1993,6 +2001,10 @@ input::placeholder {
       top: 90px;
     }
 
+    .docOnPageNav {
+      flex: 1 0 240px;
+    }
+
     .onPageNav > .toc-headings {
       border-left: 1px solid #e0e0e0;
       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 .wrapper {
   max-width: 1100px;