:recycle: changing over to pug template syntax

frontend/src/components/Messages.vue

@@ -48,44 +48,44 @@ export default {
 };
 </script>
 
-<style scoped>
-.sidebar__messages {
-  padding: 20px 10px;
-  height: calc(100vh - 300px);
-  overflow-y: scroll;
-}
-.sidebar__messages a {
-  color: black;
-  text-decoration: none;
-}
-.sidebar__messages a:hover {
-  background: #f9f9ff;
-  transition: 0.5s;
-}
-.active {
-  background: #ececff;
-  transition: 0.5s;
-}
-.message__title {
-  color: #fd5068;
-  margin-bottom: 10px;
-}
-.sidebar__message {
-  display: flex;
-  align-items: center;
-  margin: 20px 0;
-}
-.message__left {
-  width: 70px;
-  height: 70px;
-}
-.message__left img {
-  object-fit: cover;
-}
-.message__right {
-  margin-left: 10px;
-}
-.message__name {
-  margin-bottom: 10px;
-}
+<style lang="postcss">
+.sidebar__messages
+  padding: 20px 10px
+  height: calc(100vh - 300px)
+  overflow-y: scroll
+
+.sidebar__messages a
+  color: black
+  text-decoration: none
+
+.sidebar__messages a:hover
+  background: #f9f9ff
+  transition: 0.5s
+
+.active
+  background: #ececff
+  transition: 0.5s
+
+.message__title
+  color: #fd5068
+  margin-bottom: 10px
+
+.sidebar__message
+  display: flex
+  align-items: center
+  margin: 20px 0
+
+.message__left
+  width: 70px
+  height: 70px
+
+.message__left img
+  object-fit: cover
+
+.message__right
+  margin-left: 10px
+
+.message__name
+  margin-bottom: 10px
+
 </style>

frontend/src/views/EditProfile.vue

@@ -1,6 +1,5 @@
-<template>
-    <div class="EditProfile">
-        <h1>Edit Profile</h1>
-        <p>Edit Photos</p>
-    </div>
+<template lang="pug">
+.EditProfile
+    h1 Edit Profile
+    p Edit Photos
 </template>

frontend/src/views/EditSurvey.vue

@@ -1,5 +1,4 @@
-<template>
-    <div class="EditSurvey">
-        <h1>Edit Survey</h1>
-    </div>
+<template lang="pug">
+.EditSurvey
+  h1 Edit Survey
 </template>

frontend/src/views/Login.vue

@@ -1,36 +1,24 @@
-<template>
-  <div class="login__box">
-    <h2>Login</h2>
-    <form @submit.prevent="onSubmit">
-      <div class="user__box">
-        <input type="email" required v-model="form.email" />
-        <label>Email</label>
-      </div>
-
-      <div class="user__box">
-        <input type="password" required v-model="form.password" />
-        <label>Password</label>
-      </div>
-
-      <div class="user__box">
-        <router-link class="forget__link" to="/forget"
-          >Forget Password</router-link
-        >
-      </div>
-      <div class="user__box" style="margin-top: 10px; cursor: pointer;">
-        <p @click="guestAccount" class="forget__link">Guest Account</p>
-      </div>
-
-      <button type="submit">
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
+<template lang="pug">
+.login__box
+  h2 Login
+  form(@submit.prevent="onSubmit")
+    .user__box
+      input(type="email" required="" v-model="form.email")
+      label Email
+    .user__box
+      input(type="password" required="" v-model="form.password")
+      label Password
+    .user__box
+      router-link.forget__link(to="/forget") Forget Password
+    .user__box(style="margin-top: 10px; cursor: pointer;")
+      p.forget__link(@click="guestAccount") Guest Account
+    button(type="submit")
+      span
+      span
+      span
+      span
         {{ requesting ? "Log..." : "Login" }}
-      </button>
-      <router-link class="links" to="/register">Register</router-link>
-    </form>
-  </div>
+    router-link.links(to="/register") Register
 </template>
 
 <script>
@@ -56,180 +44,170 @@ export default {
 };
 </script>
 
