Worked on implementing the profile page layout, #725

Carrene · Jul 30, 2019 · 8b0cc05 · 8b0cc05
1 parent 38fbfcc
commit 8b0cc05
Show file tree

Hide file tree

Showing 13 changed files with 139 additions and 27 deletions.
diff --git a/src/components/ProfilePictureEditor.vue b/src/components/ProfilePictureEditor.vue
@@ -16,6 +16,7 @@
         :picture="auth.member.avatar"
       />
     </div>
+    <div class="user-name">{{ member.title }}</div>
     <snackbar
       :status="status"
       :message="message"
@@ -78,6 +79,7 @@ export default {
   },
   beforeMount () {
     this.member = new this.CasMember({ id: this.auth.member.referenceId })
+    console.log(this.member)
   }
 }
 </script>
diff --git a/src/pages/Profile.vue b/src/pages/Profile.vue
@@ -7,7 +7,7 @@
 
       <!-- HEADER TITLE -->
 
-      <p class="title">Public profile</p>
+      <p class="title">Profile</p>
 
       <!-- ACTION -->
 
@@ -24,7 +24,86 @@
 
       <!-- PROFILE DASHBOARD -->
 
-      <div class="left-column"></div>
+      <div class="left-column">
+        <div class="title">
+          <p class="text">Personal Information</p>
+        </div>
+
+        <!-- FORMS -->
+
+        <form class="form">
+
+          <!-- LEFT SIDE -->
+
+          <div class="left-side inputs">
+            <div class="input-container">
+              <label class="label">
+                First Name
+              </label>
+              <input
+                type="text"
+                class="light-primary-input"
+              >
+            </div>
+            <div class="input-container">
+              <label class="label">
+                ID
+              </label>
+              <input
+                type="text"
+                class="light-primary-input"
+              >
+            </div>
+            <div class="input-container">
+              <label class="label">
+                Phone
+              </label>
+              <input
+                type="text"
+                class="light-primary-input"
+              >
+            </div>
+            <div class="input-container">
+              <label class="label">
+                Contact Me
+              </label>
+              <v-select></v-select>
+            </div>
+          </div>
+
+          <!-- RIGHT SIDE -->
+
+          <div class="right-side inputs">
+            <div class="input-container">
+              <label class="label">
+                Last Name
+              </label>
+              <input
+                type="text"
+                class="light-primary-input"
+              >
+            </div>
+            <div class="input-container">
+              <label class="label">
+                Organizations Email
+              </label>
+              <input
+                type="text"
+                class="light-primary-input"
+              >
+            </div>
+            <div class="input-container">
+              <label class="label">
+                Birth
+              </label>
+              <input
+                type="text"
+                class="light-primary-input"
+              >
+            </div>
+          </div>
+        </form>
+      </div>
 
       <!-- PROFILE FORM -->
 
@@ -55,6 +134,8 @@
               :validation="$v.member.firstName"
               :metadata="casMemberMetadata.fields.firstName"
             />
+            <label class="label">Skills</label>
+            <v-select></v-select>
           </div>
           <div class="input-container">
             <label
@@ -72,19 +153,15 @@
               :validation="$v.member.lastName"
               :metadata="casMemberMetadata.fields.lastName"
             />
+            <label>Group</label>
+            <v-select></v-select>
           </div>
           <div class="input-container">
             <label
               for="email"
               class="label"
-            >{{ casMemberMetadata.fields.email.label }}</label>
-            <input
-              type="email"
-              id="email"
-              class="light-primary-input disabled"
-              v-model.trim="member.email"
-              readonly
-            >
+            >Specialties</label>
+            <v-select></v-select>
           </div>
         </div>
         <snackbar

diff --git a/src/pages/Security.vue b/src/pages/Security.vue
@@ -24,7 +24,7 @@
 
       <!-- LEFT COLUMN -->
 
-      <div class="right-column">
+      <div class="left-column">
 
         <!-- ACCOUNT FORM -->
 

diff --git a/src/styles/_layout.sass b/src/styles/_layout.sass
@@ -132,6 +132,7 @@ body
     align-content: center
     box-sizing: border-box
     display: grid
+    overflow: hidden
 
   .icon
     position: absolute
@@ -147,7 +148,7 @@ body
 
   &.large
     .pic
