Merge branch 'responsive-layout' of fyindr/siimee into dev

frontend/assets/sass/icons.scss

+@font-face {
+    font-family: 'icomoon';
+    src: url('assets/fonts/icomoon.eot?6rmrq3');
+    src: url('assets/fonts/icomoon.eot?6rmrq3#iefix') format('embedded-opentype'),
+        url('assets/fonts/icomoon.ttf?6rmrq3') format('truetype'),
+        url('assets/fonts/icomoon.woff?6rmrq3') format('woff'),
+        url('assets/fonts/icomoon.svg?6rmrq3#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    &.icon-cross:before {
+        content: "\e911";
+    }
+
+    &.icon-dots-three-horizontal:before {
+        content: "\e917";
+    }
+
+    &.icon-dots-three-vertical:before {
+        content: "\e91a";
+    }
+
+    &.icon-address:before {
+        content: "\e900";
+    }
+
+    &.icon-area-graph:before {
+        content: "\e901";
+    }
+
+    &.icon-calendar:before {
+        content: "\e902";
+    }
+
+    &.icon-certified:before {
+        content: "\e903";
+    }
+
+    &.icon-chat:before {
+        content: "\e904";
+    }
+
+    &.icon-checkmark:before {
+        content: "\e905";
+    }
+
+    &.icon-clock:before {
+        content: "\e906";
+    }
+
+    &.icon-cog:before {
+        content: "\e907";
+    }
+
+    &.icon-compass:before {
+        content: "\e908";
+    }
+
+    &.icon-emoji-happy:before {
+        content: "\e909";
+    }
+
+    &.icon-envelope:before {
+        content: "\e90a";
+    }
+
+    &.icon-graduation-cap:before {
+        content: "\e90b";
+    }
+
+    &.icon-guage:before {
+        content: "\e90c";
+    }
+
+    &.icon-heart:before {
+        content: "\e90d";
+    }
+
+    &.icon-home:before {
+        content: "\e90e";
+    }
+
+    &.icon-location:before {
+        content: "\e90f";
+    }
+
+    &.icon-lock:before {
+        content: "\e910";
+    }
+
+    &.icon-paper-plane:before {
+        content: "\e912";
+    }
+
+    &.icon-people:before {
+        content: "\e913";
+    }
+
+    &.icon-plus:before {
+        content: "\e914";
+    }
+
+    &.icon-price-ribbon:before {
+        content: "\e915";
+    }
+
+    &.icon-star:before {
+        content: "\e916";
+    }
+
+    &.icon-tools:before {
+        content: "\e918";
+    }
+
+    &.icon-truck:before {
+        content: "\e919";
+    }
+
+    &.icon-search:before {
+        content: "\e986";
+    }
+
+    &.icon-eye:before {
+        content: "\e9ce";
+    }
+
+    &.icon-eye-blocked:before {
+        content: "\e9d1";
+        }
+        
+
+    }

frontend/assets/sass/main.scss

+@import 'variables';
+@import 'icons';
+
+
+// Global Styles
+html {
+    background-color: $black;
+    font-size: $base-font-size;
+}
+body{
+    margin:0;
+    font-family: 'Source Code Pro', monospace;
+}

frontend/assets/sass/variables.scss

+// Color Variables
+$yellow: #F7F5A6;
+$light-green: #C2F279;
+$dark-green: #4D9127;
+$red: #FF3660;
+$light-blue: #05DBF2;
+$dark-blue: #183770;
+$dark-grey: #1F2024;
+$grey: #4C5264;
+$light-grey: #D5D5D5;
+$black: #000;
+
+// Define the base font size
+$base-font-size: 14px;
+
+// Define breakpoints
+$mobile: 350px;
+$tablet: 768px;
+$desktop: 960px;
+
+// Define font sizes for each breakpoint
+$mobile-font-size: $base-font-size;
+$tablet-font-size: $base-font-size * 1.2;
+$desktop-font-size: $base-font-size * 1.4;
+
+// Set default font size
+html {
+    font-size: $base-font-size;
+}
+
+// Media queries for font sizes
+@media (min-width: $mobile) {
+    html {
+        font-size: $mobile-font-size;
+    }
+}
+
+@media (min-width: $tablet) {
+    html {
+        font-size: $tablet-font-size;
+    }
+}
+
+@media (min-width: $desktop) {
+    html {
+        font-size: $desktop-font-size;
+    }
+}

frontend/index.html

 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css">
     <title>Siimee</title>
 </head>
 

frontend/src/App.vue

 </script>
 
 <style lang="sass">
