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')
sib-notifications(
id-suffix="inbox",
id-suffix="inbox"
bind-user
)
@ -17,10 +17,12 @@ include templates/hd-user-avatar.pug
details#user-controls
summary(tabindex='0' role='button')
sib-display#user-controls__profile(
data-fields='first_name, account.picture',
widget-account.picture='hd-user-avatar',
data-fields='first_name, account.picture'
widget-account.picture='hd-user-avatar'
bind-user
)
#user-controls__panel
include page-user-panel.pug
button(role='log in' onclick="document.querySelector('sib-auth').login();") Login

View File

@ -37,3 +37,6 @@ html(lang="en")
#messages(hidden).with-sidebar
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
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(
data-authentication='login',
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
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
sib-form.block(
range-owner=`${endpoints.users}`,

View File

@ -1,4 +1,4 @@
.content-box.full-width
.content-box.with-padding.full-width
h2 Channel's name:
sib-display(
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
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
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(
data-authentication='login',
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(
data-authentication='login',
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
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(
src='https://drive.google.com/embeddedfolderview?id=${value}'
)
.content-box.full-width.chat-view
.content-box.with-padding.full-width.chat-view
sib-display(
bind-resources=""
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
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-customer.pug

View File

@ -1,13 +1,9 @@
//- nav(role="user's functionalities menu")
//- sib-router
//- ul
//- sib-route(name='user-profile')
//- li
//- a(href='#') My profile
//- sib-route(name='user-settings')
//- li
//- a(href='#') Settings
//- sib-route(name='user-admin')
//- li
//- a Admin
//- button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
nav(role="user's functionalities menu")
ul
li
sib-link(next='my-profile') My profile
//-li
sib-link(next='user-settings') Settings
//-li
sib-link(name='user-admin') 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/project-profile/index';
@import 'layout/circle-profile/index';
@import 'layout/user/index';
}

View File

@ -11,7 +11,6 @@
}
sib-form {
border-bottom: 1px solid $color-210-17-91;
padding-bottom: 2.55rem;
}
@ -66,7 +65,7 @@
}
}
input[type="submit"] {
input[type='submit'] {
background-color: $color-233-18-29;
border: none;
border-radius: 100em;
@ -82,6 +81,7 @@
/* CLASSES Peut-être à sortir de .content-box */
.form-label {
flex: 1 1 auto;
font-weight: 600;
&.is-dark label {
@ -133,6 +133,7 @@
}
sib-multiple-select {
sib-form-auto-completion > label {
display: flex;
flex-direction: column;

View File

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

View File

@ -63,7 +63,7 @@ h6 {
}
h1 {
font-size: 2.1rem;
font-size: 2rem;
}
h2 {
@ -107,7 +107,6 @@ a {
.content-box {
@include window-style-modal();
@extend %padding-main;
display: flex;
flex-direction: column;
flex-grow: 1;
@ -120,6 +119,10 @@ a {
margin: 0 auto;
min-height: calc(100vh - 84px);
}
&.with-padding {
@extend %padding-main;
}
}
.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
@import 'compat';
// Other base components

View File

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