:recycle: readding card and header components

frontend/src/components/TinderCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tinder__card">
     <div class="tinder__card__container">
-      <vue-swing
+      <div
         v-for="user in users"
         :key="user.id"
         @throwout="swipped(user)"
@@ -16,7 +16,7 @@
             <h3>{{ user.name }}</h3>
           </div>
         </div>
-      </vue-swing>
+      </div>
 
       <div class="swipe__icons">
         // Icons
@@ -50,7 +50,7 @@ export default {
   data() {
     return {
       config: {
-        allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
+        // allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
         minThrowOutDistance: 250,
         maxThrowOutDistance: 300,
       },
@@ -89,69 +89,67 @@ export default {
   },
 };
 </script>
-<style scoped>
-.card {
-  position: relative;
-  background-color: #fff;
-  width: 250px;
-  padding: 20px;
-  max-width: 85vw;
-  height: 50vh;
-  border-radius: 9px;
-  background-size: cover;
-  background-position: center;
-}
-.tinder__card__container {
-  display: flex;
-  justify-content: center;
-  margin-top: 10vh;
-}
-.swipe {
-  position: absolute;
-}
-.card__content {
-  width: 100%;
-  height: 100%;
-}
-.card h3 {
-  position: absolute;
-  bottom: 0;
-  margin: 10px;
-  color: #fff;
+<style lang="postcss">
+.card
+  position: relative
+  background-color: #fff
+  width: 250px
+  padding: 20px
+  max-width: 85vw
+  height: 50vh
+  border-radius: 9px
+  background-size: cover
+  background-position: center
+
+.tinder__card__container
+  display: flex
+  justify-content: center
+  margin-top: 10vh
+
+.swipe
+  position: absolute
+
+.card__content
+  width: 100%
+  height: 100%
+
+.card h3
+  position: absolute
+  bottom: 0
+  margin: 10px
+  color: #fff
   background: linear-gradient(
     109deg,
     rgba(0, 0, 0, 0.5) 0%,
     rgba(0, 0, 0, 0) 100%
-  );
-  border-radius: 9px;
-  padding: 5px;
-}
-.swipe__icons__container {
-  display: flex;
-  justify-content: center;
-}
-.swipe__icons {
-  position: fixed;
-  bottom: 5vh;
-  display: flex;
-  width: 250px;
-  justify-content: space-evenly;
-}
+  )
+  border-radius: 9px
+  padding: 5px
+
+.swipe__icons__container
+  display: flex
+  justify-content: center
+
+.swipe__icons
+  position: fixed
+  bottom: 5vh
+  display: flex
+  width: 250px
+  justify-content: space-evenly
+
 .swipe__icon__close:hover,
 .swipe__icon__star:hover,
-.swipe__icon__heart:hover {
-  transform: scale(1.06);
-  transition: all 0.2s ease-in-out;
-}
-.swipe__icons .material-design-icon__svg {
-  background-color: white;
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2) !important;
-  border-radius: 30px;
-  padding: 10px;
-}
-@media only screen and (min-width: 768px) {
-  .swipe__icon__power {
-    display: none;
-  }
-}
+.swipe__icon__heart:hover
+  transform: scale(1.06)
+  transition: all 0.2s ease-in-out
+
+.swipe__icons .material-design-icon__svg
+  background-color: white
+  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2) !important
+  border-radius: 30px
+  padding: 10px
+
+@media only screen and (min-width: 768px)
+  .swipe__icon__power
+    display: none
 </style>

frontend/src/shared/MainHeader.vue

@@ -1,15 +1,15 @@
 <template>
   <div id="main-header">
     <router-link class="header__icon mobile--only" to="/friends">
-      <p> friends
+      <p>friends</p>
     </router-link>
     
     <router-link class="header__icon" to="/">
-      <p> home
+      <p>home</p>
     </router-link>
 
     <router-link class="header__icon mobile--only" to="/profile">
-      <p> profile
+      <p>profile</p>
     </router-link>
   </div>
 </template>
@@ -20,13 +20,17 @@ export default {
 }
 </script>
 
-<style scoped>
-#main-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  z-index: 100;
-  border-bottom: 1px solid #f5f0f0c2;
-  padding: 2px;
-}
+<style lang="postcss">
+#main-header
+  display: flex
+  align-items: center
+  justify-content: space-around
+  z-index: 100
+  border-bottom: 1px solid #f5f0f0c2
+  padding: 2px
+
+@media only screen and (min-width: 768px)
+  .mobile--only
+    /* display: none */
+    display: block
 </style>

frontend/src/views/home.vue

@@ -2,7 +2,8 @@
   <div id="home">
     <div class="content-wrapper">
       <div class="content">
-        <p>cards and header</p>
+        <main-header />
+        <profile-cards :uid="uid" :users="swipables" />
       </div>
     </div>
     <sidebar />
@@ -10,10 +11,12 @@
 </template>
 
 <script>
+import mainHeader from '../shared/MainHeader.vue'
 import sidebar from '../shared/Sidebar.vue'
+import profileCards from '../components/TinderCard.vue'
 export default {
   name: "home",
-  components: {sidebar},
+  components: { mainHeader, profileCards, sidebar },
   data() {
     return {
       swipables: [],