feat(user-profile): add user profile page

uditbhargava · Aug 9, 2018 · 7332f23 · 7332f23
1 parent ff39bcc
commit 7332f23
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 7 deletions.
diff --git a/src/components/core/Drawer.vue b/src/components/core/Drawer.vue
@@ -34,7 +34,7 @@
           v-for="(link, i) in links"
           :key="i"
           :to="link.to"
-          active-class="primary"
+          active-class="secondary"
           avatar
           class="mb-2"
         >

diff --git a/src/components/core/View.vue b/src/components/core/View.vue
@@ -1,7 +1,6 @@
 <template>
   <v-content>
-    <v-container
-      fluid>
+    <v-container id="core-view">
       <v-fade-transition mode="out-in">
         <router-view />
       </v-fade-transition>
@@ -14,8 +13,14 @@
 export default {
   metaInfo () {
     return {
-      titleTemplate: '%s — Material Design'
+      title: 'Vue Material Dashboard by CreativeTim'
     }
   }
 }
 </script>
+
+<style>
+#core-view {
+  padding-bottom: 128px;
+}
+</style>
diff --git a/src/components/material/Card.vue b/src/components/material/Card.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-card
+    :style="{
+      marginTop: `${offset}px`
+    }"
+    class="mb-5"
+  >
+    <div
+      :style="styles"
+      class="v-card__offset">
+      <slot name="offset" />
+    </div>
+    <v-card-text>
+      <slot />
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+
+  props: {
+    offset: {
+      type: [Number, String],
+      default: 32
+    }
+  },
+
+  computed: {
+    styles () {
+      return {
+        marginBottom: `${-Number(this.offset)}px`,
+        top: `${-Number(this.offset)}px`
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.v-card__offset {
+  padding: 16px;
+  position: relative;
+}
+</style>
diff --git a/src/plugins/theme.js b/src/plugins/theme.js
@@ -1,6 +1,6 @@
 export default {
-  primary: '#4caf50',
-  secondary: '#424242',
+  primary: '#af2cc5',
+  secondary: '#4caf50',
   tertiary: '#495057',
   accent: '#82B1FF',
   error: '#FF5252',

diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
@@ -3,7 +3,118 @@
     <v-layout
       justify-center
       align-center
-    />
+    >
+      <v-flex xs12>
+        <material-card>
+          <v-card
+            slot="offset"
+            color="secondary"
+            class="elevation-10"
+            dark
+          >
+            <div class="pa-3">
+              <div class="title font-weight-light mb-2">Edit Profile</div>
+              <div class="subheading font-weight-thin grey--text text--lighten-2">Complete your profile</div>
+            </div>
+          </v-card>
+
+          <v-form>
+            <v-container py-0>
+              <v-layout wrap>
+                <v-flex
+                  xs12
+                  md4
+                >
+                  <v-text-field
+                    label="Company (disabled)"
+                    disabled/>
+                </v-flex>
+                <v-flex
+                  xs12
+                  md4
+                >
+                  <v-text-field
+                    label="User Name"
+                  />
+                </v-flex>
+                <v-flex
+                  xs12
+                  md4
+                >
+                  <v-text-field label="Email Address"/>
+                </v-flex>
+                <v-flex
+                  xs12
+                  md6
+                >
+                  <v-text-field label="First Name"/>
+                </v-flex>
+                <v-flex
+                  xs12
+                  md6
+                >
+                  <v-text-field label="Last Name"/>
+                </v-flex>
+                <v-flex
+                  xs12
+                  md4>
+                  <v-text-field label="City"/>
+                </v-flex>
+                <v-flex
+                  xs12
+                  md4>
+                  <v-text-field label="Country"/>
+                </v-flex>
+                <v-flex
+                  xs12
+                  md4>
+                  <v-text-field
+                    label="Postal Code"
+                    type="number"/>
+                </v-flex>
+                <v-flex xs12>
+                  <v-textarea
+                    label="About Me"
+                    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                  />
+                </v-flex>
+                <v-flex
+                  xs12
+                  text-xs-right>
+                  <v-btn
+                    large
+                    class="mx-0 font-weight-light"
+                    color="secondary"
+                  >Update Profile</v-btn>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-form>
+        </material-card>
+        <material-card offset="64">
+          <v-avatar
+            slot="offset"
+            class="mx-auto d-block"
+            size="148">
+            <img
+              class="elevation-10"
+              src="https://demos.creative-tim.com/vue-material-dashboard/img/marc.aba54d65.jpg"
+            >
+          </v-avatar>
+          <v-card-text class="text-xs-center">
+            <div class="subheading font-weight-thin mb-3">CEO / CO-FOUNDER</div>
+            <div class="headline font-weight-light mb-3">Alec Thompson</div>
+            <div class="subheading font-weight-light mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</div>
+            <v-btn
+              large
+              color="secondary"
+              round
+              class="font-weight-light"
+            >Follow</v-btn>
+          </v-card-text>
+        </material-card>
+      </v-flex>
+    </v-layout>
   </v-container>
 </template>