fix ParamsTable responsive for docs

heyjul3s · Jan 2, 2021 · fcfbac6 · fcfbac6
1 parent 30480d3
commit fcfbac6
Showing 1 changed file with 49 additions and 39 deletions.
diff --git a/docs/components/Code/ParamsTable.tsx b/docs/components/Code/ParamsTable.tsx
@@ -1,15 +1,11 @@
 import React from 'react';
 import { FlexRow, FlexCol } from 'artifak';
-import {
-  H4,
-  Paragraph,
-  Strong,
-  SmallParagraph,
-  SmallLead
-} from '../Typography';
-import { paddingBottom } from 'styled-system';
+import { H4, Paragraph, SmallParagraph, SmallLead } from '../Typography';
+import { useMatchMedia } from '../../hooks';
 
 export function ParamsTable({ APIname, APItypes, cells }) {
+  const isMobile = useMatchMedia('(any-hover: none)');
+
   return (
     <div
       style={{
@@ -21,6 +17,7 @@ export function ParamsTable({ APIname, APItypes, cells }) {
       <H4 display="inline-block" verticalAlign="middle">
         {APIname} &nbsp;
       </H4>
+
       <SmallParagraph
         display="inline-block"
         verticalAlign="middle"
@@ -31,44 +28,57 @@ export function ParamsTable({ APIname, APItypes, cells }) {
 
       <hr style={{ marginBottom: '1.5rem' }} />
 
-      <FlexRow>
-        <FlexCol columnSize={[12, 2]} gutterWidth={0}>
-          <SmallLead>Name</SmallLead>
-        </FlexCol>
-        <FlexCol columnSize={[12, 3]} gutterWidth={0}>
-          <SmallLead>Type</SmallLead>
-        </FlexCol>
-        <FlexCol columnSize={[12, 2]} gutterWidth={0}>
-          <SmallLead>Default</SmallLead>
-        </FlexCol>
-        <FlexCol columnSize={[12, 5]} gutterWidth={0}>
-          <SmallLead>Description</SmallLead>
-        </FlexCol>
-      </FlexRow>
+      {!isMobile && (
+        <FlexRow>
+          <FlexCol columnSize={[12, 2]} gutterWidth={0}>
+            <SmallLead>Name</SmallLead>
+          </FlexCol>
+          <FlexCol columnSize={[12, 3]} gutterWidth={0}>
+            <SmallLead>Type</SmallLead>
+          </FlexCol>
+          <FlexCol columnSize={[12, 2]} gutterWidth={0}>
+            <SmallLead>Default</SmallLead>
+          </FlexCol>
+          <FlexCol columnSize={[12, 5]} gutterWidth={0}>
+            <SmallLead>Description</SmallLead>
+          </FlexCol>
+        </FlexRow>
+      )}
 
-      {cells.map(cell => {
+      {cells.map((cell, i) => {
         const { name, type, defaultValue, content } = cell;
 
         return (
-          <FlexRow>
-            <FlexCol columnSize={[12, 2]} gutterWidth={0} pb={'1em'}>
-              <Paragraph mb={'0.15rem'}>
-                <Strong>{name}</Strong>
-              </Paragraph>
-            </FlexCol>
+          <>
+            <FlexRow>
+              <FlexCol columnSize={[12, 2]} gutterWidth={0} pb={'1em'}>
+                {isMobile && <SmallLead>Name</SmallLead>}
+                <Paragraph mb={'0.15rem'}>{name}</Paragraph>
+              </FlexCol>
+
+              <FlexCol columnSize={[12, 3]} gutterWidth={0} pb={'1em'}>
+                {isMobile && <SmallLead>Type</SmallLead>}
+                <SmallParagraph mb={'0.15rem'}>{type}</SmallParagraph>
+              </FlexCol>
 
-            <FlexCol columnSize={[12, 3]} gutterWidth={0} pb={'1em'}>
-              <SmallParagraph mb={'0.15rem'}>{type}</SmallParagraph>
-            </FlexCol>
+              <FlexCol columnSize={[12, 2]} gutterWidth={0} pb={'1em'}>
+                {isMobile && <SmallLead>Default</SmallLead>}
+                <Paragraph mb={'0.15rem'}>{defaultValue}</Paragraph>
+              </FlexCol>
 
-            <FlexCol columnSize={[12, 2]} gutterWidth={0} pb={'1em'}>
-              <Paragraph mb={'0.15rem'}>{defaultValue}</Paragraph>
-            </FlexCol>
+              <FlexCol columnSize={[12, 5]} gutterWidth={0} pb={'1em'}>
+                {isMobile && <SmallLead>Description</SmallLead>}
+                <Paragraph mb={'0.15rem'}>{content}</Paragraph>
+              </FlexCol>
+            </FlexRow>
 
-            <FlexCol columnSize={[12, 5]} gutterWidth={0} pb={'1em'}>
-              <Paragraph mb={'0.15rem'}>{content}</Paragraph>
-            </FlexCol>
-          </FlexRow>
+            {isMobile && i < cells.length - 1 && (
+              <>
+                <hr />
+                <br />
+              </>
+            )}
+          </>
         );
       })}
     </div>