:recycle: moving things around again | using some helper classes | deleting old views

frontend/src/App.vue

@@ -17,11 +17,9 @@ export default {
 @import './sss/theme.sss'
 
 #app
-    width: 100%
     text-align: center
     color: $primary
     font-family: $sans
-    padding: $ms-0
     background-color: $secondary
     overflow-x: hidden
 </style>

frontend/src/components/MainNav.vue

@@ -0,0 +1,23 @@
+<template lang="pug">
+nav#main-header.w-full.f-row.around
+    router-link.header__icon.mobile--only(to='/matches') matches
+    router-link.header__icon(to='/') home
+    router-link.header__icon.mobile--only(to='/profile') profile
+</template>
+
+<script>
+export default {
+    name: 'MainNav',
+}
+</script>
+
+<style lang="postcss">
+#main-header
+  border-bottom: 1px solid #f5f0f0c2
+  padding: 2px
+
+@media only screen and (min-width: 768px)
+  .mobile--only
+    /* display: none */
+    display: block
+</style>

frontend/src/components/ProfileCard.vue

@@ -1,131 +0,0 @@
-<template lang="pug">
-.profile__card
-  .profiler__card__container
-    .swipe(v-for="user in users" :key="user.id" @throwout="swipped(user)" :config="config")
-      .card(:style="{ 'background-image': `url(${user.avatar})` }")
-        .card__content
-          h3 {{ user.name }}
-    .swipe__icons // Icons
-</template>
-
-<script>
-export default {
-    name: 'profile-cards',
-    props: {
-        users: {
-            type: [Object, Array],
-            default: function () {
-                return [
-                    {
-                        uid: '1',
-                        name: 'Fullname',
-                        avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
-                        metadata: { age: '21', rawMetadata: 'Some Text Here!' },
-                    },
-                ]
-            },
-        },
-        uid: {
-            type: String,
-        },
-    },
-    data() {
-        return {
-            config: {
-                // allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
-                minThrowOutDistance: 250,
-                maxThrowOutDistance: 300,
-            },
-            favorites: [],
-            requests: [],
-        }
-    },
-    created() {
-        this.getUser()
-    },
-    components: {},
-    methods: {
-        logOut() {},
-        reject() {
-            this.swipped(this.currentCard)
-        },
-        swipped(user) {
-            const index = this.users.findIndex(u => u.uid == user.uid)
-            this.users.splice(index, 1)
-            user.id = Date.now() + (Math.random() * 100000).toFixed()
-            this.users.unshift({ ...user })
-        },
-        getUser() {
-            return
-        },
-        onRequest() {
-            const data = { ...this.currentCard }
-            return
-        },
-    },
-    computed: {
-        currentCard() {
-            return this.users[this.users.length - 1]
-        },
-    },
-}
-</script>
-<style lang="postcss">
-.profile__card__container
-    display: flex
-    justify-content: center
-    margin-top: 10vh
-
-.swipe
-    position: absolute
-
-.card 
-    position: relative
-    background-color: #fff
-    width: 250px
-    padding: 20px
-    max-width: 85vw
-    height: 50vh
-    border-radius: 9px
-    background-size: cover
-    background-position: center
-    &__content
-        width: 100%
-        height: 100%
-    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__icon
-    &s
-        position: fixed
-        bottom: 5vh
-        display: flex
-        width: 250px
-        justify-content: space-evenly
-        .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
-        &__container
-            display: flex
-            justify-content: center
-    &__close, &__star, &__heart
-        &:hover
-            transform: scale(1.06)
-            transition: all 0.2s ease-in-out
-
-@media only screen and (min-width: 768px)
-    .swipe__icon__power
-        display: none
-</style>

frontend/src/components/ProfileCardList.vue

@@ -0,0 +1,107 @@
+<template lang="pug">
+section.profile_card_list.w-full
+    .profile_card_list_container.w-full
+        .swipe(
+            :config='config'
+            :key='user.id'
+            @throwout='swipped(user)'
+            v-for='user in users'
+        )
+            .card.b-solid.rounded.p-0.bg-cover(
+                :style='{ "background-image": `url(${user.avatar})` }'
+            )
+                .card__content
+                    h3.p-1.mv-0.b-solid.rounded {{ user.name }}
+
+        nav.swipe_icons.w-full.f-row.between
+            h2 A
+            h2 H
+            h2 P
+</template>
+
+<script>
+export default {
+    name: 'ProfileCardList',
+    props: {
+        users: {
+            type: [Object, Array],
+            default: () => [
+                {
+                    uid: '1',
+                    name: 'Fullname',
+                    avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
+                    metadata: { age: '21', rawMetadata: 'Some Text Here!' },
+                },
+            ],
+        },
+        uid: {
+            type: String,
+            default: '9999',
+        },
+    },
+    data: () => ({
+        config: {
+            // allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
+            minThrowOutDistance: 250,
+            maxThrowOutDistance: 300,
+        },
+        favorites: [],
+        requests: [],
+    }),
+    computed: {
+        currentCard() {
+            return this.users[this.users.length - 1]
+        },
+    },
+    created() {
+        this.getUser()
+    },
+    methods: {
+        logOut() {},
+        reject() {
+            this.swipped(this.currentCard)
+        },
+        swipped(user) {
+            const index = this.users.findIndex(u => u.uid == user.uid)
+            this.users.splice(index, 1)
+            user.id = Date.now() + (Math.random() * 100000).toFixed()
+            this.users.unshift({ ...user })
+        },
+        getUser() {
+            return
+        },
+        onRequest() {
+            const data = { ...this.currentCard }
+            return
+        },
+    },
+}
+</script>
+<style lang="postcss">
+.profile_card_list_container
+    display: flex
+    justify-content: center
+    margin: 5vh 0 0 0
+
+.swipe
+    position: absolute
+
+.card
+    position: relative
+    background-color: #fff
+    width: 250px
+    max-width: 85vw
+    height: 50vh
+    background-position: center
+    &_content
+        width: 100%
+        height: 100%
+    h3
+        position: absolute
+        bottom: 0
+
+.swipe_icons
+    position: fixed
+    bottom: 5vh
+    width: 250px
+</style>

frontend/src/components/Sidebar.vue

@@ -0,0 +1,43 @@
+<template lang="pug">
+aside.sidebar__messages.p-1
+    p messages
+    input
+    label search
+
+    router-link(
+        :class='[uid == user.uid ? "active" : "", "sidebar__message"]'
+        :key='user.uid'
+        :to='`/chats/${user.uid}`'
+        v-for='user in users'
+    )
+        h4.message__title.mv-0 {{ title }}
+        .row.f-row.mv-0
+            .message__left.mr-0
+                p avatar
+                p O
+            .message__right.t-left.f-grow
+                h4.message__name {{ user.name }}
+                p.message__content {{ user.metadata.rawMetadata || "Hello!" }}
+        hr
+</template>
+
+<script>
+export default {
+    data: () => ({
+        title: 'i am a title',
+        uid: 111,
+        users: [
+            {
+                name: 'bob mcrob',
+                uid: 111,
+                metadata: { rawMetadata: 'howdy howdy howdy' },
+            },
+            {
+                name: 'rob bebob',
+                uid: 112,
+                metadata: { rawMetadata: 'this is the last message' },
+            },
+        ],
+    }),
+}
+</script>

frontend/src/shared/MainHeader.vue

@@ -1,36 +0,0 @@
-<template>
-    <div id="main-header">
-        <router-link class="header__icon mobile--only" to="/matches">
-            <p>matches</p>
-        </router-link>
-
-        <router-link class="header__icon" to="/">
-            <p>home</p>
-        </router-link>
-
-        <router-link class="header__icon mobile--only" to="/profile">
-            <p>profile</p>
-        </router-link>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'main-header',
-}
-</script>
-
-<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/shared/Sidebar.vue

