From 1397e0bebc4428304c615ecea3ae9200f6dbd6e4 Mon Sep 17 00:00:00 2001
From: Haydon Curteis-Lateo <haydon1900@gmail.com>
Date: Fri, 4 Oct 2019 11:18:47 +0100
Subject: [PATCH 1/6] Original fade in transitions, PR now made into dev.

---
 layouts/default.vue | 29 +++++++++++++++++++++++++++++
 pages/_category.vue | 25 ++++++++++++++++++-------
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 52175e3..463418e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -99,6 +99,35 @@ h1 {
   grid-gap: 1rem;
 }
 
+// Fade in title and cards and rows
+.fade-title {
+  &-enter {
+    opacity: 0;
+
+    &-to {
+      opacity: 1;
+    }
+
+    &-active {
+       transition: opacity .1s ease-in-out;
+    }
+  }
+}
+
+.fade-card {
+  &-enter {
+    opacity: 0;
+
+    &-to {
+      opacity: 1;
+    }
+
+    &-active {
+       transition: opacity .1s ease-in-out;
+    }
+  }
+}
+
 
 @media (max-width: 400px) {
   .layout {
diff --git a/pages/_category.vue b/pages/_category.vue
index 770e2b4..9f505e0 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -1,12 +1,15 @@
 <template lang="pug">
   div
-    h1 {{ category.title }}
-    .cards(v-if="areCardsVisible")
-      template(v-for='resource in category.resources' )
-        Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
-    table(v-if="!areCardsVisible")
-      template(v-for='resource in category.resources' )
-        TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+    transition(name="fade-title" @after-enter="afterEnter")
+      h1(v-if="showTitle") {{ category.title }}
+    transition(name="fade-card")
+      .cards(v-if="areCardsVisible && showCards")
+        template(v-for='resource in category.resources' )
+          Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+    transition(name="fade-card")
+      table(v-if="!areCardsVisible && showCards")
+        template(v-for='resource in category.resources' )
+          TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
 </template>
 
 <script>
@@ -19,6 +22,8 @@ export default {
       categoryRouteTitle: this.$route.params.category,
       index: '',
       activeCard: '',
+      showTitle: false,
+      showCards: false,
     };
   },
   computed: {
@@ -42,8 +47,14 @@ export default {
       } catch (e) {
         console.error(e);
       }
+    },
+    afterEnter(el) {
+      this.showCards = true;
     }
   },
+  mounted() {
+    this.showTitle = true;
+  },
   created() {
     this.activeCard = this.$route.query.card || ''
   },

From e67efc027e594b2dd874b2722edf34425cd1737b Mon Sep 17 00:00:00 2001
From: Haydon Curteis-Lateo <haydon1900@gmail.com>
Date: Fri, 4 Oct 2019 11:22:26 +0100
Subject: [PATCH 2/6] Revert "Original fade in transitions, PR now made into
 dev."

This reverts commit 1397e0bebc4428304c615ecea3ae9200f6dbd6e4.
---
 layouts/default.vue | 29 -----------------------------
 pages/_category.vue | 25 +++++++------------------
 2 files changed, 7 insertions(+), 47 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 463418e..52175e3 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -99,35 +99,6 @@ h1 {
   grid-gap: 1rem;
 }
 
-// Fade in title and cards and rows
-.fade-title {
-  &-enter {
-    opacity: 0;
-
-    &-to {
-      opacity: 1;
-    }
-
-    &-active {
-       transition: opacity .1s ease-in-out;
-    }
-  }
-}
-
-.fade-card {
-  &-enter {
-    opacity: 0;
-
-    &-to {
-      opacity: 1;
-    }
-
-    &-active {
-       transition: opacity .1s ease-in-out;
-    }
-  }
-}
-
 
 @media (max-width: 400px) {
   .layout {
diff --git a/pages/_category.vue b/pages/_category.vue
index 9f505e0..770e2b4 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -1,15 +1,12 @@
 <template lang="pug">
   div
-    transition(name="fade-title" @after-enter="afterEnter")
-      h1(v-if="showTitle") {{ category.title }}
-    transition(name="fade-card")
-      .cards(v-if="areCardsVisible && showCards")
-        template(v-for='resource in category.resources' )
-          Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
-    transition(name="fade-card")
-      table(v-if="!areCardsVisible && showCards")
-        template(v-for='resource in category.resources' )
-          TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+    h1 {{ category.title }}
+    .cards(v-if="areCardsVisible")
+      template(v-for='resource in category.resources' )
+        Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+    table(v-if="!areCardsVisible")
+      template(v-for='resource in category.resources' )
+        TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
 </template>
 
 <script>
@@ -22,8 +19,6 @@ export default {
       categoryRouteTitle: this.$route.params.category,
       index: '',
       activeCard: '',
-      showTitle: false,
-      showCards: false,
     };
   },
   computed: {
@@ -47,14 +42,8 @@ export default {
       } catch (e) {
         console.error(e);
       }
-    },
-    afterEnter(el) {
-      this.showCards = true;
     }
   },
