feature: profile edition added

- new page created
- new route added
- some styles are reworked
- new styles added
This commit is contained in:
Gaëlle Morin 2019-06-18 08:48:32 +02:00
parent 2ce14a72eb
commit ba01623195
24 changed files with 238 additions and 59 deletions

View File

@ -8,7 +8,7 @@
//- i#close-search-icon.icon-close(aria-hidden='true') //- i#close-search-icon.icon-close(aria-hidden='true')
sib-notifications( sib-notifications(
id-suffix="inbox", id-suffix="inbox"
bind-user bind-user
) )
@ -17,10 +17,12 @@ include templates/hd-user-avatar.pug
details#user-controls details#user-controls
summary(tabindex='0' role='button') summary(tabindex='0' role='button')
sib-display#user-controls__profile( sib-display#user-controls__profile(
data-fields='first_name, account.picture', data-fields='first_name, account.picture'
widget-account.picture='hd-user-avatar', widget-account.picture='hd-user-avatar'
bind-user bind-user
) )
#user-controls__panel
include page-user-panel.pug
button(role='log in' onclick="document.querySelector('sib-auth').login();") Login button(role='log in' onclick="document.querySelector('sib-auth').login();") Login

View File

@ -37,3 +37,6 @@ html(lang="en")
#messages(hidden).with-sidebar #messages(hidden).with-sidebar
include page-messages.pug include page-messages.pug
#my-profile(hidden).no-sidebar
include page-user-profile.pug

View File

@ -64,4 +64,5 @@ nav#main__menu
) )
div.divider div.divider
sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')

View File

