update: table - responsive ok. Need rework of scroll bar and breakpoints

This commit is contained in:
gaelle morin 2020-06-10 11:25:36 +02:00
parent cf080c7c71
commit e6d1ddc33c
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
6 changed files with 145 additions and 212 deletions

View File

@ -1,18 +1,9 @@
/*#circle-information,
#circle-edit,
#admin-circle-create,
#project-edit,
#admin-project-create*/
[widget="hubl-team-template-edit"]>div {
flex: 1;
}
/* Display and positioning of the table and its elements */
.table-wrapper {
overflow: auto;
position: relative;
width: 100%;
z-index: 1;
.table {
border-collapse: collapse;
@ -46,21 +37,32 @@
&>div {
display: contents;
/*&>* {
&>* {
display: table-cell;
see L107
}*/
}
}
}
&>sib-multiple {
display: contents;
&>div {
display: contents;
&>hubl-team-template-edit {
display: table-row;
&>* {
display: table-cell;
}
}
}
}
}
}
}
/* Styles of the tables */
.table-wrapper {
.table {
/* Styles of the tables and its elements */
.table-header {
font-size: 1.6rem;
@ -90,23 +92,15 @@
.table-body,
.table-header {
/*>div:first-of-type>sib-display>div,
hubl-team-template-edit[name='members'] {
display: flex;
border-left: 1px solid var(--color-table-border);
}*/
.border {
border-bottom: 1px solid var(--color-table-border);
border-right: 1px solid var(--color-table-border);
}
.cell,
[name^="cell-"] {
/*text-align: center;
word-wrap: break-word;
white-space: nowrap;*/
display: table-cell;
/* Fix. Could disappear when we can add .class on set fields */
[name^='cell-1'] {
@extend .w786;
@extend .border;
}
.w786 {
@ -125,31 +119,13 @@
width: 698px;
}
/*.w25 {
width: 25%;
}
.w33 {
width: 33.3333%;
}
.w50 {
width: 50%;
}
.w66 {
width: 66.6666%;
}
.w75 {
width: 75%;
}*/
.hashtag::before {
content: '#';
}
}
/* Styles of specific cells */
.cell-with-buttons {
text-align: center;
vertical-align: middle;
@ -176,13 +152,9 @@
vertical-align: middle;
}
sib-multiple {
display: flex;
align-items: center;
justify-content: center;
}
/* Styles of elements inside cells */
.user-thumb>div/* for the table in circle-edit and captain's cell in project-admin */,
.user-thumb>div,
[name='user-thumb'] {
@extend %user-thumb__grid;
padding: 0 2.2rem;
@ -200,42 +172,11 @@
}
}
sib-ac-checker {
align-items: center;
/*display: flex;*/
justify-content: center;
.table sib-ac-checker {
text-align: center;
vertical-align: middle;
}
/*.w75 {
min-width: 250px;
}
.w25 {
min-width: 70px;
}*/
/*sib-display[fields="cell-1(user-thumb(account.picture, sup(name), sub(username))), actions"] {
&>div {
>sib-set-default {
min-width: 250px;
}
hubl-sib-action-custom {
min-width: 70px;
}
}
}*/
}
}
.circle-join {
position: relative;
width: 181px;
@ -258,22 +199,21 @@
.circle-leave {
position: relative;
width: 30%;
min-width: 30%;
}
width: 40%;
min-width: 40%;
.circle-leave>button {
position: absolute;
width: 106%;
left: 1px;
/* background: antiquewhite; */
&>button {
height: 29px;
top: -1px;
padding-left: 13px;
position: absolute;
left: 1px;
top: -1px;
width: 106%;
}
.circle-leave.button.with-icon::before {
&.button.with-icon::before {
font-size: 1.6rem;
margin-right: 2rem;
margin-right: 2rem !important;
margin-left: -50px;
}
}

View File

@ -1,2 +1 @@
@import 'user-profile';
@import 'admin-users';

View File

@ -1,6 +0,0 @@
/* Fix. Could disappear when we can add .class on set fields */
sib-set-default[name='cell-1'] {
@extend .w786;
@extend .cell;
@extend .border;
}

View File

@ -61,9 +61,9 @@
nested-field='circles'
fields='circle.name, circle.owner, leaveButton'
class-circle.name='w349 cell border cell-with-name'
class-circle.owner='w349 cell border cell-with-id-card'
class-leaveButton='w349 cell border cell-with-buttons'
class-circle.name='w349 border cell-with-name'
class-circle.owner='w349 border cell-with-id-card'
class-leaveButton='w349 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 cell border cell-with-name'
class-owner='w349 cell border cell-with-id-card'
class-name='w349 border cell-with-name'
class-owner='w349 border cell-with-id-card'
widget-owner='hubl-circle-owner'
class-members='w349 cell border cell-with-buttons'
class-members='w349 border cell-with-buttons'
widget-members="hubl-admin-circle-join-button"
order-by="name"

View File

@ -82,10 +82,10 @@
data-src=`${endpoints.projects || endpoints.get.projects}`
fields='name, members, captain, buttons'
class-name='w262 cell border cell-with-name hashtag'
class-members='w262 cell border'
class-captain='w262 cell border cell-with-id-card'
class-buttons='w262 cell border cell-with-buttons'
class-name='w262 border cell-with-name hashtag'
class-members='w262 border'
class-captain='w262 border cell-with-id-card'
class-buttons='w262 border cell-with-buttons'
widget-buttons="admin-project-buttons"
action-buttons="buttons"

View File

@ -47,7 +47,7 @@
label-actions='Edit'
action-actions='admin-users-edit'
class-actions='w262 cell border cell-with-buttons'
class-actions='w262 border cell-with-buttons'
widget-actions='hubl-sib-action-custom'
order-by='username'