diff --git a/src/page-circle-chat.pug b/src/page-circle-chat.pug index 6d1df86..34b02a8 100644 --- a/src/page-circle-chat.pug +++ b/src/page-circle-chat.pug @@ -1,7 +1,9 @@ .content-box.full-width - sib-display.chat-header( + sib-display.content-box__header( bind-resources fields='name' + + class-name='name' ) .chat-view sib-chat( diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 9deac43..507818a 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -1,29 +1,49 @@ -.content-box.with-padding.full-width - h2 Channel's name: - sib-display( - fields='name', - bind-resources - ) +.content-box.full-width.with-form - h2 Description: - sib-display( - fields='description', - bind-resources - ) + include templates/hd-circle-team.pug + + div.content-box__header.with-edit + sib-display( + bind-resources + fields='name' - h2 In group: - sib-display.block-group( - nested-field='team', - fields='teammate-img(account.picture), teammate-name(name), teammate-pseudonym(before-pseudo, username), teammate-profile, teammate-contact', + class-name='name' + ) - template-teammate-contact='chat-link', + sib-link(class="editlink", next="circle-edit" bind-resources) - value-before-pseudo='@', - value-teammate-contact='Send a message', - value-teammate-profile='View profile', + div.content-box__info + + sib-display.block( + bind-resources + fields='label-description, description, entitled(title, creationDate)' + + value-label-description='Description: ' + + default-description='No description available.' + + value-title='Creation date:' + ) + + sib-ac-checker(permission='acl:Write' bind-resources) + sib-form.block.team-form( + bind-resources + fields='team' + range-team=`${endpoints.users}` + partial='' + + class-team='team form-label is-dark' + label-team='Members:' + widget-team='sib-form-auto-completion' + + submit-button='Add a member' + ) + + sib-display.block( + bind-resources + fields='team' + + multiple-team='' + widget-team='team-template' + ) - widget-account.picture='sib-display-img', - - next='member', - bind-resources - ) diff --git a/src/page-circle.pug b/src/page-circle.pug index b66986c..d60080a 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,26 +1,26 @@ .views-container #circle-chat include page-circle-chat.pug - //- #circle-profile - //- include page-circle-profile.pug - //- #circle-edit - //- include page-circle-edit.pug - //- #circle-create - //- include page-circle-create.pug -//- nav.jsRightMenu(role='navigation') -//- sib-router(default-route='circle-chat') -//- ul -//- li.jsOffsiteToggle -//- a Fold menu -//- sib-route(name='circle-chat') -//- li -//- a Chat -//- sib-route(name='circle-profile') -//- li -//- a Information -//- sib-route(name='circle-edit') -//- //- li -//- //- a Edit -//- sib-route(name='circle-create') -//- //- li -//- //- a Add new \ No newline at end of file + #circle-profile + include page-circle-profile.pug + //-#circle-edit + include page-circle-edit.pug + //-#circle-create + include page-circle-create.pug +nav.jsRightMenu(role='navigation') + sib-router(default-route='circle-chat') + ul + li.jsOffsiteToggle + a Fold menu + sib-route(name='circle-chat') + li + a Chat + sib-route(name='circle-profile') + li + a Information + //-sib-route(name='circle-edit') + li + a Edit + //-sib-route(name='circle-create') + li + a Add new diff --git a/src/page-messages.pug b/src/page-messages.pug index dec706a..f12cb83 100644 --- a/src/page-messages.pug +++ b/src/page-messages.pug @@ -1,7 +1,9 @@ .content-box.full-width - sib-display.chat-header( + sib-display.content-box__header( bind-resources fields='username' + + class-username='name' ) .chat-view sib-chat( diff --git a/src/styles/_index.scss b/src/styles/_index.scss index e18fd59..3abbbe1 100644 --- a/src/styles/_index.scss +++ b/src/styles/_index.scss @@ -16,7 +16,6 @@ div#viewport { @import 'components/index'; @import 'layout/members/index'; @import 'layout/job-offers/index'; - @import 'components/comment.scss'; @import 'layout/project-profile/index'; @import 'layout/circle-profile/index'; @import 'layout/user/index'; diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index c1ae4a7..2b0e644 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -102,6 +102,51 @@ /* CLASSES Peut-être à sortir de .content-box */ + .block.team-form>form { /* circle-profile */ + display: flex; + flex-direction: row; + + label { + + >.ss-main { + font-weight: normal; + min-width: 35vw; + text-transform: none; + + >.ss-single-selected { + align-items: center; + background-color: #ebeffa; + border: none; + border-radius: 0px; + display: flex; + justify-content: flex-end; + min-height: 4.2rem; + padding-left: 1.2rem; + + .ss-arrow { + font-size: 1.8rem; + margin: 0 18px 0 0; + + span { + border: solid $color-244-73-62; + border-width: 0 2px 2px 0; + } + } + } + } + } + + >input[type='submit'] { + background-color: transparent; + border: 1px solid #6157e5; + color: #6157e5; + font-size: 1.4rem; + align-self: flex-end; + margin-bottom: 0.6rem; + margin-left: 4.2rem; + } + } + .form-container>form { margin-top: 2.7rem; } diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 776381b..51cc2af 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -145,6 +145,7 @@ } img { + background-color: white; height: 100%; object-fit: cover; object-position: center; diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 8fa3b61..c57f4a6 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -56,14 +56,14 @@ h6 { font-weight: 600; padding: 0; - span { + /*span { font-weight: 400; padding-left: 0.85rem; &:before { content: '// '; } - } + }*/ } h1 { @@ -75,7 +75,7 @@ h2 { } h3 { - font-size: 1.6rem; + font-size: 1.7rem; } h4 { @@ -109,6 +109,10 @@ a { padding: 5rem; } +%padding-block { + padding: 3.2rem; +} + .content-box { @include window-style-modal(); display: flex; @@ -119,7 +123,7 @@ a { &.full-width { background: $color-0-0-100; flex: 1; - font-size: 1.5rem; + font-size: 1.6rem; margin: 0 auto; min-height: calc(100vh - 84px); } @@ -129,6 +133,45 @@ a { } } +.content-box__header { + padding: 2.3rem 3rem; + + div { + color: $color-233-18-29; + display: flex; + font-size: 2rem; + + &>* { + align-self: center; + } + + .name { + font-size: 2rem; + font-weight: bold; + margin: 1.1rem 0; + } + } +} + +.content-box__header.with-edit { + border-bottom: 1px solid $color-221-51-90; + display: flex; + justify-content: space-between; + + sib-display { + display: flex; + text-transform: uppercase; + } + + sib-link { + display: flex; + &::before { + align-self: center; + display: flex; + } + } +} + .drive { width: 100%; border: 0; @@ -151,6 +194,15 @@ a { } } +.editlink { + + @include icon('pencil'); + background: $color-244-73-62; + border-radius: 50%; + color: white; + padding: 12px; +} + .name { color: $color-216-4-22; font-size: 2rem; diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index ee78562..ce38dc6 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,4 +1,5 @@ @import 'chat'; +@import 'comment.scss'; @import 'filters'; @import 'howto'; @import 'sidebar'; diff --git a/src/styles/components/chat.scss b/src/styles/components/chat.scss index 3683b44..1004736 100644 --- a/src/styles/components/chat.scss +++ b/src/styles/components/chat.scss @@ -1,20 +1,3 @@ - -// chat -.chat-header { - - div { - color: $color-233-18-29; - display: flex; - flex-direction: column; - margin: 3rem; - - &>:first-child { - font-size: 2rem; - font-weight: bold; - } - } -} - .chat-view { padding: 0; height: calc(100vh - 84px - 83px); diff --git a/src/styles/components/user-role.scss b/src/styles/components/user-role.scss index fed7680..4e2c47e 100644 --- a/src/styles/components/user-role.scss +++ b/src/styles/components/user-role.scss @@ -5,5 +5,5 @@ font-size: 1.4rem; font-weight: 400; margin-right: 0.4rem; - padding: calc(1.6rem - 0.8em) 0.7em; + padding: 0.2rem 0.98rem; } \ No newline at end of file diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss index 1df3fff..c4d75e4 100644 --- a/src/styles/layout/circle-profile/circle-profile.scss +++ b/src/styles/layout/circle-profile/circle-profile.scss @@ -1,79 +1,134 @@ #circle-profile { - .block-group > div { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - margin: 0; - padding: 0; + .content-box__info { + @extend %padding-block; + } - sib-display > div { - align-items: center; - box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14); - display: grid; - font-size: 1.6rem; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(3, 1fr); - height: auto; - justify-items: center; - margin: 1rem 0.5rem 1rem 0; - position: relative; - padding-right: 1rem; - padding-top: 1rem; - text-align: center; - width: 14em; + .block { - &:hover { - cursor: pointer; - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24); - top: -2px; - } + >form { /* peut-être à mettre dans main.scss */ + margin-bottom: 2.6rem; - > sib-set-default[name='teammate-img'] { - background-color: $color-215-9-73; - border-radius: 50%; - grid-column: 1 / span 2; - grid-row: 1 / span 2; - height: 6vh; - overflow: hidden; - width: 6vh; + .form-label.is-dark>label { + margin-top: 0; - img { - height: 100%; - left: 0; - object-fit: cover; - top: 0; - width: 100%; + >div:first-child { + @extend h3; + font-weight: bold; + margin: 0 0 1.4rem; + text-transform: uppercase; } } + } - sib-set-default[name='teammate-name'] { - grid-column: 3 / span 2; - grid-row: 1 / span 1; + >div { /* peut-être à mettre dans main.scss */ + display: flex; + flex-direction: column; + margin-bottom: 2.6rem; + position: relative; + + >[name^='label'] { + @extend h3; + font-weight: bold; + margin: 0 0 1.4rem; + text-transform: uppercase; } - > sib-set-default[name='teammate-pseudonym'] { - align-self: start; - font-size: 1.2rem; - grid-column: 3 / span 2; - grid-row: 2 / span 1; + >[name='description'] { + max-width: 80%; } - > sib-display-value[name='teammate-profile'] { - color: $color-216-4-22; - display: block; - font-size: 1.2rem; - grid-column: 1 / span 2; - grid-row: 3 / span 1; - } + >[name='entitled'] { + align-self: flex-end; + position: absolute; - > sib-display-value[name='teammate-contact'] { - color: $color-244-73-62; - font-size: 1.2rem; - justify-self: stretch; - grid-column: 3 / span 2; - grid-row: 3 / span 1; + >*:first-child { + margin-right: 0.8rem; + } + } + + >sib-multiple { + + label { + display: none; + } + + >div>team-template[name='team']>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + + >[name='account.picture'] { + align-items: center; + align-self: center; + background-color: $color-213-20-91; + border-radius: 50%; + display: flex; + grid-column: 1 / span 1; + grid-row: 1 / span 2; + height: 7vh; + justify-content: center; + overflow: hidden; + position: relative; + width: 7vh; + + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + + object { + height: 45%; + width: 45%; + } + } + + >[name='sup'] { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; + + [name='name'] { + font-weight: 600; + } + + sib-multiple { + display: flex; + margin-left: 1rem; + + [name='groups'] { + @extend %user-role; + } + } + } + + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; + + >[name$='profile.city']:not(:empty) { + @include mdi('atom'); + align-items: center; + display: flex; + + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; + } + } + } + } } } } -} \ No newline at end of file +} diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index e8b8cdc..1a8b0f2 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -6,7 +6,7 @@ [name^='label-'] { display: block; font-weight: bold; - margin-bottom: 1.4rem; + margin: 1.4rem 0; text-transform: uppercase; @extend h2; } diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug new file mode 100644 index 0000000..62f7b37 --- /dev/null +++ b/src/templates/hd-circle-team.pug @@ -0,0 +1,16 @@ +include hd-user-avatar.pug + +sib-widget(name='team-template') + template + sib-display( + data-src="${await value}" + fields='account.picture, sup(name, groups), sub(profile.city)' + + widget-account.picture='hd-user-avatar' + widget-groups='hd-user-groups' + + multiple-groups='' + ) + +sib-widget(name='hd-user-groups') + template ${await value.name} diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug index f529ecf..9a89ada 100644 --- a/src/templates/template-team.pug +++ b/src/templates/template-team.pug @@ -21,3 +21,4 @@ sib-widget(name='team-template') data-src="${value.user ? value.user['@id'] : ''}" fields='username' ) +