From 431463213ad8f008fb9adafc040df95fbf63d90f Mon Sep 17 00:00:00 2001
From: lostdesign <info@lost.design>
Date: Mon, 30 Sep 2019 15:42:39 +0200
Subject: [PATCH] :recycle: Adjust card/table toggle and table layout

---
 components/Sidebar.vue   |  4 ++--
 components/TableHead.vue | 38 --------------------------------------
 components/TableRow.vue  | 22 ++++++++++++++--------
 pages/_category.vue      |  7 +++----
 4 files changed, 19 insertions(+), 52 deletions(-)
 delete mode 100644 components/TableHead.vue

diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 83557cd..ce17c96 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -51,10 +51,10 @@ export default {
     display: grid;
     grid-template-columns: 1fr 1fr;
     width: min-content;
-    border: 3px;
+    border: 1px;
     border-color: #08e5ff;
     border-style: solid;
-    border-radius: 0.5rem;
+    border-radius: 0.25rem;
     overflow: hidden;
   }
   .viewToggle {
diff --git a/components/TableHead.vue b/components/TableHead.vue
deleted file mode 100644
index 6b2d76c..0000000
--- a/components/TableHead.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template lang="pug">
-  tr.tableHead
-    th.tableHead--title {{title}}
-    th.tableHead--description {{desc}}
-    th.tableHead--links {{url}}
-</template>
-
-<script>
-export default {
-  props: ["title", "desc", "url"],
-};
-</script>
-
-
-<style lang="scss" scoped>
-.tableHead {
-  background: #2d3748;
-  padding: 0.25rem;
-  transition: 0.2s ease-in-out;
-  width: 1fr;
-  display: grid;
-  grid-template-columns: minmax(150px, 2fr) 8fr 125px;
-
-  &--title {
-    color: #008190;
-  }
-
-  &--description {
-    color: #008190;
-    line-height: 1.3;
-  }
-
-  &--links {
-    cursor: pointer;
-    color: #008190;
-  }
-}
-</style>
diff --git a/components/TableRow.vue b/components/TableRow.vue
index 1930717..a397cc7 100644
--- a/components/TableRow.vue
+++ b/components/TableRow.vue
@@ -23,7 +23,9 @@ export default {
   }
 .tableRow {
   background: #2d3748;
-  padding: 0.25rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-radius: .3rem;
   transition: 0.2s ease-in-out;
   width: 1fr;
   display: grid;
@@ -31,12 +33,12 @@ export default {
 
   &--title {
     color: white;
+    font-weight: 900;
   }
 
   &--description {
     color: #008190;
     line-height: 1.3;
-		margin-right: 10px;
   }
 
   &--links {
@@ -59,22 +61,26 @@ export default {
   }
 
   &--reference {
+    font-size: 12px;
+
     &::before {
       position: absolute;
-      height: 0.9rem;
-      width: 0.9rem;
+      height: 0.95rem;
+      width: 0.95rem;
       margin-left: -1.15rem;
-      margin-top: -0.1rem;
+      margin-top: 0.3rem;
       content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggZD0iTSA0IDIgQyAzLjkwNSAyIDMuODE1NjA5NCAyLjAxNDM0MzggMy43MjQ2MDk0IDIuMDI3MzQzOCBDIDMuNDM0NjA5NCAyLjE0MzM0MzggMy4xMzk3MDMxIDIuMjU3MDkzOCAyLjg0NTcwMzEgMi4zNzEwOTM4IEMgMi4zMzQ3MDMxIDIuNzMzMDkzOCAyIDMuMzI2IDIgNCBMIDIgMTggTCA0IDE4IEwgNCA0IEwgMTggNCBMIDE4IDIgTCA0IDIgeiBNIDggNiBDIDYuODk1IDYgNiA2Ljg5NSA2IDggTCA2IDIwIEMgNiAyMS4xMDUgNi44OTUgMjIgOCAyMiBMIDIwIDIyIEMgMjEuMTA1IDIyIDIyIDIxLjEwNSAyMiAyMCBMIDIyIDggQyAyMiA2Ljg5NSAyMS4xMDUgNiAyMCA2IEwgOCA2IHogTSAxNyA4LjAwMTk1MzEgQyAxNy43NjggOC4wMDE5NTMxIDE4LjUzNjA5NCA4LjI5MzkwNjIgMTkuMTIxMDk0IDguODc4OTA2MiBDIDE5LjY4ODA5NCA5LjQ0NDkwNjMgMjAgMTAuMTk5IDIwIDExIEMgMjAgMTEuODAxIDE5LjY4ODA5NCAxMi41NTQwOTQgMTkuMTIxMDk0IDEzLjEyMTA5NCBMIDE3LjIyNDYwOSAxNS4wMTc1NzggTCAxNS44MTA1NDcgMTMuNjAzNTE2IEwgMTcuNzA3MDMxIDExLjcwNzAzMSBDIDE3Ljg5NjAzMSAxMS41MTgwMzEgMTggMTEuMjY3IDE4IDExIEMgMTggMTAuNzMzIDE3Ljg5NjAzMSAxMC40ODE5NjkgMTcuNzA3MDMxIDEwLjI5Mjk2OSBDIDE3LjMxNjAzMSA5LjkwMTk2ODcgMTYuNjgzOTY5IDkuOTAyOTY4OCAxNi4yOTI5NjkgMTAuMjkyOTY5IEwgMTQuMzkwNjI1IDEyLjE5NTMxMiBMIDE1LjgwNDY4OCAxMy42MDkzNzUgTCAxMy44MDA3ODEgMTUuNjEzMjgxIEwgMTUuMjE0ODQ0IDE3LjAyNzM0NCBMIDEzLjExOTE0MSAxOS4xMjEwOTQgQyAxMi41NTQxNDEgMTkuNjg3MDk0IDExLjgwMSAyMCAxMSAyMCBDIDEwLjE5OSAyMCA5LjQ0NDkwNjMgMTkuNjg4MDk0IDguODc4OTA2MiAxOS4xMjEwOTQgQyA4LjMxMjkwNjMgMTguNTU1MDk0IDggMTcuODAxIDggMTcgQyA4IDE2LjE5OSA4LjMxMjkwNjIgMTUuNDQ1OTA2IDguODc4OTA2MiAxNC44Nzg5MDYgTCAxMC45NzI2NTYgMTIuNzg1MTU2IEwgMTIuMzg2NzE5IDE0LjE5OTIxOSBMIDE0LjM2OTE0MSAxMi4yMTY3OTcgTCAxMi45NTUwNzggMTAuODAyNzM0IEwgMTQuODc4OTA2IDguODc4OTA2MiBDIDE1LjQ2MzkwNiA4LjI5MzkwNjIgMTYuMjMyIDguMDAxOTUzMSAxNyA4LjAwMTk1MzEgeiBNIDEyLjM3MzA0NyAxNC4yMTI4OTEgTCAxMC4yOTI5NjkgMTYuMjkyOTY5IEMgMTAuMTAzOTY5IDE2LjQ4MTk2OSAxMCAxNi43MzMgMTAgMTcgQyAxMCAxNy4yNjcgMTAuMTAzOTY5IDE3LjUxODAzMSAxMC4yOTI5NjkgMTcuNzA3MDMxIEMgMTAuNjcxOTY5IDE4LjA4NjAzMSAxMS4zMjgwMzEgMTguMDg1MDMxIDExLjcwNzAzMSAxNy43MDcwMzEgTCAxMy43ODcxMDkgMTUuNjI2OTUzIEwgMTIuMzczMDQ3IDE0LjIxMjg5MSB6IiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
     }
   }
   &--target {
+    font-size: 12px;
+
     &::before {
       position: absolute;
-      height: 0.9rem;
-      width: 0.9rem;
+      height: 0.95rem;
+      width: 0.95rem;
       margin-left: -1.15rem;
-      margin-top: -0.1rem;
+      margin-top: 0.3rem;
       content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggc3R5bGU9ImxpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDA7dGV4dC10cmFuc2Zvcm06bm9uZTtibG9jay1wcm9ncmVzc2lvbjp0Yjtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWwiIGQ9Ik0gNSAzIEMgMy45MDY5MzcyIDMgMyAzLjkwNjkzNzIgMyA1IEwgMyAxOSBDIDMgMjAuMDkzMDYzIDMuOTA2OTM3MiAyMSA1IDIxIEwgMTkgMjEgQyAyMC4wOTMwNjMgMjEgMjEgMjAuMDkzMDYzIDIxIDE5IEwgMjEgMTIgTCAxOSAxMiBMIDE5IDE5IEwgNSAxOSBMIDUgNSBMIDEyIDUgTCAxMiAzIEwgNSAzIHogTSAxNCAzIEwgMTQgNSBMIDE3LjU4NTkzOCA1IEwgOC4yOTI5Njg4IDE0LjI5Mjk2OSBMIDkuNzA3MDMxMiAxNS43MDcwMzEgTCAxOSA2LjQxNDA2MjUgTCAxOSAxMCBMIDIxIDEwIEwgMjEgMyBMIDE0IDMgeiIgZm9udC13ZWlnaHQ9IjQwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIHdoaXRlLXNwYWNlPSJub3JtYWwiIG92ZXJmbG93PSJ2aXNpYmxlIiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
     }
   }
diff --git a/pages/_category.vue b/pages/_category.vue
index d508c52..770e2b4 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -5,14 +5,12 @@
       template(v-for='resource in category.resources' )
         Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
     table(v-if="!areCardsVisible")
-      TableHead(:title="'Welcome'" :desc="'Description'" :url="'URL'")
       template(v-for='resource in category.resources' )
         TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
 </template>
 
 <script>
 import Card from "../components/Card";
-import TableHead from "../components/TableHead";
 import TableRow from "../components/TableRow";
 
 export default {
@@ -35,7 +33,7 @@ export default {
     setActiveCard(index) {
       this.activeCard = index
     },
-    async createCopyUrl(resource) {      
+    async createCopyUrl(resource) {
       try {
         const { path, cleanTitle } = resource
         await this.$copyText(`https://webgems.io${path}`)
@@ -49,12 +47,13 @@ export default {
   created() {
     this.activeCard = this.$route.query.card || ''
   },
-  components: { Card, TableHead, TableRow }
+  components: { Card, TableRow }
 };
 </script>
 
 <style lang="scss" scoped>
 table {
 	width: 100%;
+  table-layout: fixed;
 }
 </style>