layout FW fixes

Author: Alban Bailly

src/components/2_molecules/ResponseItem.js

@@ -104,7 +104,7 @@ export const ResponseItem = props => {
                         </div>
                       </div>
                       {l.properties && (
-                        <div className="px-4 mt-2 mb-4 ml-4 subResponse">
+                        <div className="px-4 mt-4 mb-4 ml-4 subResponse">
                           {Object.keys(l.properties).map((e, i) => {
                             const data = l.properties[e];
                             return (
@@ -148,7 +148,7 @@ export const ResponseItem = props => {
                         </div>
                       )}
                       {l.items && (
-                        <div className="px-4 mt-2 mb-4 ml-4 subResponse">
+                        <div className="px-4 mt-4 mb-4 ml-4 subResponse">
                           {l.items.properties &&
                             Object.keys(l.items.properties).map((e, i) => {
                               const data = l.items.properties[e];

src/components/2_molecules/Security.js

@@ -3,7 +3,7 @@ import React from "react";
 export const Security = props => {
   const { oauth } = props;
   return (
-    <div class="flex items-start mt-4">
+    <div className="flex items-start mt-4">
       <div className="mr-4">
         <b>Authorizations:</b>
       </div>

src/components/4_layouts/layout.js

@@ -24,7 +24,7 @@ const Layout = ({ children, title, subtitle, fullWidth }) => (
       }
     `}
     render={data => (
-      <div className="content">
+      <div className={`content ${fullWidth ? "layout-fixed" : ""}`}>
         <Header
           siteTitle={data.site.siteMetadata.title}
           menuLinks={data.site.siteMetadata.menuLinks}
@@ -36,16 +36,20 @@ const Layout = ({ children, title, subtitle, fullWidth }) => (
         >
           <main className="main">{children}</main>
         </div>
-        <div className="footer-nav-wrapper bg-black">
-          <footer className="max-w-3xl mx-auto py-8 px-4 md:px-8 text-white">
-            <Footer />
-          </footer>
-        </div>
-        <div className="footer-wrapper bg-BaseBlackFull">
-          <footer className="max-w-3xl mx-auto py-8 px-4 md:px-8 text-white">
-            <FooterNav />
-          </footer>
-        </div>
+        {!fullWidth && (
+          <div className="footer-nav-wrapper bg-black">
+            <footer className="max-w-3xl mx-auto py-8 px-4 md:px-8 text-white">
+              <Footer />
+            </footer>
+          </div>
+        )}
+        {!fullWidth && (
+          <div className="footer-wrapper bg-BaseBlackFull">
+            <footer className="max-w-3xl mx-auto py-8 px-4 md:px-8 text-white">
+              <FooterNav />
+            </footer>
+          </div>
+        )}
       </div>
     )}
   />

src/components/5_templates/api.js

@@ -34,13 +34,13 @@ const apiPage = ({ data }) => {
   };
   return (
     <Layout
-      title="API Documentation"
-      subtitle="Linode API Documentation"
+      // title="API Documentation"
+      // subtitle="Linode API Documentation"
       fullWidth
     >
       <SEO title="API Documentation" description="" />
       <div className="flex flex-wrap">
-        <div className="w-full md:w-1/6">
+        <div className="w-full md:w-1/6 sidebar-container">
           <Sidebar />
         </div>
         <div className="w-full md:w-5/6 api-content mx-auto">

src/css/components/0_utilities/typography.css

@@ -31,7 +31,7 @@ input[type="text"] {
 
 .api-body table {
   width: 100%;
-  @apply border border-BaseGrey;
+  @apply border border-grey-light;
 }
 
 .api-body thead {
@@ -40,7 +40,7 @@ input[type="text"] {
 
 .api-body th,
 .api-body td {
-  @apply p-2 border border-BaseGrey;
+  @apply p-2 border border-grey-light;
 }
 
 .api-body table code {

src/css/components/3_organisms/header.css

@@ -0,0 +1,5 @@
+.layout-fixed .header-wrapper {
+  position: fixed;
+  width: 100%;
+  z-index: 2;
+}

src/css/components/3_organisms/main.css

@@ -0,0 +1,4 @@
+.layout-fixed .main-wrapper {
+  position: relative;
+  top: 64px;
+}

src/css/components/4_pages/api-page.css

@@ -1,11 +1,17 @@
+.layout-fixed .sidebar-container {
+  position: fixed;
+  top: 64px;
+  height: calc(100vh - 64px - 4rem);
+}
+
 .api-navigation-wrapper {
   padding: 2rem;
   margin-right: 1rem;
-  height: 100%;
+  overflow-y: scroll;
 }
 
 .api-navigation {
-  position: sticky;
+  /* position: sticky; */
   z-index: 2;
   top: 2rem;
 }
@@ -72,15 +78,15 @@
 }
 
 .initResponse {
-  /* border-top-width: 1px;
-  @apply border-grey-light; */
+  border-top-width: 1px;
+  @apply border-grey-light;
 }
 
 .response-wrapper .initResponse:first-child {
   /* border: 0; */
 }
 
 .subResponse {
-  border-left-width: 2px;
+  border-left-width: 1px;
   @apply border-grey-light;
 }

src/pages/api/v4.js

@@ -21,16 +21,16 @@ const APIDocs = ({ data }) => {
 
   return (
     <Layout
-      title="API Documentation"
-      subtitle="Linode API Documentation"
+      // title="API Documentation"
+      // subtitle="Linode API Documentation"
       fullWidth
     >
       <SEO title="API Documentation" description="" />
       <div className="flex flex-wrap">
-        <div className="w-full md:w-1/6">
+        <div className="w-full md:w-1/6 sidebar-container">
           <Sidebar />
         </div>
-        <div className="w-full md:w-5/6">
+        <div className="w-full md:w-5/6 api-content mx-auto">
           <Markdown
             source={n.info.description}
             escapeHtml={false}