diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 9f53e1f..3d202b5 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -88,9 +88,9 @@ data-src=`${endpoints.circles}` fields='name, owner, buttons' - class-name='w33 cell border' - class-owner='w33 cell border' - class-buttons='w33 cell border' + class-name='w33 cell border cell-with-name' + class-owner='w33 cell border cell-with-id-card' + class-buttons='w33 cell border cell-with-buttons' widget-buttons="admin-circle-buttons" action-buttons="buttons" diff --git a/src/page-admin-projects.pug b/src/page-admin-projects.pug index 0ac998e..f9866f8 100644 --- a/src/page-admin-projects.pug +++ b/src/page-admin-projects.pug @@ -73,10 +73,10 @@ data-src=`${endpoints.projects}` fields='name, members, captain, buttons' - class-name='w25 cell border hashtag' + class-name='w25 cell border cell-with-name hashtag' class-members='w25 cell border' - class-captain='w25 cell border' - class-buttons='w25 cell border' + class-captain='w25 cell border cell-with-id-card' + class-buttons='w25 cell border cell-with-buttons' widget-buttons="admin-project-buttons" action-buttons="buttons" diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 75a523f..2a7bab0 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='w50 cell border' + class='w50 cell border cell-with-id-card' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index a6a3811..4afff70 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -255,6 +255,7 @@ h5 { @import 'compat'; // Other base components @import 'form'; +@import 'table'; @import 'header'; @import 'menu-left'; diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss new file mode 100644 index 0000000..6b5b0be --- /dev/null +++ b/src/styles/base/table.scss @@ -0,0 +1,193 @@ +#circle-information, +#circle-edit, +#admin-circle-list, +#admin-circle-create, +#admin-project-list, +#admin-project-create { + + .content-box__info { + @extend %padding-block; + display: flex; + flex-direction: column; + + .backlink { + text-align: right; + display: block; + } + } + + .table { + + .table-header { + display: flex; + flex: 1; + font-size: 1.6rem; + font-weight: 600; + justify-content: space-around; + text-align: center; + + &.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; + } + } + + .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; + } + + .w25 { + width: 25%; + } + + .w33 { + width: 33.3333%; + } + + .w50 { + width: 50%; + } + + .hashtag::before { + content: '#'; + } + } + + .cell-with-name { + color: $color-233-18-29; + font-weight: 600; + padding-top: 2.5rem; + } + + .cell-with-id-card>div, + /* for the table in circle-edit */ + .cell-with-id-card>sib-display>div, + project-captain[name='user']>sib-display>div { + /* for the captain's cell in project-admin */ + 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 %tag-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: '@'; + + } + } + } + } + + .cell-with-buttons { + align-items: center; + display: flex; + 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; + } + } +} diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index 2d2e04f..b6f7d2e 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -78,16 +78,15 @@ } } - .table-body>div>sib-display>div>sib-display-value[name='name'] { + .cell-with-name { color: $color-233-18-29; font-weight: 600; padding-top: 2.5rem; } - team-template-edit>sib-display>div, - [name='owner']>sib-display>div, - project-captain[name='user']>sib-display>div, - [name='captain']>sib-display>div { + .cell-with-id-card>div, /* for the table in circle-edit */ + .cell-with-id-card>sib-display>div, + project-captain[name='user']>sib-display>div { /* for the captain's cell in project-admin */ display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; @@ -164,7 +163,7 @@ } } - [name='buttons'] { + .cell-with-buttons { align-items: center; display: flex; justify-content: center;