diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 3f89324..b28cd5f 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -34,7 +34,25 @@ set-user-id-select="user" ) - include templates/hd-user-avatar.pug + + + + sib-widget(name='team-template-edit') + template + sib-display( + data-src='${await value.user}' + fields='account.picture, sup(name, groups), sub(profile.city)' + + widget-account.picture='hd-user-avatar' + + multiple-groups='' + widget-groups='hd-user-groups' + ) + + + + + div.content-box__info sib-link(class='circle-add-button button yellow-button', next='admin-circle-create') Create a new circle @@ -46,9 +64,10 @@ div.cell Admins div.cell Join - sib-display.table-body( + //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" + sib-display.table-body.test( data-src=`${endpoints.circles}` - fields="name, own(owner.account.picture, owner.name), buttons(members, button)" + fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)' multiple-groups="" widget-members="circle-admin-leave-button-template" diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index a3e0971..b3c3889 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -38,7 +38,7 @@ flex-direction: column; } - sib-set-default { + /*sib-set-default { clear: both; display: flex; flex-wrap: wrap; @@ -48,7 +48,7 @@ float: left; width: 50%; } - } + }*/ label { display: flex; diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 32387f5..ab7425d 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -26,6 +26,94 @@ } } + .table-body.test>div>sib-display>div { + border-bottom: 1px solid $color-228-25-79; + display: flex; + justify-content: space-around; + + >* { + flex: 1; + border-left: 1px solid $color-228-25-79; + text-align: center; + } + + >*:last-child { + border-right: 1px solid $color-228-25-79; + } + + >sib-display-value[name='name'] { + color: #3C3F57; + font-weight: 600; + } + + >sib-set-default[name='own'] { + 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; + margin-right: 1rem; + } + } + + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; + + >[name$='username']:not(:empty) { + align-items: center; + display: flex; + + &::before { + content: '@'; + + } + } + } + } + } + .table-body div team-template-edit { display: flex; justify-content: space-between; @@ -74,7 +162,7 @@ grid-template-columns: 7vh auto; grid-template-rows: repeat(2, 5.2vh); - >[name='account.picture'] { + >[name$='account.picture'] { align-items: center; align-self: center; background-color: $color-213-20-91; @@ -111,7 +199,7 @@ grid-row: 1 / span 1; margin-bottom: 0.50rem; - [name='name'] { + [name$='name'] { font-weight: 600; margin-right: 1rem; }