@ -1,4 +1,4 @@
.content-box.full-width.chat-view .content-box.with-padding.full-width.chat-view
sib-chat( sib-chat(
data-authentication='login', data-authentication='login',
data-auto-login='true', data-auto-login='true',

View File

@ -1,4 +1,4 @@
.content-box.with-form.full-width .content-box.with-padding.with-form.full-width
h1 New group h1 New group
p Here you can create a new group according to your interests, what you want to share, etc. p Here you can create a new group according to your interests, what you want to share, etc.

View File

@ -1,4 +1,4 @@
#circle-edit.content-box.with-form.full-width #circle-edit.content-box.with-padding.with-form.full-width
h1 Edit group h1 Edit group
sib-form.block( sib-form.block(
range-owner=`${endpoints.users}`, range-owner=`${endpoints.users}`,

View File

@ -1,4 +1,4 @@
.content-box.full-width .content-box.with-padding.full-width
h2 Channel's name: h2 Channel's name:
sib-display( sib-display(
data-fields='name', data-fields='name',

View File

@ -1,4 +1,4 @@
.content-box.with-form .content-box.with-padding.with-form
h1 Post a new job offer h1 Post a new job offer
p.center This form allows you to share an offer to all members of the network. p.center This form allows you to share an offer to all members of the network.

View File

@ -1,4 +1,4 @@
.content-box.with-form .content-box.with-padding.with-form
h1 Edit your job offer h1 Edit your job offer
sib-form.block( sib-form.block(

View File

@ -1,4 +1,4 @@
.content-box.full-width.chat-view .content-box.with-padding.full-width.chat-view
sib-chat( sib-chat(
data-authentication='login', data-authentication='login',
data-auto-login='true', data-auto-login='true',

View File

@ -1,4 +1,4 @@
.content-box.full-width.chat-view .content-box.with-padding.full-width.chat-view
sib-chat( sib-chat(
data-authentication='login', data-authentication='login',
data-auto-login='true', data-auto-login='true',

View File

@ -1,4 +1,4 @@
.content-box.with-form.full-width .content-box.with-padding.with-form.full-width
h1 New project h1 New project
p Here you can create your project, add members and assign them a job. p Here you can create your project, add members and assign them a job.

View File

@ -3,7 +3,7 @@ sib-widget(name='hd-drive')
iframe.drive.chat-view( iframe.drive.chat-view(
src='https://drive.google.com/embeddedfolderview?id=${value}' src='https://drive.google.com/embeddedfolderview?id=${value}'
) )
.content-box.full-width.chat-view .content-box.with-padding.full-width.chat-view
sib-display( sib-display(
bind-resources="" bind-resources=""
data-fields="driveID" data-fields="driveID"

View File

@ -1,6 +1,6 @@
.content-box.with-form.full-width .content-box.with-padding.with-form.full-width
h1 Edit your project h1 Edit your project
p Here you can edit your projet's details p Here you can edit your projet's details

View File

@ -1,4 +1,4 @@
.content-box.full-width .content-box.with-padding.full-width
include templates/template-business-provider.pug include templates/template-business-provider.pug
include templates/template-customer.pug include templates/template-customer.pug

View File

@ -1,13 +1,9 @@
//- nav(role="user's functionalities menu") nav(role="user's functionalities menu")
//- sib-router ul
//- ul li
//- sib-route(name='user-profile') sib-link(next='my-profile') My profile
//- li //-li
//- a(href='#') My profile sib-link(next='user-settings') Settings
//- sib-route(name='user-settings') //-li
//- li sib-link(name='user-admin') Admin
//- a(href='#') Settings //-button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
//- sib-route(name='user-admin')
//- li
//- a Admin
//- button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out

78
src/page-user-profile.pug Normal file
View File

@ -0,0 +1,78 @@
include templates/template-groups.pug
.content-box.with-form.user-profile__container
.section.user-bio
sib-display.avatar-display(
bind-user=''
data-fields='account.picture'
label-account.picture=''
widget-account.picture='sib-display-img'
)
sib-display.name-diplay(
bind-user=''
data-fields='user-name-groups, username'
set-user-name-groups='name, groups'
class-name='name'
label-groups=''
multiple-groups=''
widget-groups='groups-name'
class-username='username'
)
sib-form.info-form(
bind-user=''
data-fields='profile.bio, inline-1, inline-2, inline-3, account.picture, instruction'
set-inline-1='profile.city, email'
set-inline-2='profile.phone, profile.website'
set-inline-3='profile.available'
class-profile.bio='form-label is-light'
label-profile.bio='short description'
class-profile.city='form-label is-light'
label-profile.city='your cell'
class-email='form-label is-light'
class-profile.phone='form-label is-light'
label-profile.phone='phone'
class-profile.website='form-label is-light'
label-profile.website='your website'
class-profile.available='form-label is-light'
label-profile.available='your availability'
class-account.picture='form-label is-light'
label-account.picture='your picture'
widget-instruction='hd-instruction'
)
.section.user-skills
sib-form(
bind-user=''
range-skills=`${endpoints.skills}`
data-fields='skills'
class-skills='form-label is-dark'
label-skills='Your main skills (4 max.):'
multiple-skills='sib-multiple-select'
widget-skills='sib-form-auto-completion'
)
sib-widget(name='hd-instruction')
template
span Show us your most beautiful smile
p Pictures help us to know ourselves and also to recognize ourselves, so don't be afraid to show your pretty face and avoid strange avatars.

View File

@ -18,4 +18,5 @@ div#viewport {
@import 'layout/job-offers/index'; @import 'layout/job-offers/index';
@import 'layout/project-profile/index'; @import 'layout/project-profile/index';
@import 'layout/circle-profile/index'; @import 'layout/circle-profile/index';
@import 'layout/user/index';
} }

View File

@ -11,7 +11,6 @@
} }
sib-form { sib-form {
border-bottom: 1px solid $color-210-17-91;
padding-bottom: 2.55rem; padding-bottom: 2.55rem;
} }
@ -66,7 +65,7 @@
} }
} }
input[type="submit"] { input[type='submit'] {
background-color: $color-233-18-29; background-color: $color-233-18-29;
border: none; border: none;
border-radius: 100em; border-radius: 100em;
@ -82,6 +81,7 @@
/* CLASSES Peut-être à sortir de .content-box */ /* CLASSES Peut-être à sortir de .content-box */
.form-label { .form-label {
flex: 1 1 auto;
font-weight: 600; font-weight: 600;
&.is-dark label { &.is-dark label {
@ -133,6 +133,7 @@
} }
sib-multiple-select { sib-multiple-select {
sib-form-auto-completion > label { sib-form-auto-completion > label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -199,7 +200,7 @@
} }
} }
/* /*
input { input {
-webkit-appearance: none; -webkit-appearance: none;
align-items: center; align-items: center;
@ -352,7 +353,7 @@
} }
*/ */
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */ /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
/* /*
sib-form-multiple-dropdown { sib-form-multiple-dropdown {
button { button {

View File

@ -106,11 +106,11 @@ details {
details#user-controls { details#user-controls {
// summary:focus { summary:focus {
// background-color: $color-233-18-29; background-color: $color-233-18-29;
// color: $color-0-0-100; color: $color-0-0-100;
// outline: none; outline: none;
// } }
#user-controls__profile { #user-controls__profile {
div { div {
@ -131,7 +131,7 @@ details#user-controls {
} }
sib-display-value[name='first_name'] { sib-display-value[name='first_name'] {
// @include icon('arrow-down'); @include icon('arrow-down');
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
@ -169,9 +169,9 @@ details#user-controls {
margin-right: 0; margin-right: 0;
padding: 1.6rem 1.3rem; padding: 1.6rem 1.3rem;
a { sib-link {
color: $color-213-4-50; color: $color-213-4-50;
text-decoration: none; display: block;
} }
} }
} }
@ -185,23 +185,23 @@ details#user-controls {
} }
} }
// &[open] { &[open] {
// background-color: $color-233-18-29; background-color: $color-233-18-29;
// color: $color-0-0-100; color: $color-0-0-100;
// #user-controls__profile { #user-controls__profile {
// div { div {
// sib-display-value[name='first_name'] { sib-display-value[name='first_name'] {
// @include icon('close'); @include icon('close');
// &::before { &::before {
// margin-left: 1.5rem; margin-left: 1.5rem;
// } }
// } }
// } }
// } }
// } }
} }

View File

@ -63,7 +63,7 @@ h6 {
} }
h1 { h1 {
font-size: 2.1rem; font-size: 2rem;
} }
h2 { h2 {
@ -107,7 +107,6 @@ a {
.content-box { .content-box {
@include window-style-modal(); @include window-style-modal();
@extend %padding-main;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
@ -120,6 +119,10 @@ a {
margin: 0 auto; margin: 0 auto;
min-height: calc(100vh - 84px); min-height: calc(100vh - 84px);
} }
&.with-padding {
@extend %padding-main;
}
} }
.drive { .drive {
@ -144,6 +147,24 @@ a {
} }
} }
.name {
color: $color-216-4-22;
font-size: 2rem;
font-weight: bold;
}
.username {
&::before {
content: '@';
}
}
.section {
border-bottom: 1px solid $color-221-51-90;
padding: 4.5rem;
}
// Compatibility layer for non-updated components // Compatibility layer for non-updated components
@import 'compat'; @import 'compat';
// Other base components // Other base components

View File

@ -12,14 +12,12 @@
.member-bio { .member-bio {
div[name='member-profile__bio'] { div[name='member-profile__bio'] {
border-bottom: 1px solid $color-221-51-90;
display: grid; display: grid;
grid-template-areas: "avatar name status" grid-template-areas: "avatar name status"
"avatar pseudo status" "avatar pseudo status"
"avatar bio status" "avatar bio status"
"avatar list button"; "avatar list button";
grid-template-columns: 1fr 2fr 1fr; grid-template-columns: 1fr 2fr 1fr;
padding: 4.5rem;
div[name='member-img'] { div[name='member-img'] {
grid-area: avatar; grid-area: avatar;

View File

@ -0,0 +1 @@
@import 'user-profile';

View File

@ -0,0 +1,77 @@
.user-profile__container {
.user-bio {
display: grid;
grid-gap: 1rem;
grid-template-areas: "avatar name"
"avatar information";
grid-template-columns: minmax(300px, 400px) 2fr;
.avatar-display {
grid-area: avatar;
overflow: hidden;
position: relative;
img {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 50%;
overflow: hidden;
object-position: center;
}
}
.name-diplay {
grid-area: name;
[name='user-name-groups'] {
align-items: baseline;
align-self: end;
display: flex;
sib-multiple {
display: flex;
padding-left: 1.4rem;
groups-name {
@extend %user-role;
}
}
}
}
.info-form {
grid-area: information;
/* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
[name="account.picture"] {
margin-bottom: 1rem;
}
hd-instruction {
margin-left: 1rem;
span {
color: $color-233-18-29;
font-weight: bold;
}
p {
margin-left: 1rem;
}
}
/* Fin commentaire sur upload photos */
}
[name^="inline-"] {
display: flex;
justify-content: flex-start;
>*:not(:last-child) {
margin-right: 3rem;
}
}
}
}