autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
src/styles/base/table.scss
View File

@ -1,18 +1,9 @@
/*#circle-information, /* Display and positioning of the table and its elements */
#circle-edit,
#admin-circle-create,
#project-edit,
#admin-project-create*/
[widget="hubl-team-template-edit"]>div {
flex: 1;
}
.table-wrapper { .table-wrapper {
overflow: auto; overflow: auto;
position: relative; position: relative;
width: 100%; width: 100%;
z-index: 1;
.table { .table {
border-collapse: collapse; border-collapse: collapse;
@ -46,195 +37,145 @@
&>div { &>div {
display: contents; display: contents;
/*&>* { &>* {
display: table-cell; 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 */ /* Styles of the tables and its elements */
.table-wrapper { .table-header {
font-size: 1.6rem;
font-weight: 600;
.table { &.grey-color {
background: var(--color-table-header-background);
color: var(--color-table-header-text);
}
.table-header { >* {
font-size: 1.6rem; border-right: 1px solid var(--color-table-border);
font-weight: 600; padding: 2.1rem 0;
text-align: center;
}
&.grey-color { >*:last-of-type {
background: var(--color-table-header-background); border-right: 1px solid --color-table-header-background;
color: var(--color-table-header-text);
}
>* {
border-right: 1px solid var(--color-table-border);
padding: 2.1rem 0;
text-align: center;
}
>*:last-of-type {
border-right: 1px solid --color-table-header-background;
}
}
.table-body {
border-left: 1px solid var(--color-table-border);
border-right: 1px solid var(--color-table-border);
}
.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;
}
.w786 {
width: 786px;
}
.w262 {
width: 262px;
}
.w349 {
width: 349px;
}
.w698 {
width: 698px;
}
/*.w25 {
width: 25%;
}
.w33 {
width: 33.3333%;
}
.w50 {
width: 50%;
}
.w66 {
width: 66.6666%;
}
.w75 {
width: 75%;
}*/
.hashtag::before {
content: '#';
}
}
.cell-with-buttons {
text-align: center;
vertical-align: middle;
[name='button'] {
input[type='submit'] {
@extend
.button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered,
.btn-margin-left;
}
}
}
.cell-with-name {
color: var(--color-secondary);
font-weight: 600;
text-align: center;
vertical-align: middle;
}
sib-multiple {
display: flex;
align-items: center;
justify-content: center;
}
.user-thumb>div/* for the table in circle-edit and captain's cell in project-admin */,
[name='user-thumb'] {
@extend %user-thumb__grid;
padding: 0 2.2rem;
>.user-thumb__picture {
@extend .user-thumb__picture;
}
>[name='sup'] {
@extend %user-thumb__grid-sup;
}
>[name='sub'] {
@extend %user-thumb__grid-inf;
}
}
sib-ac-checker {
align-items: center;
/*display: flex;*/
justify-content: center;
}
/*.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;
}
}
}*/
} }
} }
.table-body {
border-left: 1px solid var(--color-table-border);
border-right: 1px solid var(--color-table-border);
}
.table-body,
.table-header {
.border {
border-bottom: 1px solid var(--color-table-border);
border-right: 1px solid var(--color-table-border);
}
/* Fix. Could disappear when we can add .class on set fields */
[name^='cell-1'] {
@extend .w786;
@extend .border;
}
.w786 {
width: 786px;
}
.w262 {
width: 262px;
}
.w349 {
width: 349px;
}
.w698 {
width: 698px;
}
.hashtag::before {
content: '#';
}
}
/* Styles of specific cells */
.cell-with-buttons {
text-align: center;
vertical-align: middle;
[name='button'] {
input[type='submit'] {
@extend
.button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered,
.btn-margin-left;
}
}
}
.cell-with-name {
color: var(--color-secondary);
font-weight: 600;
text-align: center;
vertical-align: middle;
}
/* Styles of elements inside cells */
.user-thumb>div,
[name='user-thumb'] {
@extend %user-thumb__grid;
padding: 0 2.2rem;
>.user-thumb__picture {
@extend .user-thumb__picture;
}
>[name='sup'] {
@extend %user-thumb__grid-sup;
}
>[name='sub'] {
@extend %user-thumb__grid-inf;
}
}
.table sib-ac-checker {
text-align: center;
vertical-align: middle;
}
.circle-join { .circle-join {
position: relative; position: relative;
@ -258,22 +199,21 @@
.circle-leave { .circle-leave {
position: relative; position: relative;
width: 30%; width: 40%;
min-width: 30%; min-width: 40%;
}
.circle-leave>button { &>button {
position: absolute; height: 29px;
width: 106%; padding-left: 13px;
left: 1px; position: absolute;
/* background: antiquewhite; */ left: 1px;
height: 29px; top: -1px;
top: -1px; width: 106%;
padding-left: 13px; }
}
.circle-leave.button.with-icon::before { &.button.with-icon::before {
font-size: 1.6rem; font-size: 1.6rem;
margin-right: 2rem; margin-right: 2rem !important;
margin-left: -50px; margin-left: -50px;
}
} }

1
src/styles/layout/user/_index.scss
View File

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

6
src/styles/layout/user/admin-users.scss
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;
}

12
src/views/admin/page-admin-circles.pug
View File

@ -61,9 +61,9 @@
nested-field='circles' nested-field='circles'
fields='circle.name, circle.owner, leaveButton' fields='circle.name, circle.owner, leaveButton'
class-circle.name='w349 cell border cell-with-name' class-circle.name='w349 border cell-with-name'
class-circle.owner='w349 cell border cell-with-id-card' class-circle.owner='w349 border cell-with-id-card'
class-leaveButton='w349 cell border cell-with-buttons' class-leaveButton='w349 border cell-with-buttons'
action-leaveButton="joinButton" action-leaveButton="joinButton"
widget-leaveButton="hubl-admin-circle-leave-button" widget-leaveButton="hubl-admin-circle-leave-button"
@ -90,11 +90,11 @@
data-src=`${endpoints.circles || endpoints.get.circles}joinable/` data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
fields='name, owner, members' fields='name, owner, members'
class-name='w349 cell border cell-with-name' class-name='w349 border cell-with-name'
class-owner='w349 cell border cell-with-id-card' class-owner='w349 border cell-with-id-card'
widget-owner='hubl-circle-owner' 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" widget-members="hubl-admin-circle-join-button"
order-by="name" order-by="name"

8
src/views/admin/page-admin-projects.pug
View File

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

2
src/views/admin/page-admin-users.pug
View File

@ -47,7 +47,7 @@
label-actions='Edit' label-actions='Edit'
action-actions='admin-users-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' widget-actions='hubl-sib-action-custom'
order-by='username' order-by='username'