From b936bf1ab31aa9bb6c7182d658760d5dad659a29 Mon Sep 17 00:00:00 2001
From: Kevin <kevinsebastianate@hotmail.com>
Date: Fri, 6 Sep 2019 13:23:43 +0200
Subject: [PATCH] .cardsActive -> &Active in sass, rename variable names

---
 components/Card.vue    |  8 ++++----
 components/Sidebar.vue | 12 ++++++------
 pages/_category.vue    |  8 ++++----
 store/Sidebar.js       | 10 +++++-----
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/components/Card.vue b/components/Card.vue
index 7e24308..bb7de71 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -16,10 +16,6 @@ export default {
 
 
 <style lang="scss" scoped>
-.cardActive {
-    box-shadow:inset 0px 0px 0px 3px #08e5ff;
-  }
-
 .card {
   background: #2D3748;
   border-radius: .3rem;
@@ -29,6 +25,10 @@ export default {
   flex-direction: column;
   position: relative;
 
+  &Active {
+    box-shadow:inset 0px 0px 0px 3px #08e5ff;
+  }
+
   &--reference {
     cursor: pointer;
   }
diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 71fd759..83557cd 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -4,9 +4,9 @@
       template(v-for='category in categories')
         //- nuxt-link(:to='$i18n.path(category.slug)') {{ category.title }}
         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
+      div(class="toggleWrapper" @click="toggleCardsVisible")
+        div(class="viewToggle" :class="{active: areCardsVisible}") Cards
+        div(class="viewToggle" :class="{active: !areCardsVisible}") Table
 </template>
 
 <script>
@@ -19,8 +19,8 @@ export default {
     };
   },
   computed: {
-    cardsShown() {
-      return this.$store.getters['Sidebar/isCardsShown']
+    areCardsVisible() {
+      return this.$store.getters['Sidebar/areCardsVisible']
     }
   },
   created() {
@@ -28,7 +28,7 @@ export default {
   },
   methods: {
     ...mapMutations({
-      toggleCardsShown: "Sidebar/toggleCardsShown"
+      toggleCardsVisible: "Sidebar/toggleCardsVisible"
     })
   }
 };
diff --git a/pages/_category.vue b/pages/_category.vue
index aaf7812..890f645 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
   div
     h1 {{ category.title }}
-    .cards(v-if="cardsShown")
+    .cards(v-if="areCardsVisible")
       template(v-for='resource in category.resources' )
         Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.title')
-    table(v-if="!cardsShown")
+    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.title')
@@ -24,8 +24,8 @@ export default {
     };
   },
   computed: {
-    cardsShown() {
-      return this.$store.getters['Sidebar/isCardsShown']
+    areCardsVisible() {
+      return this.$store.getters['Sidebar/areCardsVisible']
     },
     category() {
       const category = this.$store.getters['data/sortByTitle'](this.categoryRouteTitle)
diff --git a/store/Sidebar.js b/store/Sidebar.js
index 8627c67..b47efa3 100644
--- a/store/Sidebar.js
+++ b/store/Sidebar.js
@@ -1,14 +1,14 @@
 export const state = () => ({
-  cardsShown: true
+  areCardsVisible: true
 })
 
 export const getters = {
-  isCardsShown: state => state.cardsShown
+  areCardsVisible: state => state.areCardsVisible
 }
 
 export const mutations = {
-  toggleCardsShown(state) {
-    if (process.browser) localStorage.setItem('cardsShown', !state.cardsShown)
-    state.cardsShown = !state.cardsShown
+  toggleCardsVisible(state) {
+    if (process.browser) localStorage.setItem('areCardsVisible', !state.areCardsVisible)
+    state.areCardsVisible = !state.areCardsVisible
   }
 }