diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index eb29ab6..37cd03f 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -2,32 +2,21 @@ include templates/hd-user-avatar.pug - sib-widget(name='circle-team-template') - template - sib-widget(name='hd-user-groups') - template ${await value.name} + sib-widget(name='hd-user-groups') + template ${await value.name} + sib-widget(name='team-template') + template sib-display( - data-src='${await value}' + data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' widget-account.picture='hd-user-avatar' - widget-groups='hd-user-groups' multiple-groups='' + widget-groups='hd-user-groups' ) - //-div(name='team') - div(name='user.thumb') - span ${await value.name} - sib-display( - data-src="${await value.groups}", - fields='name' - ) - span ${await value.profile.city} - - sib-widget(name='circle-delete-template') - template sib-delete( data-src="${await value['@id']}" data-label='Delete from circle' @@ -50,21 +39,26 @@ widget-owner='sib-form-auto-completion' widget-description='sib-form-textarea' + + submit-button='Register' + ) + + sib-delete( + bind-resources + data-label='Delete circle' + resourceDeleted='' ) - h3 List of members + h2 List of members div.table-header - div.cell.un Name - div.cell.deux Status + div.cell Name + div.cell Access sib-display.table-body( bind-resources - fields='team, members' + fields='members' - multiple-team='' multiple-members='' - - widget-team='circle-team-template' - widget-members='circle-delete-template' + widget-members='team-template' ) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index c1ae4a7..89177aa 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -151,15 +151,19 @@ sib-form-auto-completion.member-select { align-self: flex-end; - font-weight: normal; + + >label:first-of-type>div { + font-weight: 600; + } .ss-single-selected { background-color: $color-222-57-95; border: none; border-radius: 0px; display: flex; + font-weight: normal; margin-top: 0.8rem; - min-height: 3.9rem; + min-height: 4.4rem; padding-left: 1rem; text-transform: none; @@ -170,6 +174,7 @@ } .ss-content .ss-list .ss-option { + font-weight: normal; text-transform: none; } } diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index 599639d..fb84e2c 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -1,3 +1,9 @@ +h2 { + font-size: 1.7rem; + font-weight: bold; + text-transform: uppercase; +} + .table-header { background: $color-228-25-79; color: white; @@ -19,102 +25,110 @@ } } -.table-body>div { +.table-body div team-template { display: flex; justify-content: space-between; >* { flex: 1; width: 50%; - } - - /*>*:nth-child(even) { - display: flex; - }*/ - - /*>*:nth-child(odd) { - border-left: 1px solid $color-228-25-79; - }*/ - - circle-team-template { - display: block; border-bottom: 1px solid $color-228-25-79; - border-left: 1px solid $color-228-25-79; } - - circle-delete-template { - display: block; - border-bottom: 1px solid $color-228-25-79; + + >*:nth-child(odd) { border-left: 1px solid $color-228-25-79; border-right: 1px solid $color-228-25-79; + padding: 0 2.2rem; + } + + >*:nth-child(even) { + display: flex; + border-right: 1px solid $color-228-25-79; + justify-content: flex-end; + padding: 2.5rem 2.2rem; } } -sib-multiple { +sib-multiple[widget='team-template'] { label { display: none; } - >team-template[name='members'] { + >div>team-template>sib-display>div { display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; grid-template-rows: repeat(2, 5.2vh); - >sib-display:first-child { + >[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; - div { - background-color: $color-0-0-100; - border-radius: 50%; - height: 7vh; - overflow: hidden; - position: relative; - width: 7vh; + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } - img { - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } + object { + height: 45%; + width: 45%; } } - >div:nth-child(2) { + >[name='sup'] { align-self: end; display: flex; grid-column: 2 / span 1; grid-row: 1 / span 1; + margin-bottom: 0.50rem; - span { - align-self: center; + [name='name'] { font-weight: 600; } - span~sib-display { + sib-multiple { + display: flex; + margin-left: 1rem; - >div { - display: flex; - margin-left: 1rem; - - sib-multiple [name='name'] { - @extend %user-role; - } + [name='groups'] { + @extend %user-role; } } } - >span:nth-child(3) { + >[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