Merge pull request linode#3 from linode/DLC-139

Kayla Wilkins · web-flow · commit 76cc714d2a4a · 2019-05-14T10:12:33.000-04:00
DLC-139 Make API docs more mobile friendly
diff --git a/src/components/2_molecules/BodySchema.js b/src/components/2_molecules/BodySchema.js
@@ -23,8 +23,8 @@ export const BodySchema = props => {
             b &&
             b.readOnly !== true && (
               <div key={i} className="response-wrapper">
-                <div className="flex mb-4 pt-2 initResponse">
-                  <div className="w-1/4">
+                <div className="lg:flex mb-4 pt-2 initResponse">
+                  <div className="w-full lg:w-1/4">
                     <div>
                       <b className={b.deprecated && "line-through"}>{p}</b>
                     </div>
@@ -52,7 +52,7 @@ export const BodySchema = props => {
                       </div>
                     )}
                   </div>
-                  <div className="w-3/4">
+                  <div className="w-full lg:w-3/4">
                     <div className="text-sm leading-text-sm text-grey-darkest">
                       {b.type} <CharDisplay data={b} />
                       {b.pattern && <span className="tag">{b.pattern}</span>}
@@ -87,8 +87,8 @@ export const BodySchema = props => {
                   b &&
                   b.readOnly === undefined && (
                     <div key={i} className="response-wrapper">
-                      <div className="flex pt-2 mb-4 initResponse">
-                        <div className="w-1/4">
+                      <div className="lg:flex pt-2 mb-4 initResponse">
+                        <div className="w-full lg:w-1/4">
                           <div>
                             <b>{p}</b>
                           </div>
@@ -135,7 +135,7 @@ export const BodySchema = props => {
                             )}
                           </div>
                         </div>
-                        <div className="w-3/4">
+                        <div className="w-full lg:w-3/4">
                           <div className="text-sm leading-text-sm text-grey-darkest">
                             {b.type} <CharDisplay data={b} />
                             {b.pattern && (
diff --git a/src/components/2_molecules/ResponseItemElements.js b/src/components/2_molecules/ResponseItemElements.js
@@ -18,8 +18,8 @@ export const ResponseItemElements = props => {
             return (
               l && (
                 <div key={i} className="response-wrapper">
-                  <div className="flex mb-2 pt-2 initResponse">
-                    <div className="w-1/4">
+                  <div className="lg:flex mb-2 pt-2 initResponse">
+                    <div className="w-full lg:w-1/4">
                       <div>
                         <b className={l.deprecated && "line-through"}>{p}</b>
                       </div>
@@ -31,7 +31,7 @@ export const ResponseItemElements = props => {
                         </div>
                       )}
                     </div>
-                    <div className="w-3/4">
+                    <div className="w-full lg:w-3/4">
                       <div>
                         <div className="text-sm leading-text-sm text-grey-darkest">
                           {context.content.application_json.schema.properties
@@ -79,15 +79,15 @@ export const ResponseItemElements = props => {
                         const data = l.properties[e];
                         return (
                           data && (
-                            <div key={i} className="flex mb-4">
-                              <div className="w-1/4">
+                            <div key={i} className="lg:flex mb-4">
+                              <div className="w-full lg:w-1/4">
                                 <b
                                   className={data.deprecated && "line-through"}
                                 >
                                   {e}
                                 </b>
                               </div>
-                              <div className="w-3/4">
+                              <div className="w-full lg:w-3/4">
                                 <div>
                                   <div className="text-sm text-grey-darkest">
                                     {data.type && data.type}{" "}
@@ -143,8 +143,8 @@ export const ResponseItemElements = props => {
                           const data = l.items.properties[e];
                           return (
                             data && (
-                              <div key={i} className="flex mb-4">
-                                <div className="w-1/4">
+                              <div key={i} className="lg:flex mb-4">
+                                <div className="w-full lg:w-1/4">
                                   <b
                                     className={
                                       data.deprecated && "line-through"
@@ -153,7 +153,7 @@ export const ResponseItemElements = props => {
                                     {e}
                                   </b>
                                 </div>
-                                <div className="w-3/4">
+                                <div className="w-full lg:w-3/4">
                                   <div>
                                     <div className="text-sm text-grey-darkest leading-text-sm">
                                       {data.type && data.type}
diff --git a/src/components/2_molecules/Security.js b/src/components/2_molecules/Security.js
@@ -3,11 +3,11 @@ import React from "react";
 export const Security = props => {
   const { oauth } = props;
   return (
-    <div className="flex items-start mt-4">
-      <div className="w-1/4">
+    <div className="md:flex md:items-start mt-4">
+      <div className="sm-full md-1/4">
         <h3 className="mt-0">Authorizations</h3>
       </div>
-      <div className="flex flex-col w-3/4">
+      <div className="sm-full md:flex md:flex-col md-3/4">
         <div>personalAccessToken</div>
         <div>
           <span>oAuth: </span>(<span className="tag tag-light">{oauth}</span>)
diff --git a/src/components/2_molecules/search-header.js b/src/components/2_molecules/search-header.js
@@ -12,7 +12,7 @@ const SearchHeader = () => (
       }
     `}
     render={data => (
-      <header className="mb-4">
+      <header className="md:mb-4">
         <Search searchIndex={data.siteSearchIndex.index} />
       </header>
     )}
diff --git a/src/components/2_molecules/sidemenu.js b/src/components/2_molecules/sidemenu.js
@@ -71,7 +71,7 @@ class SideMenu extends React.Component {
     const groups = this.props.data.allPaths.group;
 
     return (
-      <div className="api-navigation-wrapper bg-ThemeCell">
+      <div className="api-navigation-wrapper md:bg-ThemeCell">
         <div className="api-navigation">
           <APITitle />
           <SearchHeader />
diff --git a/src/components/5_templates/api.js b/src/components/5_templates/api.js
@@ -44,7 +44,7 @@ const apiPage = ({ data }) => {
         <div className="sidebar-container">
           <Sidebar />
         </div>
-        <div className="api-content-wrapper">
+        <div className="w-full px-4 api-content-wrapper">
           <div className="api-content mx-auto">
             <h1 className="mb-4 ">
               {(n.get && n.get.tags) ||
@@ -60,13 +60,13 @@ const apiPage = ({ data }) => {
                 m && (
                   <div key={i} className="flex flex-col">
                     <span id={mode} className="endpoint-anchor" />
-                    <div className="w-full mb-8 py-2">
+                    <div className="xs-full mb-8 px-2">
                       <h2 className="mt-0">{m.summary}</h2>
                       <div className="bg-ThemeCell p-4 mt-4 mb-8">
                         <span className="tag big bold mr-2 uppercase">
                           {mode}
                         </span>
-                        <span>https://api.linode.com/v4{n.name}</span>
+                        <pre>https://api.linode.com/v4{n.name}</pre>
                       </div>
                       <Markdown
                         source={m.description}
diff --git a/src/css/components/0_utilities/typography.css b/src/css/components/0_utilities/typography.css
@@ -20,6 +20,7 @@ input[type="text"] {
 
 .api-body code {
   @apply p-2 mt-2 mb-4 bg-ThemeBeige block;
+  overflow-x: auto;
 }
 
 .api-desc code {
@@ -46,6 +47,7 @@ input[type="text"] {
 .api-body th,
 .api-body td {
   @apply p-2 border border-grey-light;
+  @apply leading-tight;
 }
 
 .api-body table code {
diff --git a/src/css/components/4_pages/api-page.css b/src/css/components/4_pages/api-page.css
@@ -1,15 +1,12 @@
 .layout-fixed .sidebar-container {
-  position: fixed;
-  top: 64px;
-  height: calc(100vh - 64px);
   overflow-y: hidden;
+  width: 100%;
 }
 
 .api-navigation-wrapper {
-  padding: 2rem;
-  margin-right: 1rem;
+  padding: 1.2rem 1.2rem 0;
   overflow-y: scroll;
-  width: 300px;
+  width: 100%;
   height: 100%;
 }
 
@@ -21,20 +18,18 @@
 }
 
 .api-content-wrapper {
-  max-width: 60vw;
-  margin-left: 300px;
+  overflow: auto;
 }
 
 .main-wrapper {
 }
 
 .api-content {
-  max-width: 60vw;
-  margin-left: 16.66667%;
 }
 
 .api-body {
   @apply mb-8;
+  overflow: auto;
 }
 
 .endpoint-anchor {
@@ -86,6 +81,10 @@
   @apply text-BaseBlackFull no-underline;
 }
 
+.list-container {
+  display: none;
+}
+
 .response-200 {
   border-left-width: 5px;
   @apply border-BaseGreen;
@@ -105,3 +104,32 @@
   border-left-width: 1px;
   @apply border-grey-light;
 }
+
+@screen md {
+  .api-content-wrapper {
+    margin-left: 300px;
+    max-width: 60vw;
+  }
+
+  .api-content {
+    max-width: 60vw;
+    margin-left: 16.66667%;
+  }
+
+  .layout-fixed .sidebar-container {
+    height: calc(100vh - 64px);
+    position: fixed;
+    top: 64px;
+  }
+
+  .list-container {
+    display: block;
+    margin-bottom: 0;
+  }
+
+  .api-navigation-wrapper {
+    margin-right: 1rem;
+    width: 300px;
+    padding: 2rem;
+  }
+}
diff --git a/src/pages/api/v4.js b/src/pages/api/v4.js
@@ -30,13 +30,13 @@ const APIDocs = ({ data }) => {
         <div className="sidebar-container">
           <Sidebar />
         </div>
-        <div className="api-content-wrapper">
+        <div className="w-full px-4 api-content-wrapper">
           <div className="api-content mx-auto">
             <Markdown
               source={n.info.description}
               escapeHtml={false}
               renderers={{ heading: HeadingRenderer }}
-              className="mt-8 api-body"
+              className="md:mt-8 api-body"
             />
           </div>
         </div>

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ const SearchHeader = () => (`
`12`	`12`	`}`
`13`	`13`	`}
`14`	`14`	`render={data => (`
`15`		`- <header className="mb-4">`
	`15`	`+ <header className="md:mb-4">`
`16`	`16`	`<Search searchIndex={data.siteSearchIndex.index} />`
`17`	`17`	`</header>`
`18`	`18`	`)}`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ input[type="text"] {`
`20`	`20`
`21`	`21`	`.api-body code {`
`22`	`22`	`@apply p-2 mt-2 mb-4 bg-ThemeBeige block;`
	`23`	`+ overflow-x: auto;`
`23`	`24`	`}`
`24`	`25`
`25`	`26`	`.api-desc code {`
`@@ -46,6 +47,7 @@ input[type="text"] {`
`46`	`47`	`.api-body th,`
`47`	`48`	`.api-body td {`
`48`	`49`	`@apply p-2 border border-grey-light;`
	`50`	`+ @apply leading-tight;`
`49`	`51`	`}`
`50`	`52`
`51`	`53`	`.api-body table code {`