Merge pull request #111 from karnthis/karn-dev

Feature: Table/Card View Switch

components/Card.vue

@@ -1,58 +1,25 @@
 <template lang="pug">
-  .card(:class="active")
+  .card(:class="{ cardActive: isActive }")
-    p.card--title {{title}}
+    p.card--title {{resource.title}}
-    p.card--description {{desc}}
+    p.card--description {{resource.desc}}
     .card--links
-      a.card--reference(@click='createCopyUrl') Copy
+      a.card--reference(@click='createCopyUrl(resource)') Copy
       br
-      a.card--target(:href="url" :target='title' rel='noreferrer') Open
+      a.card--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
 </template>
 
 <script>
 export default {
-  props: ['title', 'desc', 'url'],
+  props: ['resource', 'isActive', 'createCopyUrl'],
-  data(){
-    return {
-      active:''
-    }
-  },
-  methods: {
-     async createCopyUrl() {
-      try {
-        let currentPath = this.$router.history.current.path
-        let reference =  this.createReferenceTag(this.$props.title)
-
-        await this.$copyText(`https://webgems.io${currentPath}?card=${reference}`)
-        this.$router.push(`${currentPath}?card=${reference}`)
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    createReferenceTag(tag){
-      return tag.replace(/ /g, '').toLowerCase()
-    },
-    checkReference(){
-      const query = this.$route.query.card
-      const title = this.createReferenceTag(this.$props.title)
-
-      this.active = title === query
-        ? 'card--active'
-        : ''
-    },
-  },
-  mounted() {
-    this.checkReference();
-  },
-  watch: {
-    '$route': function() {
-      this.checkReference();
-    }
-  }
 }
 </script>
 
 
 <style lang="scss" scoped>
+.cardActive {
+    box-shadow:inset 0px 0px 0px 3px #08e5ff;
+  }
+
 .card {
   background: #2D3748;
   border-radius: .3rem;
@@ -62,10 +29,6 @@ export default {
   flex-direction: column;
   position: relative;
 
-  &--active {
-    box-shadow:inset 0px 0px 0px 3px #08e5ff;
-  }
-
   &--reference {
     cursor: pointer;
   }

components/Sidebar.vue

@@ -3,21 +3,35 @@
     .sidebar
       template(v-for='category in categories')
         nuxt-link(:to='category.slug') {{ category.title }}
+      div(class="toggleWrapper" @click="toggleCardsShown")
+        div(class="viewToggle" :class="{active: cardsShown}") Cards
+        div(class="viewToggle" :class="{active: !cardsShown}") Table
 </template>
 
 <script>
-import store from '../store.json'
+import store from "../store.json";
+import { mapMutations } from "vuex";
 
 export default {
   data() {
     return {
-      categories: [{ slug: '', title: '' }],
+      categories: [{ slug: "", title: "" }]
+    };
+  },
+  computed: {
+    cardsShown() {
+      return this.$store.state.Sidebar.cardsShown;
     }
   },
   created() {
-    this.categories = store.map(({ title, slug }) => ({ title, slug }))
+    this.categories = store.map(({ title, slug }) => ({ title, slug }));
+  },
+  methods: {
+    ...mapMutations({
+      toggleCardsShown: "Sidebar/toggleCardsShown"
+    })
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -30,6 +44,27 @@ export default {
     padding: 0.5rem 1rem 0.5rem 1rem;
     font-weight: 600;
   }
+  div {
+    cursor: pointer;
+  }
+  .toggleWrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    width: min-content;
+    border: 3px;
+    border-color: #08e5ff;
+    border-style: solid;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+  .viewToggle {
+    padding: 0 0.2rem;
+    color: #008190;
+  }
+  .active {
+    background-color: #08e5ff;
+    color: #232331;
+  }
 }
 
 @media (max-width: 400px) {

components/TableHead.vue

@@ -0,0 +1,38 @@
+<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>

components/TableRow.vue

@@ -0,0 +1,82 @@
+<template lang="pug">
+  tr.tableRow(:class="{ rowActive: isActive }")
+    td.tableRow--title {{resource.title}}
+    td.tableRow--description {{resource.desc}}
+    td.tableRow--links
+      tr
+        td
+          a.tableRow--reference(@click='createCopyUrl(resource)') Copy
+        td
+          a.tableRow--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
+</template>
+
+<script>
+export default {
+  props: ['resource', 'isActive', 'createCopyUrl'],
+};
+</script>
+
+
+<style lang="scss" scoped>
+.rowActive {
+    box-shadow:inset 0px 0px 0px 3px #08e5ff;
+  }
+.tableRow {
+  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: white;
+  }
+
+  &--description {
+    color: #008190;
+    line-height: 1.3;
+		margin-right: 10px;
+  }
+
+  &--links {
+    cursor: pointer;
+
+    tr {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    img {
+      width: 1rem;
+      margin-left: 0.5rem;
+    }
+
+    &:hover::before {
+      opacity: 0.5;
+    }
+  }
+
+  &--reference {
+    &::before {
+      position: absolute;
+      height: 0.9rem;
+      width: 0.9rem;
+      margin-left: -1.15rem;
+      margin-top: -0.1rem;
+      content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggZD0iTSA0IDIgQyAzLjkwNSAyIDMuODE1NjA5NCAyLjAxNDM0MzggMy43MjQ2MDk0IDIuMDI3MzQzOCBDIDMuNDM0NjA5NCAyLjE0MzM0MzggMy4xMzk3MDMxIDIuMjU3MDkzOCAyLjg0NTcwMzEgMi4zNzEwOTM4IEMgMi4zMzQ3MDMxIDIuNzMzMDkzOCAyIDMuMzI2IDIgNCBMIDIgMTggTCA0IDE4IEwgNCA0IEwgMTggNCBMIDE4IDIgTCA0IDIgeiBNIDggNiBDIDYuODk1IDYgNiA2Ljg5NSA2IDggTCA2IDIwIEMgNiAyMS4xMDUgNi44OTUgMjIgOCAyMiBMIDIwIDIyIEMgMjEuMTA1IDIyIDIyIDIxLjEwNSAyMiAyMCBMIDIyIDggQyAyMiA2Ljg5NSAyMS4xMDUgNiAyMCA2IEwgOCA2IHogTSAxNyA4LjAwMTk1MzEgQyAxNy43NjggOC4wMDE5NTMxIDE4LjUzNjA5NCA4LjI5MzkwNjIgMTkuMTIxMDk0IDguODc4OTA2MiBDIDE5LjY4ODA5NCA5LjQ0NDkwNjMgMjAgMTAuMTk5IDIwIDExIEMgMjAgMTEuODAxIDE5LjY4ODA5NCAxMi41NTQwOTQgMTkuMTIxMDk0IDEzLjEyMTA5NCBMIDE3LjIyNDYwOSAxNS4wMTc1NzggTCAxNS44MTA1NDcgMTMuNjAzNTE2IEwgMTcuNzA3MDMxIDExLjcwNzAzMSBDIDE3Ljg5NjAzMSAxMS41MTgwMzEgMTggMTEuMjY3IDE4IDExIEMgMTggMTAuNzMzIDE3Ljg5NjAzMSAxMC40ODE5NjkgMTcuNzA3MDMxIDEwLjI5Mjk2OSBDIDE3LjMxNjAzMSA5LjkwMTk2ODcgMTYuNjgzOTY5IDkuOTAyOTY4OCAxNi4yOTI5NjkgMTAuMjkyOTY5IEwgMTQuMzkwNjI1IDEyLjE5NTMxMiBMIDE1LjgwNDY4OCAxMy42MDkzNzUgTCAxMy44MDA3ODEgMTUuNjEzMjgxIEwgMTUuMjE0ODQ0IDE3LjAyNzM0NCBMIDEzLjExOTE0MSAxOS4xMjEwOTQgQyAxMi41NTQxNDEgMTkuNjg3MDk0IDExLjgwMSAyMCAxMSAyMCBDIDEwLjE5OSAyMCA5LjQ0NDkwNjMgMTkuNjg4MDk0IDguODc4OTA2MiAxOS4xMjEwOTQgQyA4LjMxMjkwNjMgMTguNTU1MDk0IDggMTcuODAxIDggMTcgQyA4IDE2LjE5OSA4LjMxMjkwNjIgMTUuNDQ1OTA2IDguODc4OTA2MiAxNC44Nzg5MDYgTCAxMC45NzI2NTYgMTIuNzg1MTU2IEwgMTIuMzg2NzE5IDE0LjE5OTIxOSBMIDE0LjM2OTE0MSAxMi4yMTY3OTcgTCAxMi45NTUwNzggMTAuODAyNzM0IEwgMTQuODc4OTA2IDguODc4OTA2MiBDIDE1LjQ2MzkwNiA4LjI5MzkwNjIgMTYuMjMyIDguMDAxOTUzMSAxNyA4LjAwMTk1MzEgeiBNIDEyLjM3MzA0NyAxNC4yMTI4OTEgTCAxMC4yOTI5NjkgMTYuMjkyOTY5IEMgMTAuMTAzOTY5IDE2LjQ4MTk2OSAxMCAxNi43MzMgMTAgMTcgQyAxMCAxNy4yNjcgMTAuMTAzOTY5IDE3LjUxODAzMSAxMC4yOTI5NjkgMTcuNzA3MDMxIEMgMTAuNjcxOTY5IDE4LjA4NjAzMSAxMS4zMjgwMzEgMTguMDg1MDMxIDExLjcwNzAzMSAxNy43MDcwMzEgTCAxMy43ODcxMDkgMTUuNjI2OTUzIEwgMTIuMzczMDQ3IDE0LjIxMjg5MSB6IiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
+    }
+  }
+  &--target {
+    &::before {
+      position: absolute;
+      height: 0.9rem;
+      width: 0.9rem;
+      margin-left: -1.15rem;
+      margin-top: -0.1rem;
+      content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggc3R5bGU9ImxpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDA7dGV4dC10cmFuc2Zvcm06bm9uZTtibG9jay1wcm9ncmVzc2lvbjp0Yjtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWwiIGQ9Ik0gNSAzIEMgMy45MDY5MzcyIDMgMyAzLjkwNjkzNzIgMyA1IEwgMyAxOSBDIDMgMjAuMDkzMDYzIDMuOTA2OTM3MiAyMSA1IDIxIEwgMTkgMjEgQyAyMC4wOTMwNjMgMjEgMjEgMjAuMDkzMDYzIDIxIDE5IEwgMjEgMTIgTCAxOSAxMiBMIDE5IDE5IEwgNSAxOSBMIDUgNSBMIDEyIDUgTCAxMiAzIEwgNSAzIHogTSAxNCAzIEwgMTQgNSBMIDE3LjU4NTkzOCA1IEwgOC4yOTI5Njg4IDE0LjI5Mjk2OSBMIDkuNzA3MDMxMiAxNS43MDcwMzEgTCAxOSA2LjQxNDA2MjUgTCAxOSAxMCBMIDIxIDEwIEwgMjEgMyBMIDE0IDMgeiIgZm9udC13ZWlnaHQ9IjQwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIHdoaXRlLXNwYWNlPSJub3JtYWwiIG92ZXJmbG93PSJ2aXNpYmxlIiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
+    }
+  }
+}
+</style>

package-lock.json

@@ -5764,9 +5764,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.14",
+      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
@@ -6064,9 +6064,9 @@
       }
     },
     "mixin-deep": {
-      "version": "1.3.1",
+      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
-      "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
       "requires": {
         "for-in": "^1.0.2",
         "is-extendable": "^1.0.1"
@@ -8991,9 +8991,9 @@
       "dev": true
     },
     "set-value": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-      "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
       "requires": {
         "extend-shallow": "^2.0.1",
         "is-extendable": "^0.1.1",
@@ -9619,13 +9619,13 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
     },
     "tar": {
-      "version": "2.2.1",
+      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
-      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
       "dev": true,
       "requires": {
         "block-stream": "*",
-        "fstream": "^1.0.2",
+        "fstream": "^1.0.12",
         "inherits": "2"
       }
     },
@@ -9982,35 +9982,14 @@
       "integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw=="
     },
     "union-value": {
-      "version": "1.0.0",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-      "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
       "requires": {
         "arr-union": "^3.1.0",
         "get-value": "^2.0.6",
         "is-extendable": "^0.1.1",
-        "set-value": "^0.4.3"
+        "set-value": "^2.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "set-value": {
-          "version": "0.4.3",
-          "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
-          "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-extendable": "^0.1.1",
-            "is-plain-object": "^2.0.1",
-            "to-object-path": "^0.3.0"
-          }
-        }
       }
     },
     "uniq": {

pages/_category.vue

@@ -1,27 +1,76 @@
 <template lang="pug">
   div
     h1 {{ category.title }}
-    .cards
+    .cards(v-if="cardsShown")
-      template(v-for='resource in category.resources')
+      template
-        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
+        div(v-for='resource in category.resources' :key='resource.title')
+          Card(:resource='resource' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.title')
+    table(v-if="!cardsShown")
+      TableHead(:title="'Welcome'" :desc="'Description'" :url="'URL'")
+      template
+        div(v-for='resource in category.resources' :key='resource.title')
+          TableRow(:resource='resource' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.title')
 </template>
 
 <script>
-import store from '../store.json'
+import store from "../store.json";
-import Card from '../components/Card'
+import Card from "../components/Card";
+import TableHead from "../components/TableHead";
+import TableRow from "../components/TableRow";
 
 export default {
-  data () {
+  data() {
     return {
       categoryRouteTitle: this.$route.params.category,
       categories: store,
-    }
+      index: '',
+      activeCard: ''
+    };
   },
   computed: {
+    cardsShown() {
+      return this.$store.state.Sidebar.cardsShown;
+    },
     category() {
-      return this.categories.find(category => category.title.toLowerCase() === this.categoryRouteTitle.toLowerCase())
+      const category = this.categories.find(
+        category =>
+          category.title.toLowerCase() === this.categoryRouteTitle.toLowerCase()
+      );
+      const pagePath = this.$router.history.current.path
+      const query = this.$route.query.card
+      for (const resource of category.resources) {
+        resource.cleanTitle = resource.title.replace(/ /g, '').toLowerCase()
+        resource.path = `${pagePath}?card=${resource.cleanTitle}`
+        resource.active = (resource.cleanTitle === query) ? 'card--active' : ''
+      }
+      return category
+    },
+  },
+  methods: {
+    onToggle(index) {
+      if (this.activeCard === index) {
+        this.activeCard = null;
+      } else {
+        this.activeCard = index;
+      }
+    },
+    async createCopyUrl(resource) {      
+      try {
+        const { path, title } = resource
+        await this.$copyText(`https://webgems.io${path}`)
+        this.onToggle(title)
+        this.$router.push(path)
+      } catch (e) {
+        console.error(e);
+      }
     }
   },
-  components: { Card },
+  components: { Card, TableHead, TableRow }
-}
+};
 </script>
+
+<style lang="scss" scoped>
+table {
+	width: 100%;
+}
+</style>

store/Sidebar.js

@@ -0,0 +1,11 @@
+export const state = () => ({
+  cardsShown: true
+})
+
+export const mutations = {
+  toggleCardsShown(state) {
+    console.log(state.cardsShown)
+    if (process.browser) localStorage.setItem('cardsShown', !state.cardsShown)
+    state.cardsShown = !state.cardsShown
+  }
+}

store/index.js

@@ -0,0 +1,7 @@
+export const state = () => ({
+
+})
+
+export const mutations = {
+
+}