From c09cc4e52572ac55a682e149ec647da19cb4caf7 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 11 Jun 2020 15:20:20 +0200 Subject: [PATCH] bugfix: multiple fixes --- src/dependencies.pug | 4 +- src/header.pug | 4 +- src/index.pug | 2 +- src/page-circle.pug | 2 +- src/page-dashboard.pug | 2 +- src/page-project.pug | 2 +- src/styles/base/form.scss | 55 +++++++------ src/styles/base/header.scss | 16 +++- src/styles/base/main.scss | 82 ++++++++++++++++--- src/styles/base/table.scss | 20 ++--- src/templates/hubl-captain.pug | 3 +- src/templates/hubl-circle-team.pug | 2 +- src/templates/hubl-project-team.pug | 2 +- src/views/admin/page-admin-circles.pug | 2 +- .../admin/page-admin-projects-create.pug | 14 +--- src/views/admin/page-admin-projects.pug | 2 +- src/views/admin/page-admin-users.pug | 4 +- src/views/circle/page-circle-edit.pug | 2 +- src/views/circle/page-circle-profile.pug | 6 +- src/views/project/page-project-edit.pug | 11 +-- src/views/project/page-project-profile.pug | 6 +- 21 files changed, 150 insertions(+), 93 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index d6f87ac..56730ff 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -32,8 +32,8 @@ if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) //- script(type="module" src="/lib/sib-dashboard/sib-dashboard.js" defer) if endpoints.users || (endpoints.get && endpoints.get.users) - script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.6" defer) - //- script(type="module" src="/lib/sib-chat/sib-chat.js" defer) + //-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.6" defer) + script(type="module" src="/lib/sib-chat/sib-chat.js" defer) script(src="/scripts/index.js" defer) diff --git a/src/header.pug b/src/header.pug index 90468ec..106fc37 100644 --- a/src/header.pug +++ b/src/header.pug @@ -1,6 +1,6 @@ .logo - sib-link(next='members') - img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`) + sib-link(next='dashboard') + img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`) sib-notifications.notLoggedIn( nested-field="inbox" diff --git a/src/index.pug b/src/index.pug index 30b6e66..1a139fe 100644 --- a/src/index.pug +++ b/src/index.pug @@ -30,7 +30,7 @@ html(lang="en") include page-dashboard.pug if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) - #members(hidden).no-sidebar + #members(hidden).no-sidebar.with-padding include page-directory.pug if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) diff --git a/src/page-circle.pug b/src/page-circle.pug index dac52a9..6439aac 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -14,7 +14,7 @@ sib-ac-checker(permission='acl:Read', bind-resources) #circle-chat(hidden) include views/circle/page-circle-chat.pug - #circle-information(hidden) + #circle-information.content-box__height(hidden) include views/circle/page-circle-profile.pug nav.jsRightMenu(role='navigation') diff --git a/src/page-dashboard.pug b/src/page-dashboard.pug index 4bce06f..ea3db7d 100644 --- a/src/page-dashboard.pug +++ b/src/page-dashboard.pug @@ -1,5 +1,5 @@ .views-container - h2 Tableau de bord + h1 Tableau de bord sib-dashboard( data-src=`${endpoints.dashboards || endpoints.get.dashboards}` ) diff --git a/src/page-project.pug b/src/page-project.pug index bbb88da..dacf1b1 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -18,7 +18,7 @@ sib-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden) include views/project/page-project-chat.pug - #project-information(hidden) + #project-information.content-box__height(hidden) include views/project/page-project-profile.pug nav.jsRightMenu(role='navigation') diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 135e5ce..7d555fc 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -1,8 +1,14 @@ .form form { - display: flex; - flex-direction: column; - margin-left: -3.4rem; + display: block; + height: fit-content; + margin-bottom: 75px; transition: all .3s ease; + + @include breakpoint(lg) { + display: flex; + flex-direction: column; + transition: all .3s ease; + } } .button-register>form>input[type=submit] { @@ -16,17 +22,6 @@ margin-top: 3.2rem; } -.fieldset { - border-bottom: 1px solid var(--color-fieldset-border); - color: var(--color-title); - display: flex; - flex: 1 0 100%; - font-size: 1.8rem; - font-weight: 600; - margin: 2.6rem 0 1.8rem 3.4rem; - padding-bottom: 0.8rem; -} - .form-label { /*flex: 1 1 auto;*/ @@ -44,16 +39,22 @@ } } +[name^='line-'] { + + @include breakpoint(lg) { + display: flex; + justify-content: space-between; + } +} + .is-full-width { box-sizing: border-box; flex: 1 1 100%; - padding-left: 3.4rem; } .is-half-width { box-sizing: border-box; - flex: 0 0 50%; - padding-left: 3.4rem; + flex: 0 1 calc(50% - 2.5rem); } .input-text-like input:not([type='file']):not([type='search']):not([type='submit']), @@ -155,9 +156,13 @@ hubl-status { /* Additional styles for the select to add a member in circle-edit */ .block.select-add>form { - display: flex; - flex-direction: row; - margin-bottom: 2.6rem; + display: block; + + @include breakpoint(lg) { + display: flex; + flex-direction: row; + margin-bottom: 2.6rem; + } label { margin-top: 0; @@ -169,13 +174,17 @@ hubl-status { input[type='submit'] { @extend .button, - .btn-margin-left, .text-bold, .text-uppercase, .button-complementary, .bordered; - margin-top: auto; - margin-bottom: auto; + margin: 10px 0; + width: 100%; + + @include breakpoint(lg) { + margin: auto 0 auto 2.2rem; + width: auto; + } } } /* End */ diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index b0baab0..dbfda01 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -103,9 +103,19 @@ sib-notifications { } .sib-notifications__list { - position: absolute; - right: 0; - top: 5.6rem; + overflow-x: hidden; + position: fixed; + left: 0; + top: 4.5rem; + width: 100vw; + + @include breakpoint(lg) { + position: absolute; + left: auto; + right: 0; + top: 5.6rem; + width: 300px; + } } } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index ae485da..84acbe4 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -9,6 +9,7 @@ body { background-color: var(--color-main-background); + box-sizing: border-box; color: var(--color-main-text); font-size: 1.6rem; /* Fix for viewport height bug in webkit for mobile */ @@ -21,6 +22,27 @@ } } +/* Fix for sib-dashboard fixture */ +sib-dashboard section { + padding: 1rem !important; + + @include breakpoint(lg) { + padding: 4.2rem !important; + } + + .icon { + display: inline-block; + } +} + +/*@media (max-width: 767.98px) { + + #conversejs .converse-chatboxes .chatbox .box-flyout { + height: 100% !important; + height: 100vh !important; + } +}*/ + .wrapper { display: grid; grid-template-areas: @@ -62,11 +84,11 @@ display: block; bottom: 0; box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); - min-width: 80%; + max-width: 86%; position: fixed; right: 0; top: 0; - z-index: 1; + z-index: 1000; @include breakpoint(lg) { display: none; @@ -349,10 +371,10 @@ h5 { } .content-box__height { - height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */ + min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */ @include breakpoint(lg) { - height: calc(100vh - 83px - 84px); + min-height: calc(100vh - 83px - 84px); } } @@ -389,9 +411,37 @@ h5 { }*/ .admin-header { - align-items: center; - justify-content: space-between; - margin-bottom: 5rem; + /* Quick fix for alignment on mobile before admin content rework */ + flex-direction: column; + align-items: flex-start; + margin-bottom: 20px; + /*end */ + + @include breakpoint(lg) { + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 5rem; + } + + h3 { + /* Quick fix for alignment on mobile before admin content rework */ + margin-bottom: 20px; + /* end */ + + @include breakpoint(lg) { + margin-top: 0; + } + } + + sib-ac-checker, + sib-link { + width: 100%; + + @include breakpoint(lg) { + width: auto; + } + } } .backlink { @@ -433,9 +483,13 @@ h5 { } } -.section { - border-bottom: 1px solid var(--color-grey-10); - padding: 4.5rem; +.mobile-vertical-align { + flex-direction: column; + align-items: center; + + @include breakpoint(lg) { + flex-direction: row; + } } .word-spacing-left { @@ -446,6 +500,14 @@ h5 { margin-right: 0.60rem; } +.mobile-margin__bottom { + margin-bottom: 1rem; + + @include breakpoint(lg) { + margin-bottom: 0; + } +} + // Other base components @import 'form'; @import 'table'; diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index fc9c523..3cee3e7 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -39,6 +39,7 @@ display: contents; &>* { + border-bottom: 1px solid var(--color-table-border); display: table-cell; vertical-align: middle; } @@ -55,6 +56,7 @@ display: table-row; &>* { + border-bottom: 1px solid var(--color-table-border); display: table-cell; text-align: center; vertical-align: middle; @@ -66,7 +68,13 @@ } } -/* Styles of the tables and its elements */ +/* 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); +} .table-header { font-size: 1.6rem; @@ -82,22 +90,12 @@ 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 { .border { - border-bottom: 1px solid var(--color-table-border); border-right: 1px solid var(--color-table-border); } diff --git a/src/templates/hubl-captain.pug b/src/templates/hubl-captain.pug index 9de7da3..116f04e 100644 --- a/src/templates/hubl-captain.pug +++ b/src/templates/hubl-captain.pug @@ -4,11 +4,10 @@ sib-widget(name='hubl-captain') template sib-display.user-thumb( data-src="${await value}" - fields='account.picture, sup(name), sub(profile.city, is_lead)' + fields='account.picture, sup(name), sub(is_lead)' class-account.picture='avatar user-thumb__picture' class-name='user-thumb__name' - class-profile.city='user-thumb__city' class-is_lead='user-thumb__lead' widget-account.picture='hubl-user-avatar' diff --git a/src/templates/hubl-circle-team.pug b/src/templates/hubl-circle-team.pug index 61404d0..e02fd4a 100644 --- a/src/templates/hubl-circle-team.pug +++ b/src/templates/hubl-circle-team.pug @@ -2,7 +2,7 @@ include hubl-user-avatar.pug sib-widget(name='hubl-circle-team-template') template - sib-display.user-thumb( + sib-display.user-thumb.is-spaced( data-src='${await value.user}' fields='account.picture, sup(name, isadmin), sub(profile.city)' value-isadmin='${await value.is_admin}' diff --git a/src/templates/hubl-project-team.pug b/src/templates/hubl-project-team.pug index 4b8f453..f00ddca 100644 --- a/src/templates/hubl-project-team.pug +++ b/src/templates/hubl-project-team.pug @@ -2,7 +2,7 @@ include hubl-user-avatar.pug sib-widget(name='hubl-project-team') template - sib-display.user-thumb( + sib-display.user-thumb.is-spaced( data-src='${await value}' fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)' value-isadmin='${await value.is_admin}' diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index 159310a..47278b6 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -101,5 +101,5 @@ ) - #admin-circle-create(hidden) + #admin-circle-create.content-box__height(hidden) include page-admin-circles-create.pug diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index 2e41b55..e038c7c 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/src/views/admin/page-admin-projects-create.pug @@ -1,7 +1,3 @@ -sib-widget(name='hubl-template-project-title') - template - p ${value} - div.content-box__info.flex sib-link(class="backlink right" next='admin-project-list') Retour @@ -21,15 +17,7 @@ div.content-box__info.flex sib-form.form.button-register( data-src=`${endpoints.projects || endpoints.post.projects}` - fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)' - - class-fieldset-fee='fieldset' - value-fieldset-fee='Contributions' - widget-fieldset-fee='hubl-template-project-title' - - class-fieldset-captain='fieldset' - value-fieldset-captain='Capitaine' - widget-fieldset-captain='hubl-template-project-title' + fields='line-1(customer, name), line-2(project.description), line-3(businessProvider.name, businessProvider.fee), line-4(captain)' label-customer='Nom du client*' class-customer='form-label is-light is-half-width' diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index 68f8360..3323a09 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -94,5 +94,5 @@ widget-members='hubl-project-admins' ) - #admin-project-create(hidden) + #admin-project-create.content-box__height(hidden) include page-admin-projects-create.pug \ No newline at end of file diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index 2d33d81..bae8156 100644 --- a/src/views/admin/page-admin-users.pug +++ b/src/views/admin/page-admin-users.pug @@ -54,8 +54,8 @@ ) - #admin-users-create(hidden) + #admin-users-create.content-box__height(hidden) include page-admin-users-create.pug - #admin-users-edit(hidden) + #admin-users-edit.content-box__height(hidden) include page-admin-users-edit.pug diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index e10a7ee..89e2b8f 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -49,7 +49,7 @@ div.content-box__info sib-form.form.button-register( bind-resources - fields='status, block-circle__info(name, owner), description' + fields='status, line-1(name, owner), description' range-owner=`${endpoints.users || endpoints.get.users}` label-status='Statut du canal' diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug index 3efd574..b7e9ed4 100644 --- a/src/views/circle/page-circle-profile.pug +++ b/src/views/circle/page-circle-profile.pug @@ -6,8 +6,8 @@ sib-router(default-route='circle-profile', hidden) include ../../templates/hubl-circle-team.pug .content-box__info - .flex.space-between.with-padding - sib-display( + .flex.space-between.with-padding.mobile-vertical-align + sib-display.mobile-margin__bottom( bind-resources fields='creationDateSet(title, creationDate)' @@ -80,5 +80,5 @@ sib-router(default-route='circle-profile', hidden) -#circle-edit(hidden) +#circle-edit.content-box__height(hidden) include page-circle-edit.pug diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index 7926097..a9d0411 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -1,10 +1,6 @@ div.content-box__info include ../../templates/hubl-user-avatar.pug - - sib-widget(name='hubl-fieldset-title') - template - label ${label} sib-link(class='backlink right', bind-resources, next='project-profile') Retour @@ -13,27 +9,22 @@ div.content-box__info sib-form.form.button-register( bind-resources - fields='fieldset-info, customer, name, description, fieldset-fee, businessProvider, businessProviderFee' + fields='line-1(customer, name), description, line-2(businessProvider, businessProviderFee)' class-customer='form-label is-light is-half-width' widget-customer='sib-form-auto-completion' class-name='form-label is-light is-half-width input-text-like' class-description='form-label is-light is-full-width input-text-like' - label-fieldset-info='' label-customer='Client*' range-customer=`${endpoints.customers || endpoints.get.customers}` label-name='Nom du projet*' label-description='Description du projet' - widget-fieldset-info='hubl-fieldset-title' widget-description='sib-form-textarea' - class-fieldset-fee='fieldset' class-businessprovider='form-label is-light is-half-width input-text-like' class-businessproviderfee='form-label is-light is-half-width input-text-like' - label-fieldset-fee='Contributions' label-businessprovider='Apporteur d\'affaire' label-businessproviderfee='Montant de la contribution' - widget-fieldset-fee='hubl-fieldset-title' submit-button='Enregistrer' ) diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug index 3f5c74a..4af5645 100644 --- a/src/views/project/page-project-profile.pug +++ b/src/views/project/page-project-profile.pug @@ -9,8 +9,8 @@ sib-router(default-route='project-profile', hidden) .content-box__info.flex - .flex.space-between.with-padding - sib-display( + .flex.space-between.with-padding.mobile-vertical-align + sib-display.mobile-margin__bottom( bind-resources fields='creationDateSet(title, creationDate)' @@ -76,5 +76,5 @@ sib-router(default-route='project-profile', hidden) ) -#project-edit(hidden) +#project-edit.content-box__height(hidden) include page-project-edit.pug