-<style>
-html {
-  background-color: #e90d77;
-}
-.content {
-  background: none;
-}
-.wrapper {
-  position: unset;
-}
-.login__box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 300px;
-  padding: 40px;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.5);
-  box-sizing: border-box;
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
-  border-radius: 10px;
-}
-.login__box h2 {
-  margin: 0 0 30px;
-  padding: 0;
-  color: #fff;
-  text-align: center;
-}
-.login__box .user__box {
-  position: relative;
-}
-.login__box .user__box input {
-  width: 100%;
-  padding: 10px 0;
-  font-size: 16px;
-  color: #fff;
-  margin-bottom: 30px;
-  border: none;
-  border-bottom: 1px solid #fff;
-  outline: none;
-  background: transparent;
-}
-.login__box .user__box label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 10px 0;
-  font-size: 16px;
-  color: #fff;
-  pointer-events: none;
-  transition: 0.5s;
-}
+<style lang="postcss">
+html
+  background-color: #e90d77
+
+.content
+  background: none
+
+.wrapper
+  position: unset
+
+.login__box
+  position: absolute
+  top: 50%
+  left: 50%
+  width: 300px
+  padding: 40px
+  transform: translate(-50%, -50%)
+  background: rgba(0, 0, 0, 0.5)
+  box-sizing: border-box
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6)
+  border-radius: 10px
+
+.login__box h2
+  margin: 0 0 30px
+  padding: 0
+  color: #fff
+  text-align: center
+
+.login__box .user__box
+  position: relative
+
+.login__box .user__box input
+  width: 100%
+  padding: 10px 0
+  font-size: 16px
+  color: #fff
+  margin-bottom: 30px
+  border: none
+  border-bottom: 1px solid #fff
+  outline: none
+  background: transparent
+
+.login__box .user__box label
+  position: absolute
+  top: 0
+  left: 0
+  padding: 10px 0
+  font-size: 16px
+  color: #fff
+  pointer-events: none
+  transition: 0.5s
+
 .login__box .user__box input:focus ~ label,
