From 213c6a78abae3da3c90160ff3b1bb3ba17e2c02f Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Wed, 10 Jun 2020 13:27:57 +0200 Subject: [PATCH] update: table - some padding added to user-thulb in table + new width for table's columns --- src/styles/base/table.scss | 29 +++++++++++++++---------- src/styles/base/user-thumb.scss | 4 ++-- src/views/admin/page-admin-circles.pug | 18 +++++++-------- src/views/admin/page-admin-users.pug | 6 ++--- src/views/circle/page-circle-edit.pug | 12 +++++----- src/views/project/page-project-edit.pug | 4 ++-- 6 files changed, 40 insertions(+), 33 deletions(-) diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index c1e34d8..fc9c523 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -40,6 +40,7 @@ &>* { display: table-cell; + vertical-align: middle; } } } @@ -55,6 +56,8 @@ &>* { display: table-cell; + text-align: center; + vertical-align: middle; } } } @@ -100,24 +103,28 @@ /* Fix. Could disappear when we can add .class on set fields */ [name^='cell-1'] { - @extend .w786; + @extend .w280; @extend .border; } - .w786 { - width: 786px; + .w280 { + width: 280px; + } + + .w70 { + width: 70px; } .w262 { width: 262px; } - .w349 { - width: 349px; + .W152 { + width: 152px; } - .w698 { - width: 698px; + .w355 { + width: 355px; } .hashtag::before { @@ -129,7 +136,6 @@ .cell-with-buttons { text-align: center; - vertical-align: middle; [name='button'] { @@ -149,14 +155,16 @@ .cell-with-name { color: var(--color-secondary); font-weight: 600; - text-align: center; - vertical-align: middle; + padding-left: 2rem; + text-align: left; } /* Styles of elements inside cells */ .user-thumb>div, [name='user-thumb'] { + vertical-align: middle; + text-align: left; @extend %user-thumb__grid; padding: 0 2.2rem; @@ -175,7 +183,6 @@ .table sib-ac-checker { text-align: center; - vertical-align: middle; } .circle-join { diff --git a/src/styles/base/user-thumb.scss b/src/styles/base/user-thumb.scss index 99ffb81..2541099 100644 --- a/src/styles/base/user-thumb.scss +++ b/src/styles/base/user-thumb.scss @@ -3,7 +3,7 @@ display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); + grid-template-rows: repeat(2, auto); } %user-thumb__grid-sup { @@ -93,5 +93,5 @@ /* Add extra spaces to user-thumbs that are inside a table */ .user-thumb.is-spaced>div, [name='user-thumb'] { - padding: 0 2.2rem; + padding: 0.8rem 2.2rem; } diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index 7070d45..6ebb825 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -42,9 +42,9 @@ .table div.table-header.grey-color - div.w349 Nom - div.w349 Administrateurs - div.w349 Rejoindre + div.w280 Nom + div.w280 Administrateurs + div.w280 Rejoindre sib-widget(name='hubl-admin-circle-leave-button') template @@ -61,9 +61,9 @@ nested-field='circles' fields='circle.name, circle.owner, leaveButton' - class-circle.name='w349 border cell-with-name' - class-circle.owner='w349 border cell-with-id-card' - class-leaveButton='w349 border cell-with-buttons' + class-circle.name='w280 border cell-with-name' + class-circle.owner='w280 border cell-with-id-card' + class-leaveButton='w280 border cell-with-buttons' action-leaveButton="joinButton" widget-leaveButton="hubl-admin-circle-leave-button" @@ -90,11 +90,11 @@ data-src=`${endpoints.circles || endpoints.get.circles}joinable/` fields='name, owner, members' - class-name='w349 border cell-with-name' - class-owner='w349 border cell-with-id-card' + class-name='w280 border cell-with-name' + class-owner='w280 border cell-with-id-card' widget-owner='hubl-circle-owner' - class-members='w349 border cell-with-buttons' + class-members='w280 border cell-with-buttons' widget-members="hubl-admin-circle-join-button" order-by="name" diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index 05bb53c..ac954fd 100644 --- a/src/views/admin/page-admin-users.pug +++ b/src/views/admin/page-admin-users.pug @@ -31,8 +31,8 @@ .table-wrapper .table div.table-header.grey-color - div.w786 Nom - div.w262 + div.w280 Nom + div.w70 sib-display( class='table-body' @@ -47,7 +47,7 @@ label-actions='Edit' action-actions='admin-users-edit' - class-actions='w262 border cell-with-buttons' + class-actions='w70 border cell-with-buttons' widget-actions='hubl-sib-action-custom' order-by='username' diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index 891f3a2..e10a7ee 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -7,8 +7,8 @@ div.content-box__info sib-widget(name='hubl-team-template-edit') template - sib-display.user-thumb( - class='w698 cell border cell-with-id-card user-thumb' + sib-display.user-thumb.is-spaced( + class='w355 cell border cell-with-id-card user-thumb' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' @@ -24,7 +24,7 @@ div.content-box__info ) sib-ac-checker( - class='w349 cell border' + class='W152 cell border' permission="acl:Delete" data-src="${value['@id']}" ) @@ -36,7 +36,7 @@ div.content-box__info //- Only to show the table grid sib-ac-checker( - class='w349 cell border' + class='W152 cell border' no-permission="acl:Delete" data-src="${value['@id']}" ) @@ -91,8 +91,8 @@ div.content-box__info .table-wrapper .table div.table-header.grey-color - div.w698 Nom - div.w349 Accès + div.w355 Nom + div.W152 Accès //-class='table-body' sib-display( diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index 46cfe3a..195c6a0 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -56,8 +56,8 @@ div.content-box__info.flex .table-wrapper .table div.table-header.grey-color - div.w698 Nom - div.w349 Accès + div.w355 Nom + div.W152 Accès //-class='table-body' sib-display(