msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

fix: user profile UI

Browse Source 
fix: user profile UI
pull/1679/head
NGPixel 5 years ago committed by Nicolas Giard
parent 98f3cc5582
commit 8ea699ac7a
3 changed files with 76 additions and 59 deletions
Show Stats Download Patch File Download Diff File

37
client/components/profile.vue
Unescape View File

@ -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-content
v-list-item-title Profile v-list-item-title Profile
v-list-item(to='/preferences') v-list-item(to='/preferences', disabled)
v-list-item-action: v-icon settings 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-title Preferences
v-divider.my-2 v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
v-subheader My Content v-list-item(to='/pages', disabled)
v-list-item(to='/pages') v-list-item-action: v-icon(color='grey lighten-1') mdi-file-document
v-list-item-action: v-icon pages v-list-item-content
v-list-item-title Pages v-list-item-title Pages
v-list-item(to='/comments') v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
v-list-item-action: v-icon question_answer 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-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>

87
client/components/profile/profile.vue
Unescape View File

@ -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
v-spacer
v-btn.animated.fadeInDown(outlined, color='primary', disabled).mr-0
v-icon(left) mdi-earth
span View Public Profile 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
Unescape View 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>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

Write Preview
Loading…
Cancel
Save