:recycle: changing line-endings | forcing tabbed layout on profile card

frontend/src/components/ProfileCard.vue

@@ -17,12 +17,22 @@ w-card.profile-card-list--card.xs12
                 w-icon.mr1.icon-chat(xl)
                 | start chat
 
+            //- TODO: Uncomment me
+            //- SummaryBar(
+            //-     :aspects='aspects'
+            //-     :is-tab='isPaired'
+            //-     :tab-content='card.summary'
+            //-     @tab-change='onTab'
+            //- )
+
+            //- This version forces tabs on
             SummaryBar(
                 :aspects='aspects'
-                :is-tab='isPaired'
+                :is-tab='true'
                 :tab-content='card.summary'
                 @tab-change='onTab'
             )
+
             TagList(v-if='!isPaired || isList')
 
     article.xs12.w-flex.column.justify-space-between

frontend/src/components/SummaryBar.vue

@@ -1,112 +1,113 @@
-<template lang="pug">
-section.w-flex.column.pb5
-    nav.fill-width.w-flex.column.justify-space-between
-        // Tabbed Layout
-        w-tabs(
-            :items='Object.keys(tabContent)'
-            @input='onTabChanged'
-            center
-            fill-bar
-            v-if='isTab'
-        )
-            template(#item-title='{ item }')
-                .w-flex.column.justify-start
-                    p(v-if='tabContent[item].matchPerc') {{ tabContent[item].matchPerc }}%
-                    p(v-else) &nbsp;
-                    p {{ item }}
-            // About Tab
-            template(#item-content.1='{ item }')
-                .tab--about
-                    p {{ tabContent[item].tab }}
-                    br
-                    p {{ tabContent[item].tab }}
-                    br
-                    hr
-
-            // Passion Tab
-            template(#item-content.2='{ item }')
-                .tab--passion
-                    p {{ tabContent[item].tab }}
-                    SpiderChart(
-                        :labels='aspects.map(label => label.name)'
-                        :profile-data='profileScore'
-                        :target-data='targetScore'
-                        profile-name='lucy'
-                        v-if='isTab'
-                    )
-
-            // Aspirations Tab
-            template(#item-content.3='{ item }')
-                .tab--aspirations
-                    p {{ tabContent[item].tab }}
-
-            // Skills Tab
-            template(#item-content.4='{ item }')
-                .tab--skills
-                    p {{ tabContent[item].tab }}
-
-        // Untabbed Layout
-        ul.w-flex.row.justify-space-between(v-else)
-            template(
-                :key='index'
-                v-for='(item, index) in Object.keys(tabContent)'
-            )
-                li.w-flex.row(v-if='item !== "about"')
-                    w-icon.mr1.icon-compass(xl)
-                    .w-flex.column.justify-start
-                        p 
-                            span {{ tabContent[item].matchPerc }}%
-                        p.text-capitalize {{ item }}
-</template>
-
-<script>
-import SpiderChart from './SpiderChart.vue'
-
-export default {
-    components: { SpiderChart },
-    props: {
-        aspects: {
-            required: true,
-            type: Array,
-        },
-        tabContent: {
-            required: true,
-            type: Object,
-        },
-        isTab: {
-            required: false,
-            type: Boolean,
-            default: false,
-        },
-        showIcon: {
-            required: false,
-            type: Boolean,
-            default: true,
-        },
-    },
-    emits: ['tab-change'],
-    data: () => ({
-        profileScore: [5.7, 5.2, 4.8, 5.2, 4.9, 4.9],
-        targetScore: [5.3, 4.8, 5.7, 4.8, 5.6, 4.8],
-    }),
-    methods: {
-        onTabChanged(tabs) {
-            this.$emit('tab-change', tabs)
-        },
-    },
-}
-</script>
-<style lang="sass">
-    section
-        font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
-        ul
-            margin: 11px 0
-            li
-                margin: 0 7px
-                font-size: .8em
-                p > span
-                    font-weight: bold
-                    font-size: 1em
-            li:not(:last-child)
-                border-right: 1px solid #fff
-</style>
+<template lang="pug">
+section.w-flex.column.pb5
+    nav.fill-width.w-flex.column.justify-space-between
+        // Tabbed Layout
+        w-tabs(
+            :items='Object.keys(tabContent)'
+            @input='onTabChanged'
+            center
+            fill-bar
+            v-if='isTab'
+        )
+            template(#item-title='{ item }')
+                .w-flex.column.justify-start
+                    p(v-if='tabContent[item].matchPerc') {{ tabContent[item].matchPerc }}%
+                    p(v-else) &nbsp;
+                    p {{ item }}
+
+            // About Tab
+            template(#item-content.1='{ item }')
+                .tab--about
+                    p {{ tabContent[item].tab }}
+                    br
+                    p {{ tabContent[item].tab }}
+                    br
+                    hr
+
+            // Passion Tab
+            template(#item-content.2='{ item }')
+                .tab--passion
+                    p {{ tabContent[item].tab }}
+                    SpiderChart(
+                        :labels='aspects.map(label => label.name)'
+                        :profile-data='profileScore'
+                        :target-data='targetScore'
+                        profile-name='lucy'
+                        v-if='isTab'
+                    )
+
+            // Aspirations Tab
+            template(#item-content.3='{ item }')
+                .tab--aspirations
+                    p {{ tabContent[item].tab }}
+
+            // Skills Tab
+            template(#item-content.4='{ item }')
+                .tab--skills
+                    p {{ tabContent[item].tab }}
+
+        // Untabbed Layout
+        ul.w-flex.row.justify-space-between(v-else)
+            template(
+                :key='index'
+                v-for='(item, index) in Object.keys(tabContent)'
+            )
+                li.w-flex.row(v-if='item !== "about"')
+                    w-icon.mr1.icon-compass(xl)
+                    .w-flex.column.justify-start
+                        p
+                            span {{ tabContent[item].matchPerc }}%
+                        p.text-capitalize {{ item }}
+</template>
+
+<script>
+import SpiderChart from './SpiderChart.vue'
+
+export default {
+    components: { SpiderChart },
+    props: {
+        aspects: {
+            required: true,
+            type: Array,
+        },
+        tabContent: {
+            required: true,
+            type: Object,
+        },
+        isTab: {
+            required: false,
+            type: Boolean,
+            default: false,
+        },
+        showIcon: {
+            required: false,
+            type: Boolean,
+            default: true,
+        },
+    },
+    emits: ['tab-change'],
+    data: () => ({
+        profileScore: [5.7, 5.2, 4.8, 5.2, 4.9, 4.9],
+        targetScore: [5.3, 4.8, 5.7, 4.8, 5.6, 4.8],
+    }),
+    methods: {
+        onTabChanged(tabs) {
+            this.$emit('tab-change', tabs)
+        },
+    },
+}
+</script>
+<style lang="sass">
+section
+    font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+    ul
+        margin: 11px 0
+        li
+            margin: 0 7px
+            font-size: .8em
+            p > span
+                font-weight: bold
+                font-size: 1em
+        li:not(:last-child)
+            border-right: 1px solid #fff
+</style>