diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 5e43bac..c2fe79f 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -59,10 +59,10 @@ next='admin-circle-create' ) Create a new circle - div.table.cols-3.table-no-border-bottom - div.table-header Name - div.table-header Admins - div.table-header Join + div.table-header + div Name + div Admins + div Join //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" //-sib-display.table-body.test( @@ -80,13 +80,13 @@ ) sib-display( - class='table cols-3' + class='table-body' data-src=`${endpoints.circles}` fields='name, owner, buttons(members, button)' - class-name='cell' - class-owner='cell' + class-name='w33 cell border' + class-owner='w33 cell border' multiple-groups="" widget-members="circle-admin-leave-button-template" diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 7a53339..b95349f 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -8,7 +8,7 @@ div.content-box__info sib-widget(name='team-template-edit') template sib-display( - class='cell' + class='w50 cell border' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' @@ -19,7 +19,7 @@ div.content-box__info ) sib-ac-checker( - class='cell' + class='w50 cell border' permission="acl:Delete" data-src="${value['@id']}" ) @@ -31,7 +31,7 @@ div.content-box__info //- Only to show the table grid sib-ac-checker( - class='cell' + class='w50 cell border' no-permission="acl:Delete" data-src="${value['@id']}" ) @@ -78,13 +78,13 @@ div.content-box__info submit-button='Add a member' ) - div.table.cols-2.table-no-border-bottom - div.table-header Name - div.table-header Access + div.table-header + div Name + div Access //-class='table-body' sib-display( - class='table cols-2' + class='table-body' bind-resources fields='members' diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index dcfc034..afab566 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -20,8 +20,178 @@ } } + + + + .table-header { + background: $color-228-25-79; + color: white; + display: flex; + flex: 1; + font-size: 1.6rem; + font-weight: 600; + justify-content: space-around; + text-align: center; + + >* { + border-right: 1px solid white; + flex: 1; + padding: 2.1rem 0; + text-align: center; + } + + >*:last-of-type { + border-right: 1px solid $color-228-25-79; + } + } + + .table-body { + + >div:first-of-type>sib-display>div, + team-template-edit[name='members'] { + display: flex; + border-left: 1px solid $color-228-25-79; + } + + .border { + border-bottom: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + } + + .cell { + text-align: center; + word-wrap: break-word; + } + + .w33 { + width: 33.3333%; + } + + .w50 { + width: 50%; + } + + [name="buttons"] { + @extend .border; + @extend .cell; + @extend .w33; + } + } + + .table-body>div>sib-display>div>sib-display-value[name='name'] { + color: $color-233-18-29; + font-weight: 600; + padding-top: 2.5rem; + } + + [name='members']>sib-display>div, + [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; + } + + sib-multiple>div { + 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$='username']:not(:empty) { + align-items: center; + display: flex; + + &::before { + content: '@'; + + } + } + } + } + + sib-set-default[name='buttons'] { + align-items: center; + justify-content: center; + + [name='button'] { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-blue, + .bordered, + .btn-margin-left; + } + } + } + + sib-ac-checker { + align-items: center; + display: flex; + justify-content: center; + } + + + + + /* Table grid display */ - .table { + /*.table { display: grid; &.cols-2 { @@ -42,10 +212,10 @@ text-align: center; word-wrap: break-word; } - } + }*/ /* Table borders */ - .table { + /*.table { border-left: 1px solid $color-228-25-79; border-top: 1px solid $color-228-25-79; @@ -58,11 +228,11 @@ border-right: 1px solid $color-228-25-79; border-bottom: 1px solid $color-228-25-79; } - } + }*/ /* Table styles inside */ - .table { + /*.table { .table-header { background: $color-228-25-79; @@ -164,5 +334,5 @@ } } } - } + }*/ } \ No newline at end of file