-      width: 180px
+      width: 160px
 
     .icon
       bottom: 10px

diff --git a/src/styles/_material.sass b/src/styles/_material.sass
@@ -188,7 +188,7 @@ body
   cursor: pointer
 
   .pic
-    border-radius: $default-border-radius
+    border-radius: 50%
 
 .input-container // INPUTS
 
@@ -423,3 +423,5 @@ body
 @import 'material/good_news_material'
 @import 'material/bad_news_material'
 @import 'material/mojo_material'
+@import 'material/profile_material'
+@import 'material/profile_picture_editor_material'
diff --git a/src/styles/_typography.sass b/src/styles/_typography.sass
@@ -112,3 +112,4 @@ body
 @import 'typography/release_note_typography'
 @import 'typography/good_news_typography'
 @import 'typography/bad_news_typography'
+@import 'typography/profile_typography'
diff --git a/src/styles/_variables.sass b/src/styles/_variables.sass
@@ -35,6 +35,7 @@ $small-border-radius: 3px
 $large-border-radius: 10px
 $box-shadow-color: rgba($text-color, 0.3)
 $selection-border-thickness: 5px
+$gradient: linear-gradient(to right, rgba($tertiary-color, 0) 0%, rgba($primary-color, 0.15) 53%, rgba($tertiary-color, 0) 100%)
 
 // typography
 $light: 300

diff --git a/src/styles/layout/_my_organizations_layout.sass b/src/styles/layout/_my_organizations_layout.sass
@@ -6,6 +6,8 @@
 
   > .content
     > .left-column
+      padding: $gutter * 12
+
       .organization
         display: grid
         grid-auto-flow: column

diff --git a/src/styles/layout/_personal_settings_layout.sass b/src/styles/layout/_personal_settings_layout.sass
@@ -13,7 +13,7 @@
       grid-template-columns: 1fr auto
       padding: 0 ($gutter * 8)
 
-      .title
+      > .title
         align-self: center
 
     .content
@@ -25,11 +25,11 @@
       .right-column
         align-content: start
         display: grid
-        height: calc(100% - 24px)
-        padding: $gutter * 12
+        // FIXME: Add this line if needed
+        // height: calc(100% - 24px)
 
         &.right-column
-          grid-row-gap: $gutter * 12
+          padding: $gutter * 12
 
           .inputs
             align-content: start

diff --git a/src/styles/layout/_profile_layout.sass b/src/styles/layout/_profile_layout.sass
@@ -4,7 +4,32 @@
   height: 100%
 
   > .content
+    > .left-column
+      display: grid
+      grid-row-gap: 56px
+      padding: 0 ($gutter * 12) 0 ($gutter * 12)
+
+      > .title
+        display: grid
+        height: 150px
+
+        .text
+          align-content: center
+          display: grid
+          justify-content: center
+
+      > .form
+        display: grid
+        grid-auto-flow: column
+        grid-column-gap: 12px
+
+        .inputs
+          align-content: start
+          display: grid
+          grid-row-gap: 12px
+
     > .right-column
+      grid-row-gap: 64px
       grid-template-rows: auto 1fr
       position: relative
 

diff --git a/src/styles/layout/_profile_picture_editor_layout.sass b/src/styles/layout/_profile_picture_editor_layout.sass
@@ -1,4 +1,8 @@
 #profilePictureEditor
   display: grid
+  grid-row-gap: $gutter * 18
   justify-content: center
   justify-items: center
+
+  .user-name
+    height: 25px
diff --git a/src/styles/layout/_security_layout.sass b/src/styles/layout/_security_layout.sass
@@ -14,10 +14,13 @@
     display: grid
     grid-template-columns: repeat(2, 1fr)
 
-    .right-column
+    .left-column
+      padding: $gutter * 12
+
       .form
         display: grid
         grid-row-gap: $gutter * 12
 
         .actions
           justify-self: end
+
diff --git a/src/styles/typography/_profile_picture_editor_typography.sass b/src/styles/typography/_profile_picture_editor_typography.sass
@@ -1,10 +1,4 @@
 #profilePictureEditor
-  > .content
-    .name
-      font-size: 20px
-
-    .title
-      font-size: 16px
-
-    .email
-      font-size: 16px
+  .user-name
+    font-size: 18px
+    font-weight: $bold