+@import '../assets/sass/main'
 #app > .w-app > main
     position: relative
     top: 50px
+    max-width: 960px
+    width:100%
+    margin: 0 auto
 </style>

frontend/src/components/MainNav.vue

 <template lang="pug">
 w-toolbar.mt6.py1(bottom fixed)
-    router-link.w-flex.column(:to='`/`')
-        w-button.pa8(bg-color='primary')
-            w-icon.mr1.icon-home(xl)
-    router-link.w-flex.column(:to='`/pairs`')
-        w-button.pa8(bg-color='primary')
-            w-icon.mr1.icon-people(xl)
+    router-link.w-flex.column.exact-active-link(:to='`/`')
+        w-button.pa8()
+            w-icon.mr1.icon-home(xl :class="{ 'icon-selected': $route.path === '/' }")
+    router-link.w-flex.column.exact-active-link(:to='`/pairs`')
+        w-button.pa8()
+            w-icon.mr1.icon-people(xl, :class="{ 'icon-selected': $route.path === '/pairs' }")
             //- p.text-upper pending matches
-    router-link.w-flex.column(:to='`/messages`')
-        w-button.pa8(bg-color='primary')
-            w-icon.mr1.icon-chat(xl)
+    router-link.w-flex.column.exact-active-link(:to='`/messages`')
+        w-button.pa8()
+            w-icon.mr1.icon-chat(xl, :class="{ 'icon-selected': $route.path === '/messages' }")
             //- p.text-upper active chats
-    router-link.w-flex.column(:to='`/onboarding`')
-        w-button.pa8(bg-color='primary')
+    router-link.w-flex.column.exact-active-link(:to='`/onboarding`')
+        w-button.pa8()
             w-icon.mr1.icon-area-graph(xl)
             //- p.text-upper survey
-    router-link.w-flex.column(:to='`/settings`')
-        w-button.pa8(bg-color='primary' disabled)
-            w-icon.mr1.icon-cog(xl)
+    router-link.w-flex.column.exact-active-link(:to='`/settings`')
+        w-button.pa8(disabled)
+            w-icon.mr1.icon-cog(xl :class="{ 'icon-selected': $route.path === '/settings' }")
             //- p.text-upper settings
 </template>
 
     name: 'MainNav',
 }
 </script>
+
+<style lang="sass">
+@import '../assets/sass/main.scss'
+.w-toolbar
+    max-width: 960px
+    width:100%
+    margin: auto
+    background: $dark-grey
+    color: $light-grey
+
+    .w-button
+        background-color: $dark-grey
+    
+    .icon-selected
+        color: $light-green
+    
+    a
+        color:$light-grey
+</style>
+

frontend/src/components/NamePlate.vue

         flex-direction: column
         align-items: center
         justify-content: center
-        padding: 15px
         min-height: 10vh
         width: 100%
         &.box
-            background-color: #D5D5D5
             border-radius: 6px
             height: 15vw
             width: 15vw

frontend/src/components/PairsList.vue

 </script>
 
 <style lang="sass">
+@import '../assets/sass/main'
 .pairs-list
     color: #fff
     article
-        font-family: 'Century Gothic'
+        font-family: 'Source Pro'
         .dot--icon
             width:12px
             height:12px
             margin: 11px
             border-radius:50%
-            background-color:#60C3FF
+            background-color:$light-blue
         .avatar
             width:40px
             height:40px
             margin: 11px
             border-radius: 6px
-            background-color:#D5D5D5
+            background-color:$light-blue
         .idCard
             color: #fff
             margin: 11px
             p
                 font-size: 14px
 .w-menu--card
-    background-color: #000000 !important
+    background-color: $black !important
 </style>

frontend/src/components/ProfileCard.vue

 import PairingButton from './PairingButton.vue'
 
 const router = useRouter()
-// const isPaired = ref(true)
-const isPaired = ref(false)
+const isPaired = ref(true)
+// const isPaired = ref(false)
 
 const props = defineProps({
     card: {
 </script>
 
 <style lang="sass">
+@import '../assets/sass/main'
+
 .profile-card-list--card
-    background-color: #000
+    background-color: $black
     color: #fff
     width: 100%
     max-width: 450px
     margin: 11px auto
     header > .w-button
-        background-color: #116006
+        background-color: $dark-green
         color: #fff
     footer
         margin-bottom: 22px
         p
-            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+            font-family: Source Pro, AppleGothic, sans-serif
             margin: 11px auto
             padding: 0 7px
             line-height: 1.619em

frontend/src/components/ProfileCardList.vue

 <template lang="pug">
-section.profile-card-list.xs12.w-flex.column
-    article
+section.profile-card-list.xs12.w-flex
+    article.w-flex.xs-col.sm-row.sm-wrap
         ProfileCard.match-layout(
             :aspects='aspects'
             :card='card'
             :key='`${card.pid}-${i}`'
             v-for='(card, i) in cards'
         )
-        w-button.pa8.more-results(bg-color='primary' @click="loadMoreResults()")
+        w-button.pa8.more-results(
+            @click='loadMoreResults()'
+            bg-color='primary'
+        )
 </template>
 
 <script setup>
     },
 })
 
