From fdf60ab40252ccbab334d0372776473cf2c49c09 Mon Sep 17 00:00:00 2001
From: Karunika <karunikatrip@gmail.com>
Date: Sat, 13 Feb 2021 19:09:02 +0100
Subject: [PATCH 1/3] Lets learn CSS grids

---
 src/components/SingleMemePanel.vue |  23 +++++-
 src/views/Memes.vue                | 115 +++++++++++++++++++++++++----
 2 files changed, 123 insertions(+), 15 deletions(-)

diff --git a/src/components/SingleMemePanel.vue b/src/components/SingleMemePanel.vue
index 8ae08e4..c5454af 100644
--- a/src/components/SingleMemePanel.vue
+++ b/src/components/SingleMemePanel.vue
@@ -19,8 +19,27 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+
+$meme-d: 240px;
+
 div.meme-panel {
-  background-color: black;
+  background-color: grey;
+  overflow: hidden;
+  width: $meme-d;
+  margin: 2rem 2rem;
+  border-radius: 0.4rem;
+  img{
+    overflow: hidden;
+    object-fit: cover;
+    transition: all 0.6s ease;
+    height: $meme-d;
+    width: $meme-d;
+  }
+  &:hover{
+    img{
+      transform: scale(1.2);
+    }
+  } 
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Memes.vue b/src/views/Memes.vue
index 9d6ebe9..a6b4c8f 100644
--- a/src/views/Memes.vue
+++ b/src/views/Memes.vue
@@ -1,10 +1,13 @@
 <template>
-  <div class="meme-wrapper">
-    <Meme 
-      v-for="m in memes"
-      :key="m._id"
-      :url="m.url"
-      :comments="m.comments"/>
+  <div class="memes-container">
+    <h1>Memes</h1>
+    <div class="meme-wrapper">
+      <Meme 
+        v-for="m in memes"
+        :key="m._id"
+        :url="m.url"
+        :comments="m.comments"/>
+    </div>
   </div>
 </template>
 
@@ -35,7 +38,8 @@ export default {
         // TODO: actually fill this reponse as 
         // something that the user can know. for now, 
         // returning a mock data
-        alert(`unable to connect to server. instead, have some random gifs :)`);
+        // alert(`unable to connect to server. 
+        // instead, have some random gifs :)`);
         this.memes = [
           {
             _id: 1,
@@ -47,6 +51,66 @@ export default {
             url: `https://tenor.com/view/elephant-running-gif-20266814`,
             comments: [],
           },
+          {
+            _id: 1,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 2,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 1,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 2,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 1,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 2,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 1,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 2,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 1,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 2,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 1,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 2,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
         ];
       });
     })();
@@ -63,12 +127,37 @@ export default {
 
 <style lang="scss">
 
-.meme-wrapper {
-  // this style is not a good idea but it will do for now
-  margin: 40px;
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+$meme-d: 240px;
+
+.memes-container{
+  margin: 1rem;
+  padding: 1rem;
+  // background-color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  h1{
+    align-self: flex-start;
+    margin-bottom: 1rem;
+    margin-left: 1rem;
+  }
+  .meme-wrapper{
+    // this style is not a good idea but it will do for now
+    background-color: grey;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax($meme-d, max-content));
+    grid-gap: 1rem;
+    padding: initial;
+    justify-content: center;
+      // display: grid;
+      // grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
+      // grid-gap: 16px;
+      // padding: initial;
+      // justify-content: center;
+  }
 }
 
 </style>
\ No newline at end of file

From 9dc8d197cc77374d30841c0416fa029f1347fa8c Mon Sep 17 00:00:00 2001
From: Karunika <karunikatrip@gmail.com>
Date: Sat, 13 Feb 2021 19:34:42 +0100
Subject: [PATCH 2/3] Fixed margins

---
 src/components/SingleMemePanel.vue |  2 +-
 src/views/Memes.vue                | 34 ++++++++++++------------------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/components/SingleMemePanel.vue b/src/components/SingleMemePanel.vue