-.login__box .user__box input:valid ~ label {
-  top: -20px;
-  left: 0;
-  color: #e90d77;
-  font-size: 12px;
-}
-.login__box form button {
-  position: relative;
-  display: inline-block;
-  padding: 10px 20px;
-  color: #e90d77;
-  font-size: 16px;
-  text-decoration: none;
-  text-transform: uppercase;
-  overflow: hidden;
-  transition: 0.5s;
-  margin-top: 40px;
-  letter-spacing: 4px;
-  background: none;
-  border: none;
-}
-.login__box button:hover {
-  background: #e90d77;
-  color: #fff;
-  border-radius: 5px;
+.login__box .user__box input:valid ~ label
+  top: -20px
+  left: 0
+  color: #e90d77
+  font-size: 12px
+
+.login__box form button
+  position: relative
+  display: inline-block
+  padding: 10px 20px
+  color: #e90d77
+  font-size: 16px
+  text-decoration: none
+  text-transform: uppercase
+  overflow: hidden
+  transition: 0.5s
+  margin-top: 40px
+  letter-spacing: 4px
+  background: none
+  border: none
+
+.login__box button:hover
+  background: #e90d77
+  color: #fff
+  border-radius: 5px
   box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77;
-}
-.login__box button span {
-  position: absolute;
-  display: block;
-}
-.login__box button span:nth-child(1) {
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #e90d77);
-  animation: btn-anim1 1s linear infinite;
-}
-.login__box form .forget__link {
-  color: white;
-  text-decoration: none;
-}
-.login__box form .forget__link:hover {
-  color: #e90d77;
-}
-.login__box form .links {
-  color: white;
-  text-decoration: none;
-  margin-left: 5px;
-  padding: 10px;
-}
-.login__box form .links:hover {
-  background: #e90d77;
-  color: #fff;
-  border-radius: 5px;
+    0 0 100px #e90d77
+
+.login__box button span
+  position: absolute
+  display: block
+
+.login__box button span:nth-child(1)
+  top: 0
+  left: -100%
+  width: 100%
+  height: 2px
+  background: linear-gradient(90deg, transparent, #e90d77)
+  animation: btn-anim1 1s linear infinite
+
+.login__box form .forget__link
+  color: white
+  text-decoration: none
+
+.login__box form .forget__link:hover
+  color: #e90d77
+
+.login__box form .links
+  color: white
+  text-decoration: none
+  margin-left: 5px
+  padding: 10px
+
+.login__box form .links:hover
+  background: #e90d77
+  color: #fff
+  border-radius: 5px
   box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77;
-}
-@keyframes btn-anim1 {
-  0% {
-    left: -100%;
-  }
-  50%,
-  100% {
-    left: 100%;
-  }
-}
-.login__box button span:nth-child(2) {
-  top: -100%;
-  right: 0;
-  width: 2px;
-  height: 100%;
-  background: linear-gradient(180deg, transparent, #e90d77);
-  animation: btn-anim2 1s linear infinite;
-  animation-delay: 0.25s;
-}
-@keyframes btn-anim2 {
-  0% {
-    top: -100%;
-  }
-  50%,
-  100% {
-    top: 100%;
-  }
-}
-.login__box button span:nth-child(3) {
-  bottom: 0;
-  right: -100%;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(270deg, transparent, #e90d77);
-  animation: btn-anim3 1s linear infinite;
-  animation-delay: 0.5s;
-}
-@keyframes btn-anim3 {
-  0% {
-    right: -100%;
-  }
-  50%,
-  100% {
-    right: 100%;
-  }
-}
-.login__box a span:nth-child(4) {
-  bottom: -100%;
-  left: 0;
-  width: 2px;
-  height: 100%;
-  background: linear-gradient(360deg, transparent, #e90d77);
-  animation: btn-anim4 1s linear infinite;
-  animation-delay: 0.75s;
-}
-@keyframes btn-anim4 {
-  0% {
-    bottom: -100%;
-  }
-  50%,
-  100% {
-    bottom: 100%;
-  }
-}
+    0 0 100px #e90d77
+
+@keyframes btn-anim1
+  0%
+    left: -100%
+  50%, 100%
+    left: 100%
+  
+.login__box button span:nth-child(2)
+  top: -100%
+  right: 0
+  width: 2px
+  height: 100%
+  background: linear-gradient(180deg, transparent, #e90d77)
+  animation: btn-anim2 1s linear infinite
+  animation-delay: 0.25s
+
+@keyframes btn-anim2
+  0%
+    top: -100%
+  50%, 100%
+    top: 100%
+  
+
+.login__box button span:nth-child(3)
+  bottom: 0
+  right: -100%
+  width: 100%
+  height: 2px
+  background: linear-gradient(270deg, transparent, #e90d77)
+  animation: btn-anim3 1s linear infinite
+  animation-delay: 0.5s
+
+@keyframes btn-anim3
+  0%
+    right: -100%
+  50%, 100%
+    right: 100%
+  
+
+.login__box a span:nth-child(4)
+  bottom: -100%
+  left: 0
+  width: 2px
+  height: 100%
+  background: linear-gradient(360deg, transparent, #e90d77)
+  animation: btn-anim4 1s linear infinite
+  animation-delay: 0.75s
+
+@keyframes btn-anim4
+  0%
+    bottom: -100%
+  50%, 100%
+    bottom: 100%
+  
 </style>

frontend/src/views/Match.vue

@@ -1,41 +1,28 @@
-<template>
-    <div class="match">
-        <div class="matches">
-            <h1>Matches</h1>
-            <div class="row">
-                <card />
-                <card />
-                <card />
-            </div>
-        </div>
-
-        <div class="messages">
-            <h2>Messages</h2>
-            <div class="matched active">
-                <icon />
-                <div class="messagecontent">
-                    <h3>NSE Tropical</h3>
-                    Recently active, match now!
-                </div>
-            </div>
-
-            <div class="matched">
-                <icon />
-                <div class="messagecontent">
-                    <h3>Golden Communications</h3>
-                    Click to match now!
-                </div>
-            </div>
-
-            <div class="matched">
-                <icon />
-                <div class="messagecontent">
-                    <h3>Mojo Solutions</h3>
-                    Click to match now!
-                </div>
-            </div>
-        </div>
-    </div>
+<template lang="pug">
+.match
+  .matches
+    h1 Matches
+    .row
+      card
+        card
+          card
+  .messages
+    h2 Messages
+    .matched.active
+      icon
+        .messagecontent
+          h3 NSE Tropical
+          |                     Recently active, match now!
+    .matched
+      icon
+        .messagecontent
+          h3 Golden Communications
+          |                     Click to match now!
+    .matched
+      icon
+        .messagecontent
+          h3 Mojo Solutions
+          |                     Click to match now!
 </template>
 
 <script>

frontend/src/views/Register.vue

@@ -1,38 +1,25 @@
-<template>
-  <div class="register__box">
-    <h2>Register</h2>
-    <form @submit.prevent="onSubmit">
-      <div class="user__box">
-        <input type="text" required minlength="5" v-model="form.fullname" />
-        <label>Fullname</label>
-      </div>
-
-      <div class="user__box">
-        <input type="email" required minlength="10" v-model="form.email" />
-        <label>Email</label>
-      </div>
-
-      <div class="user__box">
-        <input type="password" minlength="6" required v-model="form.password" />
-        <label>Password</label>
-      </div>
-
-      <div class="user__box">
-        <router-link class="forget__link" to="/forget"
-          >Forget Password</router-link
-        >
-      </div>
-
-      <button type="submit">
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
+<template lang="pug">
+.register__box
+  h2 Register
+  form(@submit.prevent="onSubmit")
+    .user__box
+      input(type="text" required="" minlength="5" v-model="form.fullname")
+      label Fullname
+    .user__box
+      input(type="email" required="" minlength="10" v-model="form.email")
+      label Email
+    .user__box
+      input(type="password" minlength="6" required="" v-model="form.password")
+      label Password
+    .user__box
+      router-link.forget__link(to="/forget") Forget Password
+    button(type="submit")
+      span
+      span
+      span
+      span
         {{ requesting ? "Log..." : "Register" }}
-      </button>
-      <router-link class="links" to="/login">Login</router-link>
-    </form>
-  </div>
+    router-link.links(to="/login") Login
 </template>
 
 <script>
@@ -52,183 +39,170 @@ export default {
       this.requesting = false
     },
   },
-};
+}
 </script>
 
 <style>
-html {
-  background-color: #e90d77;
-}
-.content {
-  background: none;
-}
-.wrapper {
-  position: unset;
-}
-.register__box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 300px;
-  padding: 40px;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.5);
-  box-sizing: border-box;
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
-  border-radius: 10px;
-}
-.register__box h2 {
-  margin: 0 0 30px;
-  padding: 0;
-  color: #fff;
-  text-align: center;
-}
-.register__box .user__box {
-  position: relative;
-}
-.register__box .user__box input {
-  width: 100%;
-  padding: 10px 0;
-  font-size: 16px;
-  color: #fff;
-  margin-bottom: 30px;
-  border: none;
-  border-bottom: 1px solid #fff;
-  outline: none;
-  background: transparent;
-}
-.register__box .user__box label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 10px 0;
-  font-size: 16px;
-  color: #fff;
-  pointer-events: none;
-  transition: 0.5s;
-}
+html
+  background-color: #e90d77
+
+.content
+  background: none
+
+.wrapper
+  position: unset
+
+.register__box
+  position: absolute
+  top: 50%
+  left: 50%
+  width: 300px
+  padding: 40px
+  transform: translate(-50%, -50%)
+  background: rgba(0, 0, 0, 0.5)
+  box-sizing: border-box
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6)
+  border-radius: 10px
+
+.register__box h2
+  margin: 0 0 30px
+  padding: 0
+  color: #fff
+  text-align: center
+
+.register__box .user__box
+  position: relative
+
+.register__box .user__box input
+  width: 100%
+  padding: 10px 0
+  font-size: 16px
+  color: #fff
+  margin-bottom: 30px
+  border: none
+  border-bottom: 1px solid #fff
+  outline: none
+  background: transparent
+
+.register__box .user__box label
+  position: absolute
+  top: 0
+  left: 0
+  padding: 10px 0
+  font-size: 16px
+  color: #fff
+  pointer-events: none
+  transition: 0.5s
+
 .register__box .user__box input:focus ~ label,
