Merge branch 'pairs-view' of fyindr/siimee into dev

frontend/assets/icons/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M19.378,3.822H18.267V6.044H14.933V3.822H8.267V6.044H4.933V3.822H3.822A2.228,2.228,0,0,0,1.6,6.044V19.378A2.228,2.228,0,0,0,3.822,21.6H19.378A2.229,2.229,0,0,0,21.6,19.378V6.044a2.229,2.229,0,0,0-2.222-2.222Zm0,15.556H3.822V10.489H19.378ZM7.711,1.6H5.489V5.489H7.711Zm10,0H15.489V5.489h2.222Z" transform="translate(-1.6 -1.6)" fill="#fff"/></svg>

frontend/assets/icons/chat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27.778" height="25" viewBox="0 0 27.778 25"><path d="M8.056,17.156V8.544H2.778A2.786,2.786,0,0,0,0,11.322v8.333a2.786,2.786,0,0,0,2.778,2.778H4.167V26.6l4.167-4.167h6.944a2.786,2.786,0,0,0,2.778-2.778V17.128a1.328,1.328,0,0,1-.278.03l-9.722,0ZM25,1.6H12.5A2.786,2.786,0,0,0,9.722,4.378V15.489h9.722l4.167,4.167V15.489H25a2.785,2.785,0,0,0,2.778-2.778V4.378A2.786,2.786,0,0,0,25,1.6Z" transform="translate(0 -1.6)" fill="#fff"/></svg>

frontend/assets/icons/close-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.414" height="17.414" viewBox="0 0 17.414 17.414"><g transform="translate(0.707 0.707)"><line x1="16" y1="16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/><line y1="16" x2="16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/></g></svg>

frontend/assets/icons/options-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="5" viewBox="0 0 19 5"><g fill="none" stroke="#fff" stroke-width="1"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="2" fill="none"/></g><g transform="translate(7)" fill="none" stroke="#fff" stroke-width="1"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="2" fill="none"/></g><g transform="translate(14)" fill="none" stroke="#fff" stroke-width="1"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="2" fill="none"/></g></svg>

frontend/src/components/PairsList.vue

@@ -2,27 +2,30 @@
 section.pairs-list
     article(v-if='pairs.length')
         template(v-for='pair in pairs')
-            router-link.pair.w-flex.align-center.justify-space-around(
-                :to='`/profile/${pair.profile.pid}`'
-                v-if='tabName == "pending"'
-            )
-            router-link.pair.w-flex.align-center.justify-space-around(
-                :to='`/chat/${pair.profile.pid}`'
-                v-else
-            )
-                .dot--icon
-                .avatar
-                .idCard
-                    p {{ pair.profile.name }}
-                    p {{ pair.profile.pid }}
-                    p since: {{ pair.grouping.createdAt }}
-                    p updated: {{ pair.grouping.lastUpdatedAt }}
-                    p paired: {{ pair.grouping.is_paired }}
-                    p revealed tags: {{ pair.grouping.tags }}
+            w-flex().align-center.flex-start
+                router-link.pair.w-flex.align-center.flex-start(
+    :to='`/profile/${pair.profile.pid}`')
+                    .dot--icon
+                    .avatar
+                    .idCard
+                        h3 {{ pair.profile.name }} {{ pair.profile.pid }}
+                        p registered nurse
+
+                w-menu( left v-model='showMenu')
+                    template(#activator)
+                        w-button.mr3(@click='showMenu = !showMenu' icon="mdi mdi-dots-horizontal")
+                    w-flex()
+                        router-link(
+                            :to='`/chat/${pair.profile.pid}`')
+                            w-button.mx2(@click='showMenu = false' bg-color="success" tile icon="mdi mdi-forum") Chat
+                        w-button.mx2(@click='showMenu = false' bg-color="info" tile icon="mdi mdi-calendar") Calendar
+                        w-button.mx2(@click='showMenu = false' bg-color="primary" icon="wi-cross")
+
     p(v-else) No {{ tabName }} profiles.
 </template>
 
 <script setup>
+import { ref } from 'vue'
 const props = defineProps({
     pairs: {
         type: [Object, Array],
@@ -33,23 +36,33 @@ const props = defineProps({
         default: 'paired',
     },
 })
+const showMenu = ref(false)
 </script>
 
 <style lang="sass">
 .pairs-list
-    background-color:#000
-    max-width: 450px
-    width: 100%
-    height: 100vh
-    margin: 0 auto
+    color: #fff
     article
+        font-family: 'Century Gothic'
         .dot--icon
-            width:3vw
-            height:3vw
+            width:12px
+            height:12px
+            margin: 11px
             border-radius:50%
             background-color:#60C3FF
         .avatar
-            width:10vw
-            height:10vw
+            width:40px
+            height:40px
+            margin: 11px
+            border-radius: 6px
             background-color:#D5D5D5
+        .idCard
+            color: #fff
+            margin: 11px
+            h3
+                font-size: 16px
+            p
+                font-size: 14px
+.w-menu--card
+    background-color: #000000 !important
 </style>

frontend/src/components/ProfileCardList.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 section.profile-card-list.xs12.w-flex.column
     header.xs12.w-flex 
-        w-select(:items='["one", "two", "three"]' outline) Label
+        //- w-select(:items="['one', 'two', 'three']" outline) Label
 
     article
         ProfileCard.match-layout(

frontend/src/views/HomeView.vue

@@ -6,28 +6,6 @@ main.view--home
     p(v-else-if='cards.length === 0') No profiles in match_queue.
     w-spinner(v-else bounce)
 
-    footer
-        w-form
-            w-input.mb2(
-                inner-icon-left='mdi mdi-account'
-                label='Full Name'
-                label-position='inside'
-                outline
-            )
-            w-input.mb2(
-                inner-icon-left='mdi mdi-mail'
-                label='E-mail'
-                label-position='inside'
-                outline
-            )
-            w-input.mb2(
-                inner-icon-left='mdi mdi-lock'
-                label='Password'
-                label-position='inside'
-                outline
-                type='password'
-            )
-
     MainNav
 </template>
 

frontend/src/views/PairsView.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 main.view--pairs
     article(v-if='isLoggedIn')
-        w-tabs(:items='tabs' fill-bar)
+        w-tabs(:items='tabs' fill-bar slider-color='yellow')
             template(#item-title='{ item }')
-                span.green {{ item.title }}
+                span {{ item.title }}
             //- pending tab
             template(#item-content.1='{ item }')
                 PairsList(:pairs='pending' tab-name='pending')
@@ -73,19 +73,31 @@ export default {
 </script>
 
 <style lang="sass">
-.select--matches 
-    display: flex
-    justify-content: space-between
-    margin: 0 25px
-.select--matches > div 
+.view--pairs
+    max-width: 450px
     width: 100%
-    text-align: center
-    font-size: 16px
-    line-height: 40px
-.active 
-    border-bottom: 3px solid #f2cd5c
-    color: #f2cd5c
-.idle 
-    color: #bcc5d3
+    margin: 0 auto
+    background-color: #1F2024
+    .w-tabs__bar-item
+        height: 50px
+        font-family: 'Century Gothic'
+        color: #FFFFFF
+        &.w-tabs__bar-item--active
+        &.primary
+            color: #F2CD5C
+    .select--matches
+        display: flex
+        justify-content: space-between
+        margin: 0 25px
+        > div
+            width: 100%
+            text-align: center
+            font-size: 16px
+            line-height: 40px
+    .active
+        border-bottom: 3px solid #f2cd5c
+        color: #f2cd5c
 
+    .idle
+        color: #bcc5d3
 </style>