index c5454af..1fec569 100644
--- a/src/components/SingleMemePanel.vue
+++ b/src/components/SingleMemePanel.vue
@@ -27,7 +27,7 @@ div.meme-panel {
   background-color: grey;
   overflow: hidden;
   width: $meme-d;
-  margin: 2rem 2rem;
+  // margin: 2rem 2rem;
   border-radius: 0.4rem;
   img{
     overflow: hidden;
diff --git a/src/views/Memes.vue b/src/views/Memes.vue
index a6b4c8f..e3d36bd 100644
--- a/src/views/Memes.vue
+++ b/src/views/Memes.vue
@@ -52,62 +52,62 @@ export default {
             comments: [],
           },
           {
-            _id: 1,
+            _id: 3,
             url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
             comments: [],
           },
           {
-            _id: 2,
+            _id: 4,
             url: `https://tenor.com/view/elephant-running-gif-20266814`,
             comments: [],
           },
           {
-            _id: 1,
+            _id: 5,
             url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
             comments: [],
           },
           {
-            _id: 2,
+            _id: 6,
             url: `https://tenor.com/view/elephant-running-gif-20266814`,
             comments: [],
           },
           {
-            _id: 1,
+            _id: 7,
             url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
             comments: [],
           },
           {
-            _id: 2,
+            _id: 8,
             url: `https://tenor.com/view/elephant-running-gif-20266814`,
             comments: [],
           },
           {
-            _id: 1,
+            _id: 9,
             url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
             comments: [],
           },
           {
-            _id: 2,
+            _id: 10,
             url: `https://tenor.com/view/elephant-running-gif-20266814`,
             comments: [],
           },
           {
-            _id: 1,
+            _id: 11,
             url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
             comments: [],
           },
           {
-            _id: 2,
+            _id: 12,
             url: `https://tenor.com/view/elephant-running-gif-20266814`,
             comments: [],
           },
           {
-            _id: 1,
+            _id: 13,
             url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
             comments: [],
           },
           {
-            _id: 2,
+            _id: 14,
             url: `https://tenor.com/view/elephant-running-gif-20266814`,
             comments: [],
           },
@@ -132,7 +132,7 @@ $meme-d: 240px;
 .memes-container{
   margin: 1rem;
   padding: 1rem;
-  // background-color: white;
+  background-color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -149,14 +149,8 @@ $meme-d: 240px;
     width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax($meme-d, max-content));
-    grid-gap: 1rem;
-    padding: initial;
+    grid-gap: 4rem;
     justify-content: center;
-      // display: grid;
-      // grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
-      // grid-gap: 16px;
-      // padding: initial;
-      // justify-content: center;
   }
 }
 

From 42c11e899b339e64f67dba643a14e1e064e05462 Mon Sep 17 00:00:00 2001
From: Karunika <karunikatrip@gmail.com>
Date: Tue, 16 Feb 2021 21:36:33 +0100
Subject: [PATCH 3/3] smh

---
 src/assets/_utils.scss             | 10 ++++++++++
 src/components/SingleMemePanel.vue | 13 +++++--------
 src/views/Memes.vue                | 13 +++++--------
 3 files changed, 20 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/_utils.scss

diff --git a/src/assets/_utils.scss b/src/assets/_utils.scss
new file mode 100644
index 0000000..c339aa5
--- /dev/null
+++ b/src/assets/_utils.scss
@@ -0,0 +1,10 @@
+// wasnt able to globalise @extend classes :sully:
+
+%center-div{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// global variables
+$meme-d: 240px;
\ No newline at end of file
diff --git a/src/components/SingleMemePanel.vue b/src/components/SingleMemePanel.vue
index 1fec569..e4828d3 100644
--- a/src/components/SingleMemePanel.vue
+++ b/src/components/SingleMemePanel.vue
@@ -1,10 +1,8 @@
 // this should be a single meme with an upvote, downvote, and report button
 <template>
   <div class="meme-panel">
-    <ion-icon name="caret-up-outline"
-              color="red"/>
-    <ion-icon name="caret-down-outline"
-              color="blue"/>
+    <ion-icon name="caret-up-outline"/>
+    <ion-icon name="caret-down-outline"/>
     <img src="https://cdn.discordapp.com/attachments/799954350477672458/809313781360230450/testing.png"
          alt="meme image"/>
   </div>
@@ -20,14 +18,13 @@ export default {
 </script>
 
 <style lang="scss">
-
-$meme-d: 240px;
+@import '../assets/_utils.scss';
 
 div.meme-panel {
+  @extend %center-div;
   background-color: grey;
   overflow: hidden;
   width: $meme-d;
-  // margin: 2rem 2rem;
   border-radius: 0.4rem;
   img{
     overflow: hidden;
@@ -40,6 +37,6 @@ div.meme-panel {
     img{
       transform: scale(1.2);
     }
-  } 
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Memes.vue b/src/views/Memes.vue
index e3d36bd..bf9c9d1 100644
--- a/src/views/Memes.vue
+++ b/src/views/Memes.vue
@@ -126,26 +126,23 @@ export default {
 </script>
 
 <style lang="scss">
-
-$meme-d: 240px;
+@import '../assets/_utils.scss';
 
 .memes-container{
+  @extend %center-div;
   margin: 1rem;
   padding: 1rem;
-  background-color: white;
-  display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   position: relative;
+  margin-bottom: 10rem;
   h1{
     align-self: flex-start;
     margin-bottom: 1rem;
-    margin-left: 1rem;
+    margin-left: 4rem;
   }
   .meme-wrapper{
     // this style is not a good idea but it will do for now
-    background-color: grey;
+    // background-color: grey;
     width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax($meme-d, max-content));