diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 9bee55c..58891d0 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -9,6 +9,7 @@ #admin-circle-list(hidden) + sib-widget(name="circle-admin-leave-button-template") template sib-ac-checker( @@ -35,16 +36,15 @@ set-user-id-select="user" ) - sib-widget(name='team-template-edit') + include templates/hd-user-avatar.pug + + sib-widget(name='circle-owner') template sib-display( - data-src='${await value.user}' - fields='account.picture, sup(name, groups), sub(profile.city)' + data-src='${await value}' + fields='account.picture, sup(name), sub(username)' widget-account.picture='hd-user-avatar' - - multiple-groups='' - widget-groups='hd-user-groups' ) @@ -59,24 +59,37 @@ next='admin-circle-create' ) Create a new circle - div.table-header - div.cell Name - div.cell Admins - div.cell Join + div.table.cols-3.table-no-border-bottom + div.table-header Name + div.table-header Admins + div.table-header Join //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" - sib-display.table-body.test( + //-sib-display.table-body.test( + data-src=`${endpoints.circles}` + fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)' + + multiple-groups="" + widget-members="circle-admin-leave-button-template" + multiple-members="" + + widget-button="circle-admin-join-button-template" + action-button="button" + + widget-owner.account.picture='hd-user-avatar' + ) + + sib-display( + class='table cols-3' + data-src=`${endpoints.circles}` - fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)' + fields='name, owner, action' - multiple-groups="" - widget-members="circle-admin-leave-button-template" - multiple-members="" + class-name='cell' + class-owner='cell' + class-action='cell action' - widget-button="circle-admin-join-button-template" - action-button="button" - - widget-owner.account.picture='hd-user-avatar' + widget-owner='circle-owner' ) diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss index 04813c0..dc0e25c 100644 --- a/src/styles/layout/circle/circle-admin.scss +++ b/src/styles/layout/circle/circle-admin.scss @@ -1,3 +1,354 @@ .circle-admin-join-button select[name='user'] { display: none; +} + +#admin-circle-list{ + + /* Table grid display */ + .table { + display: grid; + + &.cols-3 { + grid-template-columns: repeat(3, 33.3333%); + } + + .cell, .table-header { + text-align: center; + word-wrap: break-word; + } + + *:not(.cell) { + display: contents; + } + } + + /* Table borders */ + .table { + border-left: 1px solid $color-228-25-79; + border-top: 1px solid $color-228-25-79; + + &.table-no-border-bottom .table-header { + border-bottom: 0; + } + + .cell { + border-right: 1px solid $color-228-25-79; + border-bottom: 1px solid $color-228-25-79; + } + } + + /* Table styles inside */ + + .table { + + .table-header { + background: $color-228-25-79; + border-right: 1px solid white; + color: white; + display: flex; + flex: 1; + font-size: 1.6rem; + font-weight: 600; + justify-content: space-around; + padding: 1rem; + text-align: center; + + &:last-of-type { + border-right: 1px solid $color-228-25-79; + } + } + + sib-display-value[name='name'] { + color: #3C3F57; + font-weight: 600; + padding-top: 2.5rem; + } + + [name='owner']>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + padding: 0 2.2rem; + + >[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'] { + color: #7A7F85; + 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.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; + padding-top: 2.5rem; + } + + >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: '@'; + + } + } + } + } + + >sib-set-default[name='buttons'] { + display: flex; + justify-content: center; + + >sib-multiple { + align-items: center; + display: flex; + } + } + }*/ + + .table-body div team-template-edit { + display: flex; + justify-content: space-between; + + >* { + border-bottom: 1px solid $color-228-25-79; + flex: 1; + width: 50%; + } + + sib-display { + border-left: 1px solid $color-228-25-79; + padding: 0 2.2rem; + } + + sib-ac-checker { + align-items: center; + border-left: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + display: flex; + justify-content: flex-end; + padding: 2.7rem 2.2rem; + + @media (max-width: 1220px) { + display: none; + } + } + } + + .member-select.color { + + .ss-main { + color: $color-233-18-29; + } + } + + sib-multiple[widget='team-template-edit'] { + + label { + display: none; + } + + >div>team-template-edit>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; + margin-right: 1rem; + } + + sib-multiple { + display: flex; + + [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/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 70822f7..92dd726 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -1,5 +1,4 @@ -#circle-edit, -#admin-circle-list { +#circle-edit { .table-header { background: $color-228-25-79; @@ -26,105 +25,6 @@ } } - .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; - padding-top: 2.5rem; - } - - >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: '@'; - - } - } - } - } - - >sib-set-default[name='buttons'] { - display: flex; - justify-content: center; - - >sib-multiple { - align-items: center; - display: flex; - } - } - } - .table-body div team-template-edit { display: flex; justify-content: space-between;