@@ -1,43 +0,0 @@
-<template lang="pug">
-aside.sidebar__messages
-    h1 messages
-    input
-    label search 
-    router-link(
-        :class='[uid == user.uid ? "active" : "", "sidebar__message"]'
-        :key='user.uid'
-        :to='`/chats/${user.uid}`'
-        v-for='user in users'
-    )
-        h4.message__title {{ title }}
-        .message__left
-            p avatar picture
-            p status doot
-        .message__right
-            h4.message__name {{ user.name }}
-            p.message__content {{ user.metadata.rawMetadata || "Hello!" }}
-        hr
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            title: 'i am a title',
-            uid: 111,
-            users: [
-                {
-                    name: 'bob mcrob',
-                    uid: 111,
-                    metadata: { rawMetadata: 'howdy howdy howdy' },
-                },
-                {
-                    name: 'rob bebob',
-                    uid: 112,
-                    metadata: { rawMetadata: 'this is the last message' },
-                },
-            ],
-        }
-    },
-}
-</script>

frontend/src/sss/partials/_helpers.sss

@@ -39,8 +39,12 @@
             flex-wrap: wrap
     &-row
         flex-direction: row
+        &.reverse
+            flex-direction: row-reverse
     &-col
         flex-direction: column
+        &.reverse
+            flex-direction: column-reverse
     &-grow
         flex-grow: 1
 