-const loadMoreResults = () => { emit('loadMore') } // TODO update to scroll
+const loadMoreResults = () => {
+    emit('loadMore')
+} // TODO update to scroll
 </script>
 
 <style lang="sass">
+@import '../assets/sass/main'
+
 .profile-card-list
     > header > .w-select >.primary
         margin-top: 0
+
+@media (min-width: $tablet)
+    section.profile-card-list.xs12.w-flex > article
+        display: flex
+        flex-wrap: wrap
+        flex-direction: row
+
+@media (max-width: $tablet)
+    section.profile-card-list.xs12.w-flex > article
+        display: flex
+        flex-wrap: wrap
+        flex-direction: column
+
+
 .more-results
     margin-bottom: 2em
 </style>

frontend/src/components/SummaryBar.vue

                     p {{ tabContent[item].tab }}
                     SpiderChart(
                         :labels='aspects.map(label => label.name)'
-                        :profile-data='aspects.map(data => data.percentage)'
-                        :target-data='targetScore'
+                        :profile-data='aspects.map(data => data.percentage * 10)'
                         :profile-name='name'
+                        :target-data='targetScore'
                         v-if='isTab'
                     )
 
             required: true,
             type: Object,
         },
-        name:{
-            required:true,
-            type: String
+        name: {
+            required: true,
+            type: String,
         },
         isTab: {
             required: false,
     },
     emits: ['tab-change'],
     computed: {
-        targetScore(){
-            try{
-                let aspectResponses = currentProfile._profile.responses.filter(r => [1,2,3,4,5,6].indexOf(r.response_key_id) !== -1)
-                return aspectResponses.map(r => Number(r.val)) 
-            }
-            catch(e){
+        targetScore() {
+            try {
+                let aspectResponses = currentProfile._profile.responses.filter(
+                    r => [1, 2, 3, 4, 5, 6].indexOf(r.response_key_id) !== -1,
+                )
+                return aspectResponses.map(r => Number(r.val))
+            } catch (e) {
                 console.warn('error: No aspect responses for current profile.')
-                return [1,1,1,1,1,1]
+                return [1, 1, 1, 1, 1, 1]
             }
-        }
+        },
     },
     methods: {
         onTabChanged(tabs) {

frontend/src/entities/card/card.js

 /** @module card/card */
-import { aspectsArr } from "../../utils/lang.js"
+import { aspectsArr } from '../../utils/lang.js'
 
 const DEFAULT_ABOUT =
     'Hello! My name is L.L. and I am a nurse from New York. I have been in the healthcare industry for over 6 years.'
     c.locale = `${profile.city}, ${profile.state}`
     c.email = profile.user_email
 
-    let aspectResponses = profile?.responses.filter(r => aspectsArr.indexOf(r.response_key_id) !== -1)
-    if(aspectResponses.length){ // if user has responses for aspects we overwrite default percentages
+    let aspectResponses = profile?.responses.filter(
+        r => aspectsArr.indexOf(r.response_key_id) !== -1,
+    )
+    if (aspectResponses.length) {
+        // if user has responses for aspects we overwrite default percentages
         c.aspects.map(a => {
-            a.percentage = Number(aspectResponses.find(r => responseKeyIdToAspectName[r.response_key_id] == a.name).val )
-            return a 
+            a.percentage = Number(
+                aspectResponses.find(
+                    r => responseKeyIdToAspectName[r.response_key_id] == a.name,
+                ).val,
+            )
+            return a
         })
     }
-
     // TODO: delete me later
     if (profile.profile_description) {
         c.summary.updateTab('about', profile.profile_description)

frontend/src/entities/survey/survey.answer.validator.js

         minDomainSegments: 2,
         tlds: { allow: domains },
     }),
-    // Comment out and uncomment below for more robust password testing
-    password: Joi.string().min(14).max(30),
-    // TODO: consider using a more robust library for password validation
-    // password: Joi.string()
-        // .min(14)
-        // .max(30)
-        // .pattern(
-            // new RegExp(
-                // '^(?=.*[!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?])(?=.*[!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?])[a-zA-Z0-9!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?]{14,}$',
-            // ),
-        // ),
+
+    password: Joi.string().min(10).max(30).pattern(new RegExp('[a-zA-Z0-9]+')),
     // TODO: Change if going international (only works in usa)
     zipcode: Joi.string().min(5).max(5).pattern(new RegExp('^[0-9]{5}$')),
     seeking: Joi.string(),
     distance: Joi.string()
         .min(4)
         .max(15)
-        .pattern(new RegExp('^\\d{1,3}(\\.\\d{1,2})?\\s?(mi|km|mile|miles|kilometer|kilometers)$')),
+        .pattern(
+            new RegExp(
+                '^\\d{1,3}(\\.\\d{1,2})?\\s?(mi|km|mile|miles|kilometer|kilometers)$',
+            ),
+        ),
     blurb: Joi.string().max(200),
     value: Joi.string(),
     aspect: Joi.number(),

frontend/src/views/HomeView.vue

 <template lang="pug">
 main.view--home
-    article.w-flex.column.align-center
+    p {{ cP._profile.user_name }}
+    article.w-flex.sm-column.md-row.align-center
         template(v-if='isLoading')
             w-spinner(bounce)
 
         template(v-else-if='!isLoading && cards.length > 0')
-            ProfileCardList(
-                :cards='cards' 
-                @loadMore='onLoadMore'
-            )
+            ProfileCardList(:cards='cards' @loadMore='onLoadMore')
 
         template(v-else-if='cards.length === 0')
             p No profiles in match_queue.
         }
     },
     computed: {
+        cP() {
+            return currentProfile
+        },
         cards() {
             let initialCards = currentProfile.queue.map(qProfile =>
                 convertToCard(qProfile),

frontend/style.css

-@font-face {
-  font-family: 'icomoon';
-  src: url('assets/fonts/icomoon.eot?6rmrq3');
-  src: url('assets/fonts/icomoon.eot?6rmrq3#iefix') format('embedded-opentype'),
-    url('assets/fonts/icomoon.ttf?6rmrq3') format('truetype'),
-    url('assets/fonts/icomoon.woff?6rmrq3') format('woff'),
-    url('assets/fonts/icomoon.svg?6rmrq3#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-
-[class^="icon-"],
-[class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-cross:before {
-  content: "\e911";
-}
-
-.icon-dots-three-horizontal:before {
-  content: "\e917";
-}
-
-.icon-dots-three-vertical:before {
-  content: "\e91a";
-}
-
-.icon-address:before {
-  content: "\e900";
-}
-
-.icon-area-graph:before {
-  content: "\e901";
-}
-
-.icon-calendar:before {
-  content: "\e902";
-}
-
-.icon-certified:before {
-  content: "\e903";
-}
-
-.icon-chat:before {
-  content: "\e904";
-}
-
-.icon-checkmark:before {
-  content: "\e905";
-}
-
-.icon-clock:before {
-  content: "\e906";
-}
-
-.icon-cog:before {
-  content: "\e907";
-}
-
-.icon-compass:before {
-  content: "\e908";
-}
-
-.icon-emoji-happy:before {
-  content: "\e909";
-}
-
-.icon-envelope:before {
-  content: "\e90a";
-}
-
-.icon-graduation-cap:before {
-  content: "\e90b";
-}
-
-.icon-guage:before {
-  content: "\e90c";
-}
-
-.icon-heart:before {
-  content: "\e90d";
-}
-
-.icon-home:before {
-  content: "\e90e";
-}
-
-.icon-location:before {
-  content: "\e90f";
-}
-
-.icon-lock:before {
-  content: "\e910";
-}
-
-.icon-paper-plane:before {
-  content: "\e912";
-}
-
-.icon-people:before {
-  content: "\e913";
-}
-
-.icon-plus:before {
-  content: "\e914";
-}
-
-.icon-price-ribbon:before {
-  content: "\e915";
-}
-
-.icon-star:before {
-  content: "\e916";
-}
-
-.icon-tools:before {
-  content: "\e918";
-}
-
-.icon-truck:before {
-  content: "\e919";
-}
-
-.icon-search:before {
-  content: "\e986";
-}
-
-.icon-eye:before {
-  content: "\e9ce";
-}
-
-.icon-eye-blocked:before {
-  content: "\e9d1";
-}
-
-.icon-bookmarks:before {
-  content: "\e9d3";
-}
-
-.icon-arrow-left2:before {
-  content: "\ea40";
-}