diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 7d555fc..8b6ca5d 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -18,8 +18,23 @@ .reversed, .button-secondary, .bordered; - margin-left: auto; - margin-top: 3.2rem; + height: auto; + position: fixed; + bottom: 1em; + left: 10%; + white-space: normal; + width: 80%; + z-index: 1; + + @include breakpoint(lg) { + height: 3rem; + left: 0; + margin: 0; + margin-left: auto; + margin-top: 109px; + position: relative; + width: auto; + } } .form-label { @@ -78,6 +93,7 @@ textarea { height: 100px; + resize: vertical; } .content-box { @@ -224,30 +240,49 @@ sib-form-date { } sib-form-file { - - label { - align-items: baseline; - clear: both; + + div { display: flex; - flex-direction: row; - flex-wrap: wrap; - max-width: 100%; - - div { - width: 100%; + flex-direction: column-reverse; + align-items: center; + margin-top: 1.8rem; + + @include breakpoint(lg) { + flex-direction: row-reverse; + justify-content: flex-end; } - - input[type='text'] { - box-sizing: border-box; - flex: 0 0 50%; - } - + input[type='file'] { - box-sizing: border-box; - flex: 0 0 20%; - color: var(--color-input-text); - cursor: pointer; - padding-left: 3rem; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + width: 0.1px; + z-index: -1; + } + + input[type='text'] { + margin-bottom: 0.8rem; + width: 100%; + + @include breakpoint(lg) { + width: auto; + } + } + + label { + @extend .button, + .text-bold, + .text-uppercase, + .button-primary, + .bordered; + text-align: center; + width: 100%; + + @include breakpoint(lg) { + margin: auto 2.2rem; + width: auto; + } } } } diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index e917128..95af476 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -4,6 +4,11 @@ overflow: auto; position: relative; width: 100%; + margin-bottom: 6rem; + + @include breakpoint(lg) { + margin-bottom: 0; + } .table { border-collapse: collapse; @@ -71,7 +76,6 @@ /* Styles of the table and its elements */ .table { - border-bottom: 1px solid var(--color-table-border); border-left: 1px solid var(--color-table-border); border-right: 1px solid var(--color-table-border); } @@ -113,20 +117,16 @@ width: 280px; } + .w230 { + width: 230px; + } + .w70 { width: 70px; } - .w262 { - width: 262px; - } - - .W152 { - width: 152px; - } - - .w355 { - width: 355px; + .w162 { + width: 162px; } .hashtag::before { @@ -209,8 +209,9 @@ .circle-leave { position: relative; - width: 40%; - min-width: 40%; + width: 164px; + margin: 0 auto; + min-width: 164px; &>button { height: 29px; diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index 3a8bc3a..ef701be 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/src/views/admin/page-admin-projects-create.pug @@ -12,26 +12,23 @@ div.content-box__info.flex naked ) - h1 Créer un nouveau projet + h1.centered Créer un nouveau projet sib-form.form.button-register( data-src=`${endpoints.projects || endpoints.post.projects}` - fields='status, line-1(customer.name, name), description, line-10(captain)' + fields='status, line-1(customer.name, name), description, line-10(captain), logo' label-status='Statut du canal*' widget-status='hubl-status' - class-status='form-label is-light is-full-width member-select color' + class-status='form-label is-light is-full-width' label-description='Description du projet' - class-description='form-label is-light is-full-width' + class-description='form-label is-light is-full-width input-text-like' widget-description='sib-form-textarea' - - class-fieldset-captain='fieldset' - widget-fieldset-captain='hubl-template-project-title' label-customer.name='Nom du client*' - class-customer.name='form-label is-light is-half-width' + class-customer.name='form-label is-light is-half-width input-text-like' label-name='Nom du projet*' class-name='form-label is-light is-half-width input-text-like' @@ -41,6 +38,12 @@ div.content-box__info.flex class-captain='form-label is-light is-half-width' widget-captain='sib-form-auto-completion' + class='input-text-like' + widget-logo="sib-form-file" + label-logo="Télécharger un logo" + class-logo='select-add' + upload-url-logo=`${endpoints.uploads || endpoints.post.uploads}` + next='project-picture' submit-button='Enregistrer et ajouter des membres' diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index c263c4e..9276e6b 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -22,106 +22,107 @@ next='admin-project-create' ) Créer un nouveau projet - .table - div.table-header.grey-color - div.w25 Nom - div.w25 Administrateurs - div.w25 Capitaines - div.w25 Rejoindre + .table-wrapper + .table + div.table-header.grey-color + div.w280 Nom + div.w280 Administrateurs + div.w280 Capitaines + div.w230 Rejoindre - sib-widget(name="hubl-admin-project-leave-button") - template - sib-delete( - class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' - data-src="${src}" - data-label='Quitter' - ) + sib-widget(name="hubl-admin-project-leave-button") + template + sib-delete( + class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' + data-src="${src}" + data-label='Quitter' + ) - sib-widget(name='hubl-project-captain') - template - sib-display.user-thumb( - data-src='${await value}' - fields='account.picture, sup(name), sub(username)' + sib-widget(name='hubl-project-captain') + template + sib-display.user-thumb.is-spaced( + data-src='${await value}' + fields='account.picture, sup(name), sub(username)' - class-account.picture='user-thumb__picture' - class-name='user-thumb__name' - class-username='user-thumb__username' + class-account.picture='user-thumb__picture' + class-name='user-thumb__name' + class-username='user-thumb__username' - widget-account.picture='hubl-user-avatar' - ) + widget-account.picture='hubl-user-avatar' + ) - sib-widget(name='hubl-project-admins') - template - sib-display( - data-src='${value}' - fields='user' - search-fields='is_admin' - search-value-is_admin='true' - search-widget-is_admin='sib-form-hidden' - widget-user='hubl-project-captain' - ) + sib-widget(name='hubl-project-admins') + template + sib-display.user-thumb.is-spaced( + data-src='${value}' + fields='user' + search-fields='is_admin' + search-value-is_admin='true' + search-widget-is_admin='sib-form-hidden' + widget-user='hubl-project-captain' + ) - sib-widget(name='hubl-admin-project-leave-button') - template - sib-delete( - class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' - data-src="${src}" - data-label='Quitter' - ) + sib-widget(name='hubl-admin-project-leave-button') + template + sib-delete( + class='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="projects" - fields='project.name, project.members, project.captain, leaveButton' + bind-user + nested-field="projects" + fields='project.name, project.members, project.captain, leaveButton' - class-project.name='w25 cell border cell-with-name' - class-project.members='w25 cell border' - class-project.captain='w25 cell border cell-with-id-card' - class-leaveButton='w25 cell border cell-with-buttons' + class-project.name='w280 cell border cell-with-name' + class-project.members='w280 cell border' + class-project.captain='w280 cell border cell-with-id-card' + class-leaveButton='w230 cell border cell-with-buttons' - action-leaveButton="joinButton" - widget-leaveButton="hubl-admin-project-leave-button" + action-leaveButton="joinButton" + widget-leaveButton="hubl-admin-project-leave-button" - widget-project.captain='hubl-project-captain' - widget-project.members='hubl-project-admins' + widget-project.captain='hubl-project-captain' + widget-project.members='hubl-project-admins' - order-by="project.name" - ) + order-by="project.name" + ) - sib-widget(name='hubl-admin-project-join-button') - template - sib-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex( - data-src='${src}' - nested-field="members" + sib-widget(name='hubl-admin-project-join-button') + template + sib-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex( + data-src='${src}' + nested-field="members" - 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.projects || endpoints.get.projects}joinable/` - fields='name, members, captain, joinButton' + data-src=`${endpoints.projects || endpoints.get.projects}joinable/` + fields='name, members, captain, joinButton' - class-name='w25 cell border cell-with-name' - class-members='w25 cell border' - class-captain='w25 cell border cell-with-id-card' - class-joinButton='w25 cell border cell-with-buttons' + class-name='w280 cell border cell-with-name' + class-members='w280 cell border' + class-captain='w280 cell border cell-with-id-card' + class-joinButton='w230 cell border cell-with-buttons' - action-joinButton="joinButton" # Workaround: I need members two times - widget-joinButton="hubl-admin-project-join-button" + action-joinButton="joinButton" # Workaround: I need members two times + widget-joinButton="hubl-admin-project-join-button" - widget-captain='hubl-project-captain' - widget-members='hubl-project-admins' + widget-captain='hubl-project-captain' + widget-members='hubl-project-admins' - order-by="name" - ) + order-by="name" + ) #admin-project-create(hidden) include page-admin-projects-create.pug \ No newline at end of file diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index 89e2b8f..82af171 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -8,7 +8,7 @@ div.content-box__info sib-widget(name='hubl-team-template-edit') template sib-display.user-thumb.is-spaced( - class='w355 cell border cell-with-id-card user-thumb' + class='w280 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='W152 cell border' + class='w162 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='W152 cell border' + class='w162 cell border' no-permission="acl:Delete" data-src="${value['@id']}" ) @@ -72,7 +72,7 @@ div.content-box__info next='circle-information' ) - h2 Liste des membres: + h2 Liste des membres : sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') sib-form.block.select-add( @@ -91,8 +91,8 @@ div.content-box__info .table-wrapper .table div.table-header.grey-color - div.w355 Nom - div.W152 Accès + div.w280 Nom + div.w162 Accès //-class='table-body' sib-display( diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug index 7f96881..a424df2 100644 --- a/src/views/circle/page-circle-profile.pug +++ b/src/views/circle/page-circle-profile.pug @@ -4,7 +4,8 @@ sib-router(default-route='circle-profile', hidden) #circle-profile(hidden) include ../../templates/hubl-circle-team.pug - .content-box__info + + .content-box__info.flex .flex.space-between.with-padding.mobile-vertical-align sib-display.mobile-margin__bottom( diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index 83bec42..b160bc1 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -9,20 +9,20 @@ div.content-box__info sib-form.form.button-register( bind-resources - fields='status, block-project__info(customer.name, name), description' + fields='status, line-1(customer.name, name), description' label-status='Statut du canal*' widget-status='hubl-status' class-status='form-label is-light is-full-width member-select color' label-name='Nom du projet*' - class-name='form-label is-light is-half-width' + class-name='form-label is-light is-half-width input-text-like' label-customer.name='Nom du client*' - class-customer.name='form-label is-light is-half-width' + class-customer.name='form-label is-light is-half-width input-text-like' label-description='Description du projet' - class-description='form-label is-light is-full-width' + class-description='form-label is-light is-full-width input-text-like' widget-description='sib-form-textarea' partial="" @@ -43,7 +43,7 @@ div.content-box__info h2 Liste des membres : - sib-form.block.select-add.button-add( + sib-form.block.select-add( bind-resources nested-field='members' fields='user' @@ -56,18 +56,18 @@ div.content-box__info submit-button='Ajouter un membre' ) - .table + .table-wrapper + .table + div.table-header.grey-color + div.w280 Nom + div.w162 Accès - div.table-header.grey-color - div.w66 Nom - div.w33 Accès + //-class='table-body' + sib-display( + class='table-body' + bind-resources + fields='members' - //-class='table-body' - sib-display( - class='table-body' - bind-resources - fields='members' - - multiple-members='' - widget-members='hubl-team-template-edit' - ) + multiple-members='' + widget-members='hubl-team-template-edit' + ) diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug index c734a18..e4260c6 100644 --- a/src/views/project/page-project-profile.pug +++ b/src/views/project/page-project-profile.pug @@ -21,10 +21,10 @@ sib-router(default-route='project-profile', hidden) widget-creationDate='sib-display-date' ) sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') - sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre + sib-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre sib-display( - class='position-end' + class='flex desktop-button__end' bind-resources nested-field='members' fields='relation' @@ -39,7 +39,7 @@ sib-router(default-route='project-profile', hidden) hubl-inherit-user-id="search-value-user" ) - .space-between + .flex.space-between sib-display( bind-resources fields='label-captain, captain' @@ -58,12 +58,12 @@ sib-router(default-route='project-profile', hidden) h2 Equipe : - sib-display( + sib-display.block( bind-resources fields='members' - widget-members='hubl-project-team' multiple-members + widget-members='hubl-project-team' )