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

update: table - responsive for admin-user and admin-circle

This commit is contained in:
gaelle morin 2020-06-10 00:03:58 +02:00
parent 74cec30974
commit 7e655e054a
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
5 changed files with 222 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/styles/base/form.scss
View File

@ -83,7 +83,7 @@ textarea {
&.with-form { &.with-form {
sib-set-default:not([name='user-thumb']) { /*sib-set-default:not([name='user-thumb']) {
clear: both; clear: both;
display: flex!important; display: flex!important;
flex-wrap: wrap; flex-wrap: wrap;
@ -93,7 +93,7 @@ textarea {
float: left; float: left;
width: 50%; width: 50%;
} }
} }*/
} }
} }

4
src/styles/base/main.scss
View File

@ -331,6 +331,10 @@ h5 {
.content-box__info { .content-box__info {
flex-direction: column; flex-direction: column;
padding: 3.2rem; padding: 3.2rem;
* {
box-sizing: border-box;
}
} }
/*.modal { /*.modal {

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

@ -1,44 +1,73 @@
#circle-information, /*#circle-information,
#circle-edit, #circle-edit,
#admin-circle-list, #admin-circle-list,
#admin-circle-create, #admin-circle-create,
#project-edit, #project-edit,
#admin-project-list, #admin-project-list,
#admin-project-create, #admin-project-create,
#admin-users-list { #admin-users-list*/
[widget="hubl-team-template-edit"]>div { [widget="hubl-team-template-edit"]>div {
flex: 1; flex: 1;
} }
.table-body>div:first-of-type, .table-wrapper {
.table-body>div:first-of-type>sib-display, overflow: auto;
.table-body>div:first-of-type>sib-display>div { position: relative;
display: contents; width: 100%;
} z-index: 1;
.gridjs-wrapper {
width: 100%;
position: relative;
z-index: 1;
overflow: auto;
display: block;
}
.table { .table {
width: 100%;
max-width: 100%;
border-collapse: collapse; border-collapse: collapse;
display: table;
overflow: auto; overflow: auto;
table-layout: fixed; table-layout: fixed;
width: 100%;
max-width: 100%;
}
.table-header {
display: table-header-group;
text-align: center;
vertical-align: middle;
&>div {
display: table-cell;
white-space: nowrap;
}
}
.table-body {
display: table-row-group;
&>div {
display: contents;
&>sib-display {
display: table-row;
&>div {
display: contents;
/*&>* {
display: table-cell;
see L107
}*/
}
}
}
}
}
/* Styles of the tables */
.table-wrapper {
.table {
.table-header { .table-header {
display: flex;
flex: 1;
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 600; font-weight: 600;
justify-content: space-around;
text-align: center;
&.grey-color { &.grey-color {
background: var(--color-table-header-background); background: var(--color-table-header-background);
@ -56,27 +85,46 @@
} }
} }
.table-body {
border-left: 1px solid var(--color-table-border);
border-right: 1px solid var(--color-table-border);
}
.table-body, .table-body,
.table-header { .table-header {
>div:first-of-type>sib-display>div, /*>div:first-of-type>sib-display>div,
hubl-team-template-edit[name='members'] { hubl-team-template-edit[name='members'] {
display: flex; display: flex;
border-left: 1px solid var(--color-table-border); border-left: 1px solid var(--color-table-border);
} }*/
.border { .border {
border-bottom: 1px solid var(--color-table-border); border-bottom: 1px solid var(--color-table-border);
border-right: 1px solid var(--color-table-border); border-right: 1px solid var(--color-table-border);
} }
.cell { .cell,
text-align: center; [name^="cell-"] {
/*text-align: center;
word-wrap: break-word; word-wrap: break-word;
white-space: nowrap; white-space: nowrap;*/
display: table-cell;
}
.w75 {
width: 280px;
} }
.w25 { .w25 {
width: 70px;
}
.w33 {
width: 256px;
}
/*.w25 {
width: 25%; width: 25%;
} }
@ -94,7 +142,7 @@
.w75 { .w75 {
width: 75%; width: 75%;
} }*/
.hashtag::before { .hashtag::before {
content: '#'; content: '#';
@ -102,9 +150,8 @@
} }
.cell-with-buttons { .cell-with-buttons {
align-items: center; text-align: center;
display: flex; vertical-align: middle;
justify-content: center;
[name='button'] { [name='button'] {
@ -124,7 +171,8 @@
.cell-with-name { .cell-with-name {
color: var(--color-secondary); color: var(--color-secondary);
font-weight: 600; font-weight: 600;
padding-top: 2.5rem; text-align: center;
vertical-align: middle;
} }
sib-multiple { sib-multiple {
@ -133,10 +181,7 @@
justify-content: center; justify-content: center;
} }
.user-thumb>div .user-thumb>div/* for the table in circle-edit and captain's cell in project-admin */,
/* for the table in circle-edit and captain's cell in project-admin */
,
[name='user-thumb'] { [name='user-thumb'] {
@extend %user-thumb__grid; @extend %user-thumb__grid;
padding: 0 2.2rem; padding: 0 2.2rem;
@ -156,49 +201,78 @@
sib-ac-checker { sib-ac-checker {
align-items: center; align-items: center;
display: flex; /*display: flex;*/
justify-content: center; justify-content: center;
} }
}
.circle-join { /*.w75 {
position: relative; min-width: 250px;
width: 40%;
min-width: 40%;
input {
height: 29px;
left: -1px;
position: absolute;
top: -1px;
width: 105%;
padding-left: 16px;
} }
&.button.with-icon::before { .w25 {
margin-left: 12px; min-width: 70px;
} }*/
}
.circle-leave { /*sib-display[fields="cell-1(user-thumb(account.picture, sup(name), sub(username))), actions"] {
position: relative; &>div {
width: 30%; >sib-set-default {
min-width: 30%; min-width: 250px;
} }
.circle-leave>button { hubl-sib-action-custom {
position: absolute; min-width: 70px;
width: 106%; }
left: 1px; }
/* background: antiquewhite; */ }*/
height: 29px;
top: -1px;
padding-left: 13px;
}
.circle-leave.button.with-icon::before {
font-size: 1.6rem;
margin-right: 2rem;
margin-left: -50px;
} }
} }
.circle-join {
position: relative;
width: 181px;
margin: 0 auto;
min-width: 181px;
input {
height: 29px;
left: -1px;
position: absolute;
top: -1px;
width: 102%;
padding-left: 14px !important;
}
&.button.with-icon::before {
margin-left: 6px;
}
}
.circle-leave {
position: relative;
width: 30%;
min-width: 30%;
}
.circle-leave>button {
position: absolute;
width: 106%;
left: 1px;
/* background: antiquewhite; */
height: 29px;
top: -1px;
padding-left: 13px;
}
.circle-leave.button.with-icon::before {
font-size: 1.6rem;
margin-right: 2rem;
margin-left: -50px;
}

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

@ -38,66 +38,67 @@
next='admin-circle-create' next='admin-circle-create'
) Créer un canal ) Créer un canal
.table .table-wrapper
.table
div.table-header.grey-color div.table-header.grey-color
div.w33 Nom div.w33 Nom
div.w33 Administrateurs div.w33 Administrateurs
div.w33 Rejoindre div.w33 Rejoindre
sib-widget(name='hubl-admin-circle-leave-button') sib-widget(name='hubl-admin-circle-leave-button')
template template
sib-delete( sib-delete(
class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}" data-src="${src}"
data-label='Quitter' data-label='Quitter'
) )
sib-display( sib-display(
class='table-body' class='table-body'
bind-user bind-user
nested-field='circles' nested-field='circles'
fields='circle.name, circle.owner, leaveButton' fields='circle.name, circle.owner, leaveButton'
class-circle.name='w33 cell border cell-with-name' class-circle.name='w33 cell border cell-with-name'
class-circle.owner='w33 cell border cell-with-id-card' class-circle.owner='w33 cell border cell-with-id-card'
class-leaveButton='w33 cell border cell-with-buttons' class-leaveButton='w33 cell border cell-with-buttons'
action-leaveButton="joinButton" action-leaveButton="joinButton"
widget-leaveButton="hubl-admin-circle-leave-button" widget-leaveButton="hubl-admin-circle-leave-button"
widget-circle.owner='hubl-circle-owner' widget-circle.owner='hubl-circle-owner'
order-by="circle.name" order-by="circle.name"
) )
sib-widget(name='hubl-admin-circle-join-button') sib-widget(name='hubl-admin-circle-join-button')
template template
sib-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex( sib-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
data-src='${value}' data-src='${value}'
fields='user.username' fields='user.username'
value-user.username='hubl-workaround-493' value-user.username='hubl-workaround-493'
widget-user.username='sib-form-hidden' widget-user.username='sib-form-hidden'
submit-button='Rejoindre' submit-button='Rejoindre'
) )
sib-display( sib-display(
class='table-body' class='table-body'
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='w33 cell border cell-with-name' class-name='w33 cell border cell-with-name'
class-owner='w33 cell border cell-with-id-card' class-owner='w33 cell border cell-with-id-card'
widget-owner='hubl-circle-owner' widget-owner='hubl-circle-owner'
class-members='w33 cell border cell-with-buttons' class-members='w33 cell border cell-with-buttons'
widget-members="hubl-admin-circle-join-button" widget-members="hubl-admin-circle-join-button"
order-by="name" order-by="name"
) )
#admin-circle-create(hidden) #admin-circle-create(hidden)

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

@ -28,29 +28,30 @@
next='admin-users-create' next='admin-users-create'
) Ajouter un utilisateur ) Ajouter un utilisateur
.table .table-wrapper
div.table-header.grey-color .table
div.w75 Nom div.table-header.grey-color
div.w25 div.w75 Nom
div.w25
sib-display(
class='table-body' sib-display(
data-src=`${endpoints.users || endpoints.get.users}` class='table-body'
fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions' data-src=`${endpoints.users || endpoints.get.users}`
fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
class-account.picture='avatar user-thumb__picture' class-account.picture='avatar user-thumb__picture'
class-name='user-thumb__name' class-name='user-thumb__name'
class-username='user-thumb__username' class-username='user-thumb__username'
class-profile.city='user-thumb__city' class-profile.city='user-thumb__city'
widget-account.picture='hubl-user-avatar' widget-account.picture='hubl-user-avatar'
label-actions='Edit' label-actions='Edit'
action-actions='admin-users-edit' action-actions='admin-users-edit'
class-actions='w25 cell border cell-with-buttons' class-actions='w25 cell border cell-with-buttons'
widget-actions='hubl-sib-action-custom' widget-actions='hubl-sib-action-custom'
order-by='username' order-by='username'
) )
#admin-users-create(hidden) #admin-users-create(hidden)