Worked on updating profile page leyout with new design, #725

Carrene · Aug 3, 2019 · 5fab879 · 5fab879
1 parent b97ca1d
commit 5fab879
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 28 deletions.
diff --git a/src/assets/profile-default.svg b/src/assets/profile-default.svg
diff --git a/src/components/ProfilePictureEditor.vue b/src/components/ProfilePictureEditor.vue
@@ -16,7 +16,7 @@
         :picture="auth.member.avatar"
       />
     </div>
-    <div class="user-name">{{ member.title }}</div>
+    <div class="user-name">{{ auth.member.title }}</div>
     <snackbar
       :status="status"
       :message="message"

diff --git a/src/pages/Profile.vue b/src/pages/Profile.vue
@@ -1,23 +1,6 @@
 <template>
   <div id="profile">
 
-    <!-- HEADER -->
-
-    <div class="header">
-
-      <!-- HEADER TITLE -->
-
-      <p class="title">Profile</p>
-
-      <!-- ACTION -->
-
-      <button
-        class="secondary-button"
-        :disabled="member.__status__ !== 'dirty'"
-        @click="updateMember()"
-      >Update Profile</button>
-    </div>
-
     <!-- PROFILE CONTENTS -->
 
     <div class="content">
@@ -85,6 +68,25 @@
                 <label class="label">
                   Contact Me
                 </label>
+                <v-select
+                  :options="socialMediaList"
+                  label="name"
+                >
+                  <template
+                    slot="option"
+                    slot-scope="social"
+                  >
+                    <img
+                      :src="social.logo"
+                      :alt="social.name"
+                      class="icon"
+                    >
+                  </template>
+                </v-select>
+              </div>
+              <div class="input-container">
+                <label class="label">
+                </label>
                 <v-select></v-select>
               </div>
               <button
@@ -95,7 +97,6 @@
                   src="./../assets/plus.svg"
                   class="plus-icon"
                 >
-                ADD
               </button>
             </div>
           </div>
@@ -215,7 +216,21 @@ export default {
       status: null,
       message: null,
       selectedCountry: null,
-      showPhone: false
+      showPhone: false,
+      socialMediaList: [
+        {
+          logo: require('../assets/twitter-logo.svg'),
+          name: 'twitter'
+        },
+        {
+          logo: require('../assets/facebook-logo.svg'),
+          name: 'facebook'
+        },
+        {
+          logo: require('../assets/linkedin-logo.svg'),
+          name: 'linkedIn'
+        }
+      ]
     }
   },
   validations () {

diff --git a/src/styles/_material.sass b/src/styles/_material.sass
@@ -191,7 +191,6 @@ body
     border-radius: 50%
 
   &.small
-    border: 1px solid $dark-tertiary-color
     border-radius: 50%
 
 

diff --git a/src/styles/layout/_profile_layout.sass b/src/styles/layout/_profile_layout.sass
@@ -1,6 +1,6 @@
 
 #profile
-  grid-template-rows: 45px 1fr
+  // grid-template-rows: 45px 1fr
   height: 100%
 
   > .content
@@ -35,17 +35,23 @@
 
           &.left-side
             .contact-me
+              align-items: end
               display: grid
-              grid-column-gap: $gutter * 12
-              grid-template-columns: 1fr auto
+              grid-column-gap: $gutter * 4
+              grid-template-columns: auto 1fr auto
+
+              img
+                width: 20px
 
               .secondary-button
                 align-self: end
                 justify-self: end
-                padding: ($gutter * 10) ($gutter * 28)
+                padding: $gutter * 8
 
                 .plus-icon
-                  width: 14px
+                  align-self: center
+                  display: grid
+                  width: 22px
 
     > .right-column
       grid-row-gap: 64px
-Original file line number
+Diff line change
@@ Expand Up / @@ -191,7 +191,6 @@ body @@
         border-radius: 50%
       &.small
-        border: 1px solid $dark-tertiary-color
         border-radius: 50%
@@ Expand Down @@