From 772e1e456b94c7fbe06eb591fff3f1d0e12087ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 13 Nov 2019 12:00:38 +0100 Subject: [PATCH] Tables ok --- src/page-admin-circles.pug | 56 ++--- src/page-circle-edit.pug | 26 +-- src/styles/layout/circle/circle.scss | 295 +++++++-------------------- 3 files changed, 117 insertions(+), 260 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index c2fe79f..81b07ee 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -59,16 +59,37 @@ next='admin-circle-create' ) Create a new circle - div.table-header - div Name - div Admins - div Join + .table + + div.table-header.grey-color + div Name + div Admins + div Join + + //-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, sup(owner.name), sub(owner.username)), buttons(members, button)' + + 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-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, sup(owner.name), sub(owner.username)), buttons(members, button)' + fields='name, owner, buttons(members, button)' + class-name='w33 cell border' + class-owner='w33 cell border' + multiple-groups="" widget-members="circle-admin-leave-button-template" multiple-members="" @@ -76,28 +97,9 @@ widget-button="circle-admin-join-button-template" action-button="button" - widget-owner.account.picture='hd-user-avatar' + widget-owner='circle-owner' ) - sib-display( - class='table-body' - - data-src=`${endpoints.circles}` - fields='name, owner, buttons(members, button)' - - class-name='w33 cell border' - class-owner='w33 cell border' - - multiple-groups="" - widget-members="circle-admin-leave-button-template" - multiple-members="" - - widget-button="circle-admin-join-button-template" - action-button="button" - - widget-owner='circle-owner' - ) - #admin-circle-create(hidden) include page-admin-circles-create.pug diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index b95349f..8fa2ac7 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -78,17 +78,19 @@ div.content-box__info submit-button='Add a member' ) - div.table-header - div Name - div Access - - //-class='table-body' - sib-display( - class='table-body' - bind-resources - fields='members' + .table + + div.table-header.grey-color + div Name + div Access + + //-class='table-body' + sib-display( + class='table-body' + bind-resources + fields='members' - multiple-members='' - widget-members='team-template-edit' - ) + multiple-members='' + widget-members='team-template-edit' + ) diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index afab566..61e3e67 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -20,244 +20,73 @@ } } - - - - .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 { - display: grid; - - &.cols-2 { - grid-template-columns: repeat(2, 50%); - } - - &.cols-3 { - grid-template-columns: repeat(3, 33.3333%); - } - - *:not(.cell):not([name="buttons"]):not([class="table-header"]) { // <- Here, must be inversed - display: contents; - } - - sib-set-default[name='buttons'], - .cell, - .table-header { - text-align: center; - word-wrap: break-word; - } - }*/ - - /* 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; - } - - sib-set-default[name='buttons'], - .cell { - 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; - 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 { + &.grey-color { + background: $color-228-25-79; + color: white; + } + + >* { + 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; } } - sib-display-value[name='name'] { + .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='members']>sib-display>div, [name='owner']>sib-display>div { display: grid; grid-column-gap: 1.6rem; @@ -334,5 +163,29 @@ } } } - }*/ + + 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; + } + } } \ No newline at end of file