-  mounted() {
-    this.showTitle = true;
-  },
   created() {
     this.activeCard = this.$route.query.card || ''
   },

From 9d14c554e29f828c06abd7372335c505a246da17 Mon Sep 17 00:00:00 2001
From: Haydon Curteis-Lateo <haydon1900@gmail.com>
Date: Fri, 4 Oct 2019 11:18:47 +0100
Subject: [PATCH 3/6] Original fade in transitions, PR now made into dev.

---
 layouts/default.vue | 29 +++++++++++++++++++++++++++++
 pages/_category.vue | 25 ++++++++++++++++++-------
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 52175e3..463418e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -99,6 +99,35 @@ h1 {
   grid-gap: 1rem;
 }
 
+// Fade in title and cards and rows
+.fade-title {
+  &-enter {
+    opacity: 0;
+
+    &-to {
+      opacity: 1;
+    }
+
+    &-active {
+       transition: opacity .1s ease-in-out;
+    }
+  }
+}
+
+.fade-card {
+  &-enter {
+    opacity: 0;
+
+    &-to {
+      opacity: 1;
+    }
+
+    &-active {
+       transition: opacity .1s ease-in-out;
+    }
+  }
+}
+
 
 @media (max-width: 400px) {
   .layout {
diff --git a/pages/_category.vue b/pages/_category.vue
index 770e2b4..9f505e0 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -1,12 +1,15 @@
 <template lang="pug">
   div
-    h1 {{ category.title }}
-    .cards(v-if="areCardsVisible")
-      template(v-for='resource in category.resources' )
-        Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
-    table(v-if="!areCardsVisible")
-      template(v-for='resource in category.resources' )
-        TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+    transition(name="fade-title" @after-enter="afterEnter")
+      h1(v-if="showTitle") {{ category.title }}
+    transition(name="fade-card")
+      .cards(v-if="areCardsVisible && showCards")
+        template(v-for='resource in category.resources' )
+          Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+    transition(name="fade-card")
+      table(v-if="!areCardsVisible && showCards")
+        template(v-for='resource in category.resources' )
+          TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
 </template>
 
 <script>
@@ -19,6 +22,8 @@ export default {
       categoryRouteTitle: this.$route.params.category,
       index: '',
       activeCard: '',
+      showTitle: false,
+      showCards: false,
     };
   },
   computed: {
@@ -42,8 +47,14 @@ export default {
       } catch (e) {
         console.error(e);
       }
+    },
+    afterEnter(el) {
+      this.showCards = true;
     }
   },
+  mounted() {
+    this.showTitle = true;
+  },
   created() {
     this.activeCard = this.$route.query.card || ''
   },

From 6f5fd52e8924c9ee3061304ee2ebce87ef911186 Mon Sep 17 00:00:00 2001
From: Haydon Curteis-Lateo <haydon1900@gmail.com>
Date: Fri, 4 Oct 2019 11:42:08 +0100
Subject: [PATCH 4/6] Change

---
 pages/_category.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/_category.vue b/pages/_category.vue
index 9f505e0..0a8c69e 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -49,6 +49,7 @@ export default {
       }
     },
     afterEnter(el) {
+      console.log('changes');
       this.showCards = true;
     }
   },

From 06fbe259fd1ec337e5e90f8b3dc66dba9a9b53bc Mon Sep 17 00:00:00 2001
From: Haydon Curteis-Lateo <haydon1900@gmail.com>
Date: Fri, 4 Oct 2019 11:47:06 +0100
Subject: [PATCH 5/6] Original Fade-In Transitions

---
 pages/_category.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/_category.vue b/pages/_category.vue
index f5dbc4a..0ae701d 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -53,7 +53,6 @@ export default {
       }
     },
     afterEnter(el) {
-      console.log('changes');
       this.showCards = true;
     }
   },

From 927f80436eb213129ec99e8f9f102f2b8a6fe1f3 Mon Sep 17 00:00:00 2001
From: Haydon Curteis-Lateo <haydon1900@gmail.com>
Date: Fri, 4 Oct 2019 14:24:32 +0100
Subject: [PATCH 6/6] Necessary problems fixed

---
 pages/_category.vue | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/pages/_category.vue b/pages/_category.vue
index 0ae701d..cbbf4f5 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -25,7 +25,7 @@ export default {
       activeCard: '',
       showTitle: false,
       showCards: false,
-    };
+    }
   },
   computed: {
     areCardsVisible() {
@@ -38,6 +38,9 @@ export default {
   created() {
     this.activeCard = this.$route.query.card || ''
   },
+  mounted() {
+    this.showTitle = true
+  },
   methods: {
     setActiveCard(index) {
       this.activeCard = index
@@ -52,15 +55,9 @@ export default {
         console.error(e)
       }
     },
-    afterEnter(el) {
-      this.showCards = true;
-    }
-  },
-  mounted() {
-    this.showTitle = true;
-  },
-  created() {
-    this.activeCard = this.$route.query.card || ''
+    afterEnter() {
+      this.showCards = true
+    },
   },
 }
 </script>