frontend/src/views/Archive/About.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="about">
-        <h1>This is an about page</h1>
-    </div>
-</template>

frontend/src/views/Archive/AcctSettings.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="AcctSettings">
-        <h1>Account Settings</h1>
-    </div>
-</template>

frontend/src/views/Archive/Chat.vue

@@ -1,106 +0,0 @@
-<template>
-    <div class="chat">
-        <div class="chat--nav">
-            <span>&lt; Back</span>
-            <h3>Company Name</h3>
-            <span>...</span>
-        </div>
-
-        <div class="chat--history">
-            <span>Hey there... </span>
-        </div>
-
-        <div class="message">
-            <!-- <h2>Messages</h2> -->
-            <span>Type messages here...</span>
-        </div>
-    </div>
-</template>
-
-<script>
-import icon from '@/components/icon'
-import card from '@/components/card'
-import { defineComponent } from 'vue'
-import { NButton } from 'naive-ui'
-
-export default defineComponent({
-    components: {
-        NButton,
-        card,
-        icon,
-    },
-})
-</script>
-
-<style lang="postcss">
-h3
-  margin: 0
-
-.chat
-  width: 100%
-  display: flex
-  flex-flow: column
-  /* padding: 20px */
-  text-align: left
-  height: 90%
-
-
-.chat--nav
-  display: flex
-  flex-direction: row
-  justify-content: space-between
-  border-bottom: 1px solid rgba(0,0,0,0.5)
-  width: 100%
-  & > *
-    padding: 10px
-
-
-
-.chat--history
-  padding: 20px
-  flex: 1
-  overflow: auto
-
-
-.row
-  display: flex
-  flex-direction: row
-  /* width: 100vw */
-  overflow:scroll
-
-
-.message
-  position: relative
-  bottom: 0
-  min-height: 60px
-  width: 100%
-  display: block
-  text-align: left
-  /* margin-bottom: 10px */
-  background-color: transparent
-  border: 1px solid #ccc
-  padding: 12px
-
-
-.n-card__content
-  padding-top: 0
-
-
-.matched
-  display: flex
-  flex-direction: row
-  background-color: rgba(0,0,0,0.0)
-  margin-bottom: 12px
-  border-bottom: 1px solid rgba(150,150,150,0.25)
-
-
-.icon
-  /* display: inline-block */
-  padding: 8px 12px
-  margin: -1px
-  /* flex-grow: 0 */
-  border-bottom: 1px solid rgba(250,250,250,0.95)
-
-.active
-  /* background-color: rgba(250,50,50,0.3) */
-</style>

frontend/src/views/Archive/EditProfile.vue

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

frontend/src/views/Archive/EditSurvey.vue

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

frontend/src/views/Archive/SearchSettings.vue

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

frontend/src/views/Archive/account.vue

