fix: user profile UI
fix: user profile UI
This commit is contained in:
NGPixel
Nicolas Giard
parent
98f3cc5582
commit
8ea699ac7a
@ -2,21 +2,26 @@
|
|||||||
v-app(:dark='darkMode').profile
|
v-app(:dark='darkMode').profile
|
||||||
nav-header
|
nav-header
|
||||||
v-navigation-drawer.pb-0(v-model='profileDrawerShown', app, fixed, clipped, left, permanent)
|
v-navigation-drawer.pb-0(v-model='profileDrawerShown', app, fixed, clipped, left, permanent)
|
||||||
v-list(dense)
|
v-list(dense, nav)
|
||||||
v-list-item.pt-2(to='/profile')
|
v-list-item(to='/profile')
|
||||||
v-list-item-action: v-icon account_circle
|
v-list-item-action: v-icon mdi-account-badge
|
||||||
v-list-item-title Profile
|
v-list-item-content
|
||||||
v-list-item(to='/preferences')
|
v-list-item-title Profile
|
||||||
v-list-item-action: v-icon settings
|
v-list-item(to='/preferences', disabled)
|
||||||
v-list-item-title Preferences
|
v-list-item-action: v-icon(color='grey lighten-1') mdi-settings-outline
|
||||||
v-divider.my-2
|
v-list-item-content
|
||||||
v-subheader My Content
|
v-list-item-title Preferences
|
||||||
v-list-item(to='/pages')
|
v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
|
||||||
v-list-item-action: v-icon pages
|
v-list-item(to='/pages', disabled)
|
||||||
v-list-item-title Pages
|
v-list-item-action: v-icon(color='grey lighten-1') mdi-file-document
|
||||||
v-list-item(to='/comments')
|
v-list-item-content
|
||||||
v-list-item-action: v-icon question_answer
|
v-list-item-title Pages
|
||||||
v-list-item-title Comments
|
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
|
v-content
|
||||||
transition(name='profile-router')
|
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>
|
</style>
|
||||||
|
|||||||
@ -1,91 +1,92 @@
|
|||||||
<template lang='pug'>
|
<template lang='pug'>
|
||||||
v-container(fluid, grid-list-lg)
|
v-container(fluid, grid-list-lg)
|
||||||
v-layout(row wrap)
|
v-layout(row wrap)
|
||||||
v-flex(xs6)
|
v-flex(xs12)
|
||||||
.headline.primary--text Profile
|
.profile-header
|
||||||
.subheading.grey--text Personal profile
|
img.animated.fadeInUp(src='/svg/icon-profile.svg', alt='Users', style='width: 80px;')
|
||||||
v-flex(xs6).text-xs-right
|
.profile-header-title
|
||||||
v-btn(outline, color='primary').mr-0
|
.headline.primary--text.animated.fadeInLeft Profile
|
||||||
v-icon(left) public
|
.subheading.grey--text.animated.fadeInLeft Personal profile
|
||||||
span View Public 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-flex(lg6 xs12)
|
||||||
v-card
|
v-card
|
||||||
v-toolbar(color='primary', dark, dense, flat)
|
v-toolbar(color='primary', dark, dense, flat)
|
||||||
v-toolbar-title
|
v-toolbar-title.subtitle-1 User Details
|
||||||
.subheading User Details
|
|
||||||
v-card-text
|
v-card-text
|
||||||
v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='person')
|
v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='mdi-account')
|
||||||
v-text-field(label='Job Title', :counter='255', prepend-icon='accessibility')
|
v-text-field(label='Job Title', :counter='255', prepend-icon='mdi-human')
|
||||||
v-text-field(label='Location / Office', :counter='255', prepend-icon='location_on')
|
v-text-field(label='Location / Office', :counter='255', prepend-icon='mdi-map-marker')
|
||||||
v-card-chin
|
v-card-chin
|
||||||
v-spacer
|
v-spacer
|
||||||
v-btn(color='primary')
|
v-btn.px-4(color='success')
|
||||||
v-icon(left) chevron_right
|
v-icon(left) mdi-content-save
|
||||||
span Save
|
span {{$t('common:actions.save')}}
|
||||||
v-card.mt-3
|
v-card.mt-3
|
||||||
v-toolbar(color='purple darken-4', dark, dense, flat)
|
v-toolbar(color='primary', dark, dense, flat)
|
||||||
v-toolbar-title
|
v-toolbar-title
|
||||||
.subheading Authentication
|
.subtitle-1 Authentication
|
||||||
v-card-text
|
v-card-text
|
||||||
v-subheader.pl-0 Provider
|
v-subheader.pl-0 Provider
|
||||||
v-toolbar(
|
v-toolbar(
|
||||||
flat
|
flat
|
||||||
:color='darkMode ? "grey darken-2" : "purple lighten-5"'
|
:color='$vuetify.theme.dark ? "grey darken-2" : "purple lighten-5"'
|
||||||
dense
|
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
|
.subheading.ml-3 Local
|
||||||
v-divider.mt-3
|
v-divider.mt-3
|
||||||
v-subheader.pl-0 Two-Factor Authentication (2FA)
|
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.
|
.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-btn(color='purple darken-4', dark, depressed, disabled).ml-0 Disable 2FA
|
||||||
v-divider.mt-3
|
v-divider.mt-3
|
||||||
v-subheader.pl-0 Change Password
|
v-subheader.pl-0 Change Password
|
||||||
v-text-field(label='Current Password', prepend-icon='last_page')
|
v-text-field(label='Current Password', type='password', prepend-icon='mdi-textbox-password')
|
||||||
v-text-field(label='New Password', prepend-icon='last_page')
|
v-text-field(label='New Password', type='password', prepend-icon='mdi-textbox-password')
|
||||||
v-text-field(label='Confirm New Password', prepend-icon='last_page')
|
v-text-field(label='Confirm New Password', type='password', prepend-icon='mdi-textbox-password')
|
||||||
v-btn(color='purple darken-4', dark, depressed).ml-0 Change 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-flex(lg6 xs12)
|
||||||
v-card
|
v-card
|
||||||
v-toolbar(color='primary', dark, dense, flat)
|
v-toolbar(color='primary', dark, dense, flat)
|
||||||
v-toolbar-title
|
v-toolbar-title
|
||||||
.subheading Picture
|
.subtitle-1 Picture
|
||||||
v-card-title
|
v-card-title
|
||||||
v-avatar(size='64', color='grey')
|
v-avatar(size='64', color='grey')
|
||||||
v-icon(size='64', color='grey lighten-2') account_circle
|
v-icon(size='64', color='grey lighten-2') mdi-account-circle
|
||||||
v-btn(depressed).ml-4.elevation-1 Upload Picture
|
v-btn(depressed).mx-4.elevation-1 Upload Picture
|
||||||
v-btn(depressed, disabled).elevation-1 Remove Picture
|
v-btn(depressed, disabled).elevation-1 Remove Picture
|
||||||
v-card.mt-3
|
v-card.mt-3
|
||||||
v-toolbar(color='teal', dark, dense, flat)
|
v-toolbar(color='teal', dark, dense, flat)
|
||||||
v-toolbar-title
|
v-toolbar-title
|
||||||
.subheading Activity
|
.subtitle-1 Activity
|
||||||
v-card-text.grey--text.text--darken-2
|
v-card-text.grey--text.text--darken-2
|
||||||
.body-2.grey--text Joined on
|
.caption.grey--text Joined on
|
||||||
.body-1: strong January 1st, 2018 at 12:00 AM
|
.body-2: strong January 1st, 2018 at 12:00 AM
|
||||||
.body-2.grey--text.mt-3 Profile last updated on
|
.caption.grey--text.mt-3 Profile last updated on
|
||||||
.body-1: strong January 1st, 2018 at 12:00 AM
|
.body-2: strong January 1st, 2018 at 12:00 AM
|
||||||
.body-2.grey--text.mt-3 Last login on
|
.caption.grey--text.mt-3 Last login on
|
||||||
.body-1: strong January 1st, 2018 at 12:00 AM
|
.body-2: strong January 1st, 2018 at 12:00 AM
|
||||||
v-divider.mt-3
|
v-divider.mt-3
|
||||||
.body-2.grey--text.mt-3 Pages created
|
.caption.grey--text.mt-3 Pages created
|
||||||
.body-1: strong 0
|
.body-2: strong 0
|
||||||
.body-2.grey--text.mt-3 Comments posted
|
.caption.grey--text.mt-3 Comments posted
|
||||||
.body-1: strong 0
|
.body-2: strong 0
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* global siteConfig */
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
name: 'John Doe'
|
name: 'John Doe'
|
||||||
}
|
}
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
darkMode() { return siteConfig.darkMode }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
1
client/static/svg/icon-profile.svg
Normal file
1
client/static/svg/icon-profile.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="96px" height="96px"><linearGradient id="okd7dFeSUq9~c8_MiZYJSa" x1="32" x2="32" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSa)" d="M57.121,17.707l-8.828-8.828C47.727,8.312,46.973,8,46.172,8H23c-1.654,0-3,1.346-3,3v10.051 c-5.046,0.503-9,4.773-9,9.949c-2.206,0-4,1.794-4,4s1.794,4,4,4h0.461c0.201,0.639,0.467,1.25,0.787,1.827 C8.365,43.628,6,48.163,6,53c0,1.654,1.346,3,3,3h22h5h19c1.654,0,3-1.346,3-3V19.829C58,19.027,57.687,18.273,57.121,17.707z M48,11.414L54.586,18H49c-0.552,0-1-0.449-1-1V11.414z M13,31c0-4.411,3.589-8,8-8s8,3.589,8,8v5c0,4.411-3.589,8-8,8s-8-3.588-8-8 V31z M11,37c-1.103,0-2-0.897-2-2s0.897-2,2-2v3c0,0.337,0.018,0.671,0.051,1H11z M21,46c3.047,0,5.776-1.374,7.612-3.531 c0.542,0.393,1.052,0.821,1.521,1.287C27.845,46.451,24.551,48,21,48s-6.845-1.549-9.133-4.243c0.47-0.466,0.979-0.894,1.521-1.287 C15.224,44.626,17.953,46,21,46z M31,54h-1v-2h-2v2H14v-2h-2v2H9c-0.552,0-1-0.449-1-1c0-2.814,0.926-5.51,2.551-7.715 C13.21,48.281,16.961,50,21,50s7.79-1.719,10.45-4.715C33.074,47.49,34,50.186,34,53v1H31z M55,54H36v-1 c0-4.837-2.364-9.372-6.248-12.173c0.32-0.577,0.585-1.188,0.787-1.827H31c2.206,0,4-1.794,4-4s-1.794-4-4-4 c0-5.177-3.954-9.446-9-9.949V11c0-0.551,0.448-1,1-1h23v7c0,1.654,1.346,3,3,3h7v33C56,53.551,55.552,54,55,54z M31,36v-3 c1.103,0,2,0.897,2,2s-0.897,2-2,2h-0.051C30.982,36.671,31,36.338,31,36z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSb" x1="41" x2="41" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSb)" d="M32 24H50V26H32z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSc" x1="43" x2="43" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSc)" d="M36 28H50V30H36z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSd" x1="44" x2="44" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSd)" d="M38 32H50V34H38z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSe" x1="44" x2="44" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSe)" d="M48.021,36H38v2l10-0.021L48.021,44H38v2h10.021C49.112,46,50,45.112,50,44.021v-6.042 C50,36.888,49.112,36,48.021,36z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSf" x1="21" x2="21" y1="37.063" y2="42.384" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#6dc7ff"/><stop offset="1" stop-color="#e6abff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSf)" d="M21,42c2.209,0,4-2,4-4h-8C17,40,18.791,42,21,42z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSg" x1="26.649" x2="26.649" y1="11.667" y2="17.099" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#6dc7ff"/><stop offset="1" stop-color="#e6abff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSg)" d="M24,16.783V13c0-0.552,0.448-1,1-1h3.8c0.443,0,0.664,0.535,0.351,0.848l-4.291,4.291 C24.543,17.457,24,17.232,24,16.783z"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
Loading…
Reference in New Issue
Block a user