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

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

Browse Source
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 {
sib-set-default:not([name='user-thumb']) {
/*sib-set-default:not([name='user-thumb']) {
clear: both;
display: flex!important;
flex-wrap: wrap;
@ -93,7 +93,7 @@ textarea {
float: left;
width: 50%;
}
}
}*/
}
}

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

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

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

@ -1,44 +1,73 @@
#circle-information,
/*#circle-information,
#circle-edit,
#admin-circle-list,
#admin-circle-create,
#project-edit,
#admin-project-list,
#admin-project-create,
#admin-users-list {
#admin-users-list*/
[widget="hubl-team-template-edit"]>div {
flex: 1;
}
[widget="hubl-team-template-edit"]>div {
flex: 1;
}
.table-body>div:first-of-type,
.table-body>div:first-of-type>sib-display,
.table-body>div:first-of-type>sib-display>div {
display: contents;
}
.gridjs-wrapper {
width: 100%;
position: relative;
z-index: 1;
overflow: auto;
display: block;
}
.table-wrapper {
overflow: auto;
position: relative;
width: 100%;
z-index: 1;
.table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
display: table;
overflow: auto;
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 {
display: flex;
flex: 1;
font-size: 1.6rem;
font-weight: 600;
justify-content: space-around;
text-align: center;
&.grey-color {
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-header {
>div:first-of-type>sib-display>div,
/*>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 {
text-align: center;
.cell,
[name^="cell-"] {
/*text-align: center;
word-wrap: break-word;
white-space: nowrap;
white-space: nowrap;*/
display: table-cell;
}
.w75 {
width: 280px;
}
.w25 {
width: 70px;
}
.w33 {
width: 256px;
}
/*.w25 {
width: 25%;
}
@ -94,7 +142,7 @@
.w75 {
width: 75%;
}
}*/
.hashtag::before {
content: '#';
@ -102,9 +150,8 @@
}
.cell-with-buttons {
align-items: center;
display: flex;
justify-content: center;
text-align: center;
vertical-align: middle;
[name='button'] {
@ -124,7 +171,8 @@
.cell-with-name {
color: var(--color-secondary);
font-weight: 600;
padding-top: 2.5rem;
text-align: center;
vertical-align: middle;
}
sib-multiple {
@ -133,10 +181,7 @@
justify-content: center;
}
.user-thumb>div
/* for the table in circle-edit and captain's cell in project-admin */
,
.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;
@ -156,49 +201,78 @@
sib-ac-checker {
align-items: center;
display: flex;
/*display: flex;*/
justify-content: center;
}
}
.circle-join {
position: relative;
width: 40%;
min-width: 40%;
input {
height: 29px;
left: -1px;
position: absolute;
top: -1px;
width: 105%;
padding-left: 16px;
/*.w75 {
min-width: 250px;
}
&.button.with-icon::before {
margin-left: 12px;
}
}
.w25 {
min-width: 70px;
}*/
.circle-leave {
position: relative;
width: 30%;
min-width: 30%;
}
/*sib-display[fields="cell-1(user-thumb(account.picture, sup(name), sub(username))), actions"] {
&>div {
>sib-set-default {
min-width: 250px;
}
.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;
hubl-sib-action-custom {
min-width: 70px;
}
}
}*/
}
}
.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'
) Créer un canal
.table
.table-wrapper
.table
div.table-header.grey-color
div.w33 Nom
div.w33 Administrateurs
div.w33 Rejoindre
div.table-header.grey-color
div.w33 Nom
div.w33 Administrateurs
div.w33 Rejoindre
sib-widget(name='hubl-admin-circle-leave-button')
template
sib-delete(
class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}"
data-label='Quitter'
)
sib-widget(name='hubl-admin-circle-leave-button')
template
sib-delete(
class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}"
data-label='Quitter'
)
sib-display(
class='table-body'
sib-display(
class='table-body'
bind-user
nested-field='circles'
fields='circle.name, circle.owner, leaveButton'
bind-user
nested-field='circles'
fields='circle.name, circle.owner, leaveButton'
class-circle.name='w33 cell border cell-with-name'
class-circle.owner='w33 cell border cell-with-id-card'
class-leaveButton='w33 cell border cell-with-buttons'
class-circle.name='w33 cell border cell-with-name'
class-circle.owner='w33 cell border cell-with-id-card'
class-leaveButton='w33 cell border cell-with-buttons'
action-leaveButton="joinButton"
widget-leaveButton="hubl-admin-circle-leave-button"
widget-circle.owner='hubl-circle-owner'
action-leaveButton="joinButton"
widget-leaveButton="hubl-admin-circle-leave-button"
widget-circle.owner='hubl-circle-owner'
order-by="circle.name"
)
order-by="circle.name"
)
sib-widget(name='hubl-admin-circle-join-button')
template
sib-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
data-src='${value}'
sib-widget(name='hubl-admin-circle-join-button')
template
sib-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
data-src='${value}'
fields='user.username'
value-user.username='hubl-workaround-493'
widget-user.username='sib-form-hidden'
fields='user.username'
value-user.username='hubl-workaround-493'
widget-user.username='sib-form-hidden'
submit-button='Rejoindre'
)
submit-button='Rejoindre'
)
sib-display(
class='table-body'
sib-display(
class='table-body'
data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
fields='name, owner, members'
data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
fields='name, owner, members'
class-name='w33 cell border cell-with-name'
class-owner='w33 cell border cell-with-id-card'
widget-owner='hubl-circle-owner'
class-name='w33 cell border cell-with-name'
class-owner='w33 cell border cell-with-id-card'
widget-owner='hubl-circle-owner'
class-members='w33 cell border cell-with-buttons'
widget-members="hubl-admin-circle-join-button"
class-members='w33 cell border cell-with-buttons'
widget-members="hubl-admin-circle-join-button"
order-by="name"
)
order-by="name"
)
#admin-circle-create(hidden)

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

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