fix: user profile UI
fix: user profile UI
This commit is contained in:
NGPixel
@@ -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')
|
||||
@@ -84,4 +89,14 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&-title {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user