diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index c9f976a..2e5e696 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -2,11 +2,14 @@ sib-widget(name='circle-team-template') template - sib-display( - data-src="${await value['@id']}" - fields='name' - widget-account.picture='hd-user-avatar' - ) + 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-delete( data-src="${await value['@id']}" diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index d7c7f80..e014c4e 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -33,4 +33,73 @@ circle-team-template { >*:nth-child(odd) { border-left: 1px solid $color-228-25-79; } +} + + +sib-multiple { + + label { + display: none; + } + + >team-template[name='members'] { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + + >sib-display:first-child { + align-self: center; + grid-column: 1 / span 1; + grid-row: 1 / span 2; + + div { + background-color: $color-0-0-100; + border-radius: 50%; + height: 7vh; + overflow: hidden; + position: relative; + width: 7vh; + + img { + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + } + } + + >div:nth-child(2) { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + + span { + align-self: center; + font-weight: 600; + } + + span~sib-display { + + >div { + display: flex; + margin-left: 1rem; + + sib-multiple [name='name'] { + @extend %user-role; + } + } + } + } + + >span:nth-child(3) { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + } + } } \ No newline at end of file diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index e69de29..c747f1a 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -0,0 +1,43 @@ +include hd-user-avatar.pug + +sib-widget(name='team-template') + template + sib-display( + data-src="${value.user ? value.user['@id'] : ''}" + fields='account.picture', + widget-account.picture='hd-user-avatar' + ) + div(name='user.thumb') + span ${value.user.name} + sib-display( + data-src="${value.user ? value.user.groups['@id'] : ''}", + fields='name', + multiple-name + ) + span ${value.name} + + + +include hd-user-avatar.pug + +sib-widget(name='team-template') + template + sib-display.project-profile-user-avatar( + data-src="${value.user ? value.user['@id'] : ''}" + fields='account.picture', + widget-account.picture='hd-user-avatar' + ) + div(name='user.thumb') + sib-display( + data-src="${value.user ? value.user['@id'] : ''}" + fields='name' + ) + sib-display( + data-src="${value.user ? value.user['@id'] : ''}", + fields='name' + nested-field="groups" + ) + sib-display( + data-src="${value.user ? value.user['@id'] : ''}" + fields='username' + ) \ No newline at end of file