-.register__box .user__box input:valid ~ label {
-  top: -20px;
-  left: 0;
-  color: #e90d77;
-  font-size: 12px;
-}
-.register__box form button {
-  position: relative;
-  display: inline-block;
-  padding: 10px 20px;
-  color: #e90d77;
-  font-size: 16px;
-  text-decoration: none;
-  text-transform: uppercase;
-  overflow: hidden;
-  transition: 0.5s;
-  margin-top: 40px;
-  letter-spacing: 4px;
-  background: none;
-  border: none;
-}
-.register__box button:hover {
-  background: #e90d77;
-  color: #fff;
-  border-radius: 5px;
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77;
-}
-.register__box button span {
-  position: absolute;
-  display: block;
-}
-.register__box button span:nth-child(1) {
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #e90d77);
-  animation: btn-anim1 1s linear infinite;
-}
-.register__box form .forget__link {
-  color: white;
-  text-decoration: none;
-}
-.register__box form .forget__link:hover {
-  color: #e90d77;
-}
-.register__box form .links {
-  color: white;
-  text-decoration: none;
-  margin-left: 5px;
-  padding: 10px;
-}
-.register__box form .links:hover {
-  background: #e90d77;
-  color: #fff;
-  border-radius: 5px;
+.register__box .user__box input:valid ~ label
+  top: -20px
+  left: 0
+  color: #e90d77
+  font-size: 12px
+
+.register__box form button
+  position: relative
+  display: inline-block
+  padding: 10px 20px
+  color: #e90d77
+  font-size: 16px
+  text-decoration: none
+  text-transform: uppercase
+  overflow: hidden
+  transition: 0.5s
+  margin-top: 40px
+  letter-spacing: 4px
+  background: none
+  border: none
+
+.register__box button:hover
+  background: #e90d77
+  color: #fff
+  border-radius: 5px
   box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77;
-}
-@keyframes btn-anim1 {
-  0% {
-    left: -100%;
-  }
-  50%,
-  100% {
-    left: 100%;
-  }
-}
-.register__box button span:nth-child(2) {
-  top: -100%;
-  right: 0;
-  width: 2px;
-  height: 100%;
-  background: linear-gradient(180deg, transparent, #e90d77);
-  animation: btn-anim2 1s linear infinite;
-  animation-delay: 0.25s;
-}
-@keyframes btn-anim2 {
-  0% {
-    top: -100%;
-  }
-  50%,
-  100% {
-    top: 100%;
-  }
-}
-.register__box button span:nth-child(3) {
-  bottom: 0;
-  right: -100%;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(270deg, transparent, #e90d77);
-  animation: btn-anim3 1s linear infinite;
-  animation-delay: 0.5s;
-}
-@keyframes btn-anim3 {
-  0% {
-    right: -100%;
-  }
-  50%,
-  100% {
-    right: 100%;
-  }
-}
-.register__box a span:nth-child(4) {
-  bottom: -100%;
-  left: 0;
-  width: 2px;
-  height: 100%;
-  background: linear-gradient(360deg, transparent, #e90d77);
-  animation: btn-anim4 1s linear infinite;
-  animation-delay: 0.75s;
-}
-@keyframes btn-anim4 {
-  0% {
-    bottom: -100%;
-  }
-  50%,
-  100% {
-    bottom: 100%;
-  }
-}
+    0 0 100px #e90d77
+
+.register__box button span
+  position: absolute
+  display: block
+
+.register__box button span:nth-child(1)
+  top: 0
+  left: -100%
+  width: 100%
+  height: 2px
+  background: linear-gradient(90deg, transparent, #e90d77)
+  animation: btn-anim1 1s linear infinite
+
+.register__box form .forget__link
+  color: white
+  text-decoration: none
+
+.register__box form .forget__link:hover
+  color: #e90d77
+
+.register__box form .links
+  color: white
+  text-decoration: none
+  margin-left: 5px
+  padding: 10px
+
+.register__box form .links:hover
+  background: #e90d77
+  color: #fff
+  border-radius: 5px
+  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77, 0 0 100px #e90d77
+
+@keyframes btn-anim1
+  0%
+    left: -100%
+  50%, 100%
+    left: 100%
+  
+.register__box button span:nth-child(2)
+  top: -100%
+  right: 0
+  width: 2px
+  height: 100%
+  background: linear-gradient(180deg, transparent, #e90d77)
+  animation: btn-anim2 1s linear infinite
+  animation-delay: 0.25s
+
+@keyframes btn-anim2
+  0%
+    top: -100%
+  50%, 100%
+    top: 100%
+  
+.register__box button span:nth-child(3)
+  bottom: 0
+  right: -100%
+  width: 100%
+  height: 2px
+  background: linear-gradient(270deg, transparent, #e90d77)
+  animation: btn-anim3 1s linear infinite
+  animation-delay: 0.5s
+
+@keyframes btn-anim3
+  0%
+    right: -100%
+  50%, 100%
+    right: 100%
+  
+.register__box a span:nth-child(4)
+  bottom: -100%
+  left: 0
+  width: 2px
+  height: 100%
+  background: linear-gradient(360deg, transparent, #e90d77)
+  animation: btn-anim4 1s linear infinite
+  animation-delay: 0.75s
+
+@keyframes btn-anim4
+  0%
+    bottom: -100%
+  50%, 100%
+    bottom: 100%
+  
 </style>

frontend/src/views/SearchSettings.vue

@@ -1,8 +1,7 @@
-<template>
-    <div class="SearchSettings">
-        <h1>Search Settings</h1>
-        <p>Max-Distance | Remote</p>
-        <p>Part-time | Full-time</p>
-        <p>Current Location</p>
-    </div>
+<template lang="pug">
+.SearchSettings
+  h1 Search Settings
+  p Max-Distance | Remote
+  p Part-time | Full-time
+  p Current Location
 </template>

frontend/src/views/home.vue

@@ -1,13 +1,10 @@
-<template>
-  <div id="home">
-    <div class="content-wrapper">
-      <div class="content">
-        <main-header />
-        <profile-cards :uid="uid" :users="swipables" />
-      </div>
-    </div>
-    <sidebar />
-  </div>
+<template lang="pug">
+#home
+  .content-wrapper
+    .content
+      main-header
+      profile-cards(:uid="uid" :users="swipables")
+  sidebar
 </template>
 
 <script>