@@ -1,88 +0,0 @@
-<template lang="pug">
-.account
-  h1 Account
-  .user
-      .userprofile
-        span User Name
-    
-  .accountmenu
-    router-link(to="/editprofile")
-      .icon
-        p - Edit Profile
-    router-link(to="/editsurvey")
-      .icon
-        p + Edit Survey
-    
-  .settings
-    router-link(to="/searchsettings")
-      .icon
-        p - Search Settings
-    router-link(to="/acctsettings")
-      .icon
-        p - Account Settings
-</template>
-
-<style lang="postcss">
-.account
-  display: flex
-  flex-direction: column
-  justify-content: space-between
-  width: 100%
-  padding: 20px
-  text-align: left
-
-
-a
-  text-decoration: none
-
-
-.user
-  text-align: center
-  display: flex
-  flex-direction: column
-  align-items: center
-
-
-.userprofile
-  border-radius: 50%
-  width: 120px
-  height: 120px
-  background-image: url(https://images-ssl.gotinder.com/5b308e3bf4807f9329e93a38/640x800_75_e70182ed-938b-418e-8598-d844b4090ced.webp)
-  background-position: 50% 0
-  background-size: auto 125%
-  margin: 12px auto
-
-
-.icon
-  display: flex
-  justify-content: center
-  align-items: center
-  border-radius: 50%
-  width: 48px
-  height: 48px
-  background-color: rgba(20,20,20,0.3)
-  background-position: 50% 0
-  background-size: auto 125%
-  margin: 12px auto
-
-
-span
-  text-transform: uppercase
-  font-weight: 700
-  font-size: 1.2rem
-
-
-.accountmenu
-  display: flex
-  flex-direction: row
-  justify-content: space-between
-  margin-bottom: 5vh
-  padding: 0 5vh
-
-
-.settings
-  display: flex
-  flex-direction: row
-  justify-content: space-between
-  padding: 0 5vh
-</style>

frontend/src/views/Chats.vue

@@ -65,7 +65,7 @@ article#chats
 
 <script>
 export default {
-    name: 'chats',
+    name: 'ChatsView',
     props: {
         uid: {
             type: String,
@@ -79,15 +79,16 @@ export default {
             user: {},
         }
     },
-    components: {},
+    watch: {
+        messages() {
+            this.scrollToEnd()
+        },
+    },
     created() {
         this.getMessages()
         this.getUser()
         this.listenForMessage()
     },
-    destroyed() {
-        CometChat.removeMessageListener(this.uid)
-    },
     updated() {
         this.scrollToEnd()
     },
@@ -127,11 +128,6 @@ export default {
             return hrs + ':' + mins + timeType
         },
     },
-    watch: {
-        messages() {
-            this.scrollToEnd()
-        },
-    },
 }
 </script>
 
@@ -243,7 +239,7 @@ export default {
       border: none
       border-radius: 3px
       font-size: 1em
-      
+
 .msger-send-btn
   margin-left: 10px
   background: rgb(233, 12, 119)

frontend/src/views/Profile.vue

@@ -43,7 +43,7 @@
 
 <script>
 export default {
-    name: 'profile-update',
+    name: 'ProfileUpdate',
     data() {
         return {
             requesting: false,

frontend/src/views/home.vue

@@ -1,25 +1,25 @@
 <template lang="pug">
-article#home
-    .content-wrapper
-        .content
-            main-header
-            profile-cards(:uid='uid' :users='swipables')
+article#home.w-full.f-row.reverse
+    .content-wrapper.w-full
+        header
+            main-nav
+
+        profile-card-list(:uid='uid' :users='swipables')
     sidebar
 </template>
 
 <script>
-import mainHeader from '../shared/MainHeader.vue'
-import sidebar from '../shared/Sidebar.vue'
-import profileCards from '../components/ProfileCard.vue'
+import mainNav from '../components/MainNav.vue'
+import sidebar from '../components/Sidebar.vue'
+import profileCardList from '../components/ProfileCardList.vue'
+
 export default {
-    name: 'home',
-    components: { mainHeader, profileCards, sidebar },
-    data() {
-        return {
-            swipables: [],
-            uid: null,
-        }
-    },
+    name: 'HomeView',
+    components: { mainNav, profileCardList, sidebar },
+    data: () => ({
+        swipables: [],
+        uid: null,
+    }),
     created() {
         // this.uid = auth.currentUser?.uid || "99999";
         this.uid = '99999'
@@ -29,24 +29,18 @@ export default {
         getUsers() {
             const users = [
                 {
-                    name: "bob",
+                    name: 'bob',
                     id: 1234,
-                    metadata: { age: '21', rawMetadata: 'Some Text Here!' }
+                    metadata: { age: '21', rawMetadata: 'Some Text Here!' },
                 },
                 {
-                    name: "rob",
+                    name: 'rob',
                     id: 1235,
-                    metadata: { age: '21', rawMetadata: 'Some Text Here!' }
-                }
+                    metadata: { age: '21', rawMetadata: 'Some Text Here!' },
+                },
             ]
             this.swipables = users
         },
     },
 }
 </script>
-
-<style lang="postcss">
-#home
-    display: flex
-    flex-direction: row-reverse
-</style>