Memes

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;

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>
@@ -19,8 +17,26 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+@import '../assets/_utils.scss';
+
 div.meme-panel {
-  background-color: black;
+  @extend %center-div;
+  background-color: grey;
+  overflow: hidden;
+  width: $meme-d;
+  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>

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: 3,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 4,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 5,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 6,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 7,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 8,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 9,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 10,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 11,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 12,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
+          {
+            _id: 13,
+            url: `https://tenor.com/view/ohayo-bye-wave-gif-13911439`,
+            comments: [],
+          },
+          {
+            _id: 14,
+            url: `https://tenor.com/view/elephant-running-gif-20266814`,
+            comments: [],
+          },
         ];
       });
     })();
@@ -62,13 +126,29 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../assets/_utils.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));
+.memes-container{
+  @extend %center-div;
+  margin: 1rem;
+  padding: 1rem;
+  flex-direction: column;
+  position: relative;
+  margin-bottom: 10rem;
+  h1{
+    align-self: flex-start;
+    margin-bottom: 1rem;
+    margin-left: 4rem;
+  }
+  .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: 4rem;
+    justify-content: center;
+  }
 }
 
 </style>