Improved projects info ui/ux

Fixed container bp issue
muuvmuuv · Jan 16, 2020 · 84ebadd · 84ebadd
1 parent 2639268
commit 84ebadd
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 20 deletions.
diff --git a/gatsby/node/onCreateNode.js b/gatsby/node/onCreateNode.js
@@ -9,15 +9,11 @@ module.exports = async ({ node, getNode, actions }) => {
       published: true,
       status: 'wip',
       website: '',
-      role: [],
       team: [],
+      role: [],
     }
 
-    node.frontmatter = Object.assign(
-      {},
-      nodeFrontmatterDefault,
-      node.frontmatter
-    )
+    node.frontmatter = { ...nodeFrontmatterDefault, ...node.frontmatter }
 
     console.log(node.frontmatter)
 

diff --git a/src/components/DataType.jsx b/src/components/DataType.jsx
@@ -16,28 +16,60 @@ const DataType = ({ type, tooltip, position = 'top' }) => {
     case 'null':
       return (
         <span className={'mono color--orange ' + classes.join(' ')} {...attr}>
-          {type}
+          null
         </span>
       )
 
+    case 'array':
+      return (
+        <>
+          [
+          <span className={'mono color--orange ' + classes.join(' ')} {...attr}>
+            null
+          </span>
+          ]
+        </>
+      )
+
+    case 'object':
+      return (
+        <>
+          {
+            <span
+              className={'mono color--orange ' + classes.join(' ')}
+              {...attr}
+            >
+              key: null
+            </span>
+          }
+        </>
+      )
+
     case 'false':
       return (
         <span className={'mono color--red ' + classes.join(' ')} {...attr}>
-          {type}
+          false
         </span>
       )
 
     case 'true':
       return (
         <span className={'mono color--green ' + classes.join(' ')} {...attr}>
-          {type}
+          true
         </span>
       )
 
     case 'number':
       return (
         <span className={'mono color--blue ' + classes.join(' ')} {...attr}>
-          {type}
+          number
+        </span>
+      )
+
+    case 'string':
+      return (
+        <span className={'mono color--blue ' + classes.join(' ')} {...attr}>
+          string
         </span>
       )
 

diff --git a/src/components/HeroProjects.jsx b/src/components/HeroProjects.jsx
@@ -46,16 +46,24 @@ const HeroProjects = ({ item }) => (
           </li>
           <li>
             <span className="pre">Team:</span>{' '}
-            <Members list={item.team}></Members>
+            {item.team.length > 0 ? (
+              <Members list={item.team}></Members>
+            ) : (
+              <DataType tooltip="Not set" type="array"></DataType>
+            )}
           </li>
           <li>
             <span className="pre">Role:</span>{' '}
-            {item.role.map((r, i) => (
-              <span>
-                {r}
-                {i < item.role.length - 1 && ', '}
-              </span>
-            ))}
+            {item.role.length > 0 ? (
+              item.role.map((r, i) => (
+                <span key={i}>
+                  {r}
+                  {i < item.role.length - 1 && ', '}
+                </span>
+              ))
+            ) : (
+              <DataType tooltip="Not set" type="array"></DataType>
+            )}
           </li>
         </ul>
       </div>

diff --git a/src/styles/_base.scss b/src/styles/_base.scss
@@ -25,6 +25,19 @@ body {
   @include reducedMotion() {
     scroll-behavior: auto;
   }
+
+  &::before {
+    content: 'xs';
+    display: none;
+  }
+
+  @each $breakpoint, $max-width in $container-max-widths {
+    @include breakpoint-up($breakpoint) {
+      &::before {
+        content: '#{$breakpoint}';
+      }
+    }
+  }
 }
 
 pre,

diff --git a/src/styles/layouts/_container.scss b/src/styles/layouts/_container.scss
@@ -1,7 +1,8 @@
 .container {
+  width: 100%;
+  max-width: auto;
   padding-right: var(--container-padding-x);
   padding-left: var(--container-padding-x);
-  width: 100%;
   margin-right: auto;
   margin-left: auto;
 
@@ -12,10 +13,14 @@
   }
 
   &--small {
-    max-width: map-get($container-max-widths, md);
+    @include breakpoint-up(lg) {
+      max-width: map-get($container-max-widths, md);
+    }
   }
 
   &--medium {
-    max-width: map-get($container-max-widths, lg);
+    @include breakpoint-up(lg) {
+      max-width: map-get($container-max-widths, lg);
+    }
   }
 }
diff --git a/src/styles/layouts/_main.scss b/src/styles/layouts/_main.scss
@@ -13,6 +13,8 @@
     top: -80px;
     left: -40px;
     opacity: 0.05;
+    user-select: none;
+    pointer-events: none;
   }
 }