Skip to content

Commit

Permalink
fix: user profile UI
Browse files Browse the repository at this point in the history 
fix: user profile UI
  • Loading branch information
@NGPixel
NGPixel committed Apr 6, 2020
1 parent 98f3cc5 commit 8ea699a
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 59 deletions.
45 changes: 30 additions & 15 deletions client/components/profile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,26 @@
v-app(:dark='darkMode').profile
nav-header
v-navigation-drawer.pb-0(v-model='profileDrawerShown', app, fixed, clipped, left, permanent)
v-list(dense)
v-list-item.pt-2(to='/profile')
v-list-item-action: v-icon account_circle
v-list-item-title Profile
v-list-item(to='/preferences')
v-list-item-action: v-icon settings
v-list-item-title Preferences
v-divider.my-2
v-subheader My Content
v-list-item(to='/pages')
v-list-item-action: v-icon pages
v-list-item-title Pages
v-list-item(to='/comments')
v-list-item-action: v-icon question_answer
v-list-item-title Comments
v-list(dense, nav)
v-list-item(to='/profile')
v-list-item-action: v-icon mdi-account-badge
v-list-item-content
v-list-item-title Profile
v-list-item(to='/preferences', disabled)
v-list-item-action: v-icon(color='grey lighten-1') mdi-settings-outline
v-list-item-content
v-list-item-title Preferences
v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
v-list-item(to='/pages', disabled)
v-list-item-action: v-icon(color='grey lighten-1') mdi-file-document
v-list-item-content
v-list-item-title Pages
v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
v-list-item(to='/comments', disabled)
v-list-item-action: v-icon(color='grey lighten-1') mdi-message-reply-text
v-list-item-content
v-list-item-title Comments
v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon

v-content
transition(name='profile-router')
Expand Down Expand Up @@ -84,4 +89,14 @@ export default {
}
}
.profile-header {
display: flex;
justify-content: flex-start;
align-items: center;
&-title {
margin-left: 1rem;
}
}
</style>
89 changes: 45 additions & 44 deletions client/components/profile/profile.vue
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,92 @@
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs6)
.headline.primary--text Profile
.subheading.grey--text Personal profile
v-flex(xs6).text-xs-right
v-btn(outline, color='primary').mr-0
v-icon(left) public
span View Public Profile
v-flex(xs12)
.profile-header
img.animated.fadeInUp(src='/svg/icon-profile.svg', alt='Users', style='width: 80px;')
.profile-header-title
.headline.primary--text.animated.fadeInLeft Profile
.subheading.grey--text.animated.fadeInLeft Personal profile
v-spacer
v-btn.animated.fadeInDown(outlined, color='primary', disabled).mr-0
v-icon(left) mdi-earth
span View Public Profile
v-flex(lg6 xs12)
v-card
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading User Details
v-toolbar-title.subtitle-1 User Details
v-card-text
v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='person')
v-text-field(label='Job Title', :counter='255', prepend-icon='accessibility')
v-text-field(label='Location / Office', :counter='255', prepend-icon='location_on')
v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='mdi-account')
v-text-field(label='Job Title', :counter='255', prepend-icon='mdi-human')
v-text-field(label='Location / Office', :counter='255', prepend-icon='mdi-map-marker')
v-card-chin
v-spacer
v-btn(color='primary')
v-icon(left) chevron_right
span Save
v-btn.px-4(color='success')
v-icon(left) mdi-content-save
span {{$t('common:actions.save')}}
v-card.mt-3
v-toolbar(color='purple darken-4', dark, dense, flat)
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Authentication
.subtitle-1 Authentication
v-card-text
v-subheader.pl-0 Provider
v-toolbar(
flat
:color='darkMode ? "grey darken-2" : "purple lighten-5"'
:color='$vuetify.theme.dark ? "grey darken-2" : "purple lighten-5"'
dense
:class='darkMode ? "grey--text text--lighten-1" : "purple--text text--darken-4"'
:class='$vuetify.theme.dark ? "grey--text text--lighten-1" : "purple--text text--darken-4"'
)
v-icon(:color='darkMode ? "grey lighten-1" : "purple darken-4"') supervised_user_circle
v-icon(:color='$vuetify.theme.dark ? "grey lighten-1" : "purple darken-4"') mdi-shield-lock
.subheading.ml-3 Local
v-divider.mt-3
v-subheader.pl-0 Two-Factor Authentication (2FA)
.caption.mb-2 2FA adds an extra layer of security by requiring a unique code generated on your smartphone when signing in.
v-btn(color='purple darken-4', dark, depressed).ml-0 Enable 2FA
v-btn(color='purple darken-4', disabled).ml-0 Enable 2FA
v-btn(color='purple darken-4', dark, depressed, disabled).ml-0 Disable 2FA
v-divider.mt-3
v-subheader.pl-0 Change Password
v-text-field(label='Current Password', prepend-icon='last_page')
v-text-field(label='New Password', prepend-icon='last_page')
v-text-field(label='Confirm New Password', prepend-icon='last_page')
v-btn(color='purple darken-4', dark, depressed).ml-0 Change Password
v-text-field(label='Current Password', type='password', prepend-icon='mdi-textbox-password')
v-text-field(label='New Password', type='password', prepend-icon='mdi-textbox-password')
v-text-field(label='Confirm New Password', type='password', prepend-icon='mdi-textbox-password')
v-card-chin
v-spacer
v-btn.px-4(color='purple darken-4', dark)
v-icon(left) mdi-progress-check
span Change Password
v-flex(lg6 xs12)
v-card
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Picture
.subtitle-1 Picture
v-card-title
v-avatar(size='64', color='grey')
v-icon(size='64', color='grey lighten-2') account_circle
v-btn(depressed).ml-4.elevation-1 Upload Picture
v-icon(size='64', color='grey lighten-2') mdi-account-circle
v-btn(depressed).mx-4.elevation-1 Upload Picture
v-btn(depressed, disabled).elevation-1 Remove Picture
v-card.mt-3
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title
.subheading Activity
.subtitle-1 Activity
v-card-text.grey--text.text--darken-2
.body-2.grey--text Joined on
.body-1: strong January 1st, 2018 at 12:00 AM
.body-2.grey--text.mt-3 Profile last updated on
.body-1: strong January 1st, 2018 at 12:00 AM
.body-2.grey--text.mt-3 Last login on
.body-1: strong January 1st, 2018 at 12:00 AM
.caption.grey--text Joined on
.body-2: strong January 1st, 2018 at 12:00 AM
.caption.grey--text.mt-3 Profile last updated on
.body-2: strong January 1st, 2018 at 12:00 AM
.caption.grey--text.mt-3 Last login on
.body-2: strong January 1st, 2018 at 12:00 AM
v-divider.mt-3
.body-2.grey--text.mt-3 Pages created
.body-1: strong 0
.body-2.grey--text.mt-3 Comments posted
.body-1: strong 0
.caption.grey--text.mt-3 Pages created
.body-2: strong 0
.caption.grey--text.mt-3 Comments posted
.body-2: strong 0
</template>

<script>
/* global siteConfig */
export default {
data() {
return {
name: 'John Doe'
}
},
computed: {
darkMode() { return siteConfig.darkMode }
}
}
</script>
Expand Down
1 change: 1 addition & 0 deletions client/static/svg/icon-profile.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8ea699a

Please sign in to comment.