diff --git a/src/index.pug b/src/index.pug index ab13cbd..20a3c0b 100644 --- a/src/index.pug +++ b/src/index.pug @@ -29,8 +29,8 @@ html(lang="en") //- sib-link(class="backlink", next="job-offers") Back //- include page-job-offer-edit.pug - //- #project(hidden).with-sidebar - //- include page-project.pug + #project(hidden).with-sidebar + include page-project.pug #circle(hidden).with-sidebar include page-circle.pug diff --git a/src/menu-left.pug b/src/menu-left.pug index f65ce4b..29b0242 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -19,30 +19,32 @@ nav#main__menu //- sib-route(name='job-offer-create', hidden) //- sib-route(name='job-offer-edit', use-id, hidden) div.divider - //- div.menu-wrapper - //- div.menu - //- div.menu-chevron - //- div.menu-icon.icon-arrow-up - //- div.menu-label Projects - //- div.menu-icon.icon-folder-alt - //- sib-route(name='project', rdf-type='hd:project', use-id='', hidden) - //- div.sub-menu.menu-notification - //- sib-display( - //- data-src=`${endpoints.projects}` - //- fields='project(customer.name, name), badge' - //- class-customer.name='project-customer' - //- class-name='project-name' - //- empty-widget='hd-create' - //- empty-value='project' - //- search-fields='team' - //- search-widget-team='sib-form-hidden' - //- search-value-team='-' - //- hd-inherit-user-id='search-value-team' - //- hd-inherit-widgets - //- widget-badge='hd-counter' - //- action-badge='badge' - //- ) - //- div.divider + div.menu-wrapper + div.menu + div.menu-chevron + div.menu-icon.icon-arrow-up + div.menu-label Projects + div.menu-icon.icon-folder-alt + sib-route(name='project', rdf-type='hd:project', use-id='', hidden) + div.sub-menu.menu-notification + sib-display( + data-src=`${endpoints.projects}` + fields='project(customer.name, name), badge' + class-customer.name='project-customer' + class-name='project-name' + empty-widget='hd-create' + empty-value='project' + search-fields='team' + search-widget-team='sib-form-hidden' + search-value-team='-' + hd-inherit-user-id='search-value-team' + hd-inherit-widgets + widget-badge='hd-counter' + action-badge='badge' + order-by='customer.name' + next='project' + ) + div.divider div.menu-wrapper div.menu div.menu-chevron diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 163daa7..7d93724 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -15,11 +15,11 @@ sib-router(default-route='circle-profile', hidden) widget-creationDate='sib-display-date' ) - sib-ac-checker.testblock.circle-edit-button(permission='acl:Append', bind-resources, nested-field='members') + sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='circle-edit' bind-resources) Edit and add Members - h2(name="label-team") Members: + h2 Members: sib-display.block( bind-resources diff --git a/src/page-circle.pug b/src/page-circle.pug index 0c23098..36a443b 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,13 +1,13 @@ .views-container .content-box.full-width.with-form - div.content-box__header.with-description + div.content-box__header sib-ac-checker(permission='acl:Read', bind-resources) sib-display( bind-resources fields='name, description' - class-name='name' - class-description='description' + class-name='h1-like' + class-description='h1-aside description' ) div.content-box__info sib-ac-checker(permission='acl:Read', bind-resources) diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index 60d0aac..19a0dc1 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -1,90 +1,89 @@ -sib-widget(name='hd-fieldset-title') - template - label ${label} +div.content-box__info -sib-widget(name='hd-project-members') - template - sib-display.member-info( - data-src='${id}' - fields='user.account.picture, user.name, name' - widget-user.account.picture='sib-display-img' - ) + include templates/hd-user-avatar.pug -sib-widget(name='hd-member-form') - template - sib-form.member-add( - bind-resources - range-user=`${endpoints.users}` - nested-field='members' - fields='member-form__input(user, name)' - - class-user='member-select form-label is-light is-half-width' - label-user='Member' - widget-user='sib-form-auto-completion' + sib-widget(name='hd-fieldset-title') + template + label ${label} - class-name='form-label is-light is-half-width' - label-name='Role' - - submit-button='Add' - ) + sib-link(class='backlink', bind-resources, next='project-profile') Back + h1 Edit your project -.content-box.with-padding.with-form.full-width + sib-form.form-container.block( + bind-resources + + fields='fieldset-info, block-project__info(customer.name, name, customer.logo, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee), fieldset-customer, block-project__customer(customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone)' - h1 Edit your project + class-customer.name='form-label is-light is-half-width' + class-name='form-label is-light is-half-width' + class-customer.logo='form-label is-light is-full-width' + class-description='form-label is-light is-full-width' + label-fieldset-info='' + label-customer.name='Customer\'s name' + label-name='Project\'s name*' + label-customer.logo='Customer\'s logo' + label-description='Project description' + upload-url-customer.logo='' + widget-fieldset-info='hd-fieldset-title' + widget-description='sib-form-textarea' + class-fieldset-fee='fieldset' + class-businessprovider='form-label is-light is-half-width' + class-businessproviderfee='form-label is-light is-half-width' + label-fieldset-fee='Fee' + label-businessprovider='Business provider' + label-businessproviderfee='Amount of the contribution' + widget-fieldset-fee='hd-fieldset-title' - sib-form.form-container.block( - bind-resources - - fields='fieldset-info, block-project__info(customer.name, name, customer.logo, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee), fieldset-customer, block-project__customer(customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone), fieldset-members, block-project__members(member-form, members)' + class-fieldset-customer='fieldset' + class-customer.companyregister='form-label is-light is-half-width' + class-customer.address='form-label is-light is-half-width' + class-customer.firstname='form-label is-light is-half-width' + class-customer.lastname='form-label is-light is-half-width' + class-customer.role='form-label is-light is-half-width' + class-customer.email='form-label is-light is-half-width' + class-customer.phone='form-label is-light is-half-width' + label-fieldset-customer='Customer\'s information' + label-customer.companyregister='Company register*' + label-customer.address='Address' + label-customer.firstname='Name of the contact at the customer\'s premises' + label-customer.lastname='Firstname of the contact at the customer\'s premises' + label-customer.role='Role within the company' + label-customer.email='Email' + label-customer.phone='Phone' + widget-fieldset-customer='hd-fieldset-title' - class-customer.name='form-label is-light is-half-width' - class-name='form-label is-light is-half-width' - class-customer.logo='form-label is-light is-full-width' - class-description='form-label is-light is-full-width' - label-fieldset-info='' - label-customer.name='Customer\'s name' - label-name='Project\'s name*' - label-customer.logo='Customer\'s logo' - label-description='Project description' - upload-url-customer.logo='' - widget-fieldset-info='hd-fieldset-title' - widget-description='sib-form-textarea' - - class-fieldset-fee='fieldset' - class-businessprovider='form-label is-light is-half-width' - class-businessproviderfee='form-label is-light is-half-width' - label-fieldset-fee='Fee' - label-businessprovider='Business provider' - label-businessproviderfee='Amount of the contribution' - widget-fieldset-fee='hd-fieldset-title' - - class-fieldset-customer='fieldset' - class-customer.companyregister='form-label is-light is-half-width' - class-customer.address='form-label is-light is-half-width' - class-customer.firstname='form-label is-light is-half-width' - class-customer.lastname='form-label is-light is-half-width' - class-customer.role='form-label is-light is-half-width' - class-customer.email='form-label is-light is-half-width' - class-customer.phone='form-label is-light is-half-width' - label-fieldset-customer='Customer\'s information' - label-customer.companyregister='Company register*' - label-customer.address='Address' - label-customer.firstname='Name of the contact at the customer\'s premises' - label-customer.lastname='Firstname of the contact at the customer\'s premises' - label-customer.role='Role within the company' - label-customer.email='Email' - label-customer.phone='Phone' - widget-fieldset-customer='hd-fieldset-title' - - class-fieldset-members='fieldset' - label-fieldset-members='Team' - label-members='' - multiple-members='' - widget-members='hd-project-members' - widget-fieldset-members='hd-fieldset-title' - widget-member-form='hd-member-form' - - submit-button='Submit' + submit-button='Save' + ) + + h2 Members List + + sib-form.block.team-form( + bind-resources + nested-field='members' + fields='user' + range-user=`${endpoints.users}` + + class-user='team form-label is-dark' + label-user='' + widget-user='sib-form-auto-completion' + + submit-button='Add a member' + ) + + .table + + div.table-header.grey-color + div Name + div Access + + //-class='table-body' + sib-display( + class='table-body' + bind-resources + fields='members' + + multiple-members='' + widget-members='team-template-edit' ) diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index 0510d97..b62a5f3 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -1,32 +1,99 @@ -.content-box.with-padding.full-width +sib-router(default-route='project-profile', hidden) + sib-route(name='project-profile') + sib-route(name='project-edit') - include templates/template-business-provider.pug - include templates/template-customer.pug - include templates/template-team.pug - include templates/template-captain.pug +#project-profile(hidden) + include templates/hd-business-provider.pug + include templates/hd-captain.pug + include templates/hd-circle-team.pug + include templates/hd-customer.pug + + .content-box__info + + .space-between + sib-display( + bind-resources + fields='creationDateSet(title, creationDate)' + + value-title='Creation date: ' + + 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-blue bordered with-icon icon-pencil' next='project-edit' bind-resources) Edit and add Members - sib-display( - fields='block-title(const-title1, number, customer.name, const-title2, name, entitled, creationDate), infos(block-description(label-description, description), block-logo(customer.logo)), block-lead, block-fee(label-fee, businessProvider), block-customer(label-customer, customer), block-captain(label-captain, captain), block-team(label-team, members)', - value-const-title1='N°', - value-const-title2='-', - value-entitled='Creation date: ' + .space-between + sib-display( + bind-resources + fields='label-captain, captain' - value-label-description='DESCRIPTION:', - widget-customer.logo='sib-display-img', + value-label-captain='Captain:' + class-label-captain='h2-like' + widget-captain='hd-captain' + ) + sib-display( + class='customer-logo' + bind-resources + fields='customer.logo' + + widget-customer.logo='sib-display-img' + ) - value-label-fee='FEE:', - widget-businessProvider='template-business-provider' + h2 Contributions: + sib-link(next='project-contributions-help').button-question__position + button(aria-label='modal activator').icon-question.button-question__color - value-label-customer='CUSTOMER INFORMATIONS:', - widget-customer='customer-template', + sib-display( + bind-resources + fields='businessProvider', + widget-businessProvider='hd-business-provider' + ) - value-label-captain='CAPTAIN:', - widget-captain='captain-template', + h2 Customer informations: - value-label-team='TEAM:', - widget-members='project-team-template', - multiple-members, + sib-display.block( + bind-resources + fields='customer' - bind-resources - ) + widget-customer='hd-customer' + ) + + h2 Team: + + sib-display( + bind-resources + fields='team' + + widget-team='circle-team-template' + multiple-team + ) + + sib-widget(name='project-leave-button') + template + sib-delete( + class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' + data-src="${src}" + data-label='Leave Group' + ) + + sib-display( + class='position-end' + bind-resources + nested-field='members' + fields='relation' + + action-relation='relation' + widget-relation='project-leave-button' + + search-fields='user' + search-widget-user='sib-form-hidden' + search-value-user="" + + hd-inherit-user-id="search-value-user" + hd-inherit-widgets + ) + + +#project-edit(hidden) + include page-project-edit.pug diff --git a/src/page-project.pug b/src/page-project.pug index 6f1f7f1..8f940bf 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -1,31 +1,44 @@ .views-container - #project-chat - include page-project-chat.pug - #project-profile - include page-project-profile.pug - #project-edit - include page-project-edit.pug - #project-create - include page-project-create.pug - #project-drive - include page-project-drive.pug + .content-box.full-width.with-form + div.content-box__header + sib-ac-checker(permission='acl:Read', bind-resources) + sib-display( + bind-resources + fields='const-title1, number, customer.name, name' + + class-const-title1='h1-like' + class-number='h1-like' + class-customer.name='h1-like' + class-name='h1-aside name' + + value-const-title1='N°' + ) + div.content-box__info + sib-ac-checker(permission='acl:Read', bind-resources) + #project-chat(hidden) + include page-project-chat.pug + #project-information(hidden) + include page-project-profile.pug + #project-drive(hidden) + include page-project-drive.pug + +dialog(id='project-contributions-help').modal + sib-link(next='project-profile') + button.icon-close + img(src='/images/contributions-help.png') + nav.jsRightMenu(role='navigation') sib-router(default-route='project-chat') ul li.jsOffsiteToggle a Fold menu - sib-route(name='project-chat', use-id) + sib-route(name='project-chat') li a Chat - sib-route(name='project-profile', use-id) + sib-route(name='project-information') li a Information sib-route(name='project-drive', use-id) li a Drive - sib-route(name='project-edit', use-id) - li - a Edit - sib-route(name='project-create', use-id) - //- li - //- a Add new \ No newline at end of file + sib-route(name='project-contributions-help') diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index dbaeeff..8ef5984 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -381,74 +381,5 @@ } } } - - [widget='hd-project-members'] { - display: flex; - flex-wrap: wrap; - width: 100%; - - &>label { - display: none; - } - - &>div { - align-items: center; - border: 1px solid $color-43-100-50; - border-radius: 3px; - display: flex; - margin: 0 1.5rem 1.5rem 0; - padding: 2.2rem; - - .member-info>div { - display: grid; - grid-template-areas: "avatar name" - "avatar role"; - grid-column-gap: 15px; - margin-right: 15px; - } - - &>button { - cursor: pointer; - background-color: transparent; - border: 1px solid $color-43-100-50; - border-radius: 50%; - color: $color-43-100-50; - height: 22px; - width: 22px; - } - } - - &>button { - display: none; - } - - sib-display-img { - grid-area: avatar; - align-items: center; - background-color: #e3e8ed; - border-radius: 50%; - display: flex; - height: 45px; - justify-content: center; - overflow: hidden; - width: 45px; - - img { - height: 100%; - object-fit: cover; - object-position: center; - width: 100%; - } - } - - sib-display-value:first-of-type { - font-weight: 600; - grid-area: name; - } - - sib-display-value:last-of-type { - grid-area: role; - } - } } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 1a23477..eba18be 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -19,37 +19,41 @@ $breakpoints: (phone: 480px, body { background-color: $color-210-25-95; color: $color-213-4-50; - display: flex; - flex-direction: column; font-size: 1.6rem; - height: 100vh; - overflow: hidden; + min-height: 100vh; overflow-wrap: break-word; } main { display: flex; flex-direction: row; - height: 100%; max-width: 100%; - overflow: hidden; } } + + +/* Quick fix. Will be removed later */ +#admin-circles { + display: contents; +} + + + img { max-height: 100%; max-width: 100%; } h1, +.h1-like, h2, +.h2-like, h3, h4, h5, h6 { - color: $color-216-4-22; - font-weight: 600; - padding: 0; + font-weight: bold; /*span { font-weight: 400; @@ -61,15 +65,26 @@ h6 { }*/ } -h1 { - font-size: 2rem; +.h2-like { + display: block; + margin: 14.94px 0; + width: 100%; } -h2 { +h1, .h1-like { + color: $color-233-18-29; font-size: 2rem; + text-transform: uppercase; +} + +h2, .h2-like { + color: $color-216-4-22; + font-size: 1.8rem; + text-transform: uppercase; } h3 { + color: $color-216-4-22; font-size: 1.7rem; } @@ -101,7 +116,7 @@ h5 { flex: 1; font-size: 1.6rem; margin: 0 auto; - min-height: calc(100vh - 84px); + min-height: 100%; } &.with-padding { @@ -110,21 +125,54 @@ h5 { } .content-box__header { - padding: 1.9rem 3rem; + border-bottom: 1px solid $color-221-51-90; + padding: 3rem; div { - color: $color-233-18-29; - display: flex; - font-size: 2rem; - &>* { - align-self: center; + .h1-aside { + font-size: 1.8rem; + + &:not(:empty)::before { + color: $color-233-18-29; + content: '- '; + font-size: 2rem; + font-weight: bold; + margin-left: 0.60rem; + } + } + + .description { + color: $color-215-6-63; + } .name { - font-size: 2rem; - font-weight: bold; - margin: 1.1rem 0; + color: $color-233-18-29; + font-weight: normal; + } + } +} + +.modal { + color: white; + margin: 75px; + padding: 40px; + max-height: 85vh; + text-align: center; + + img { + max-width: 75%; + } + + sib-link { + font-size: 2.7rem; + position: absolute; + right: 32px; + top: 32px; + + button { + color: $color-233-18-29; } } } @@ -134,30 +182,6 @@ h5 { border: 0; } -.content-box__header.with-description { - border-bottom: 1px solid $color-221-51-90; - - div { - - .name { - text-transform: uppercase; - } - - .description { - color: $color-215-6-63; - font-size: 1.8rem; - - &:not(:empty)::before { - color: $color-216-4-22; - content: '- '; - font-size: 2rem; - font-weight: bold; - margin-left: 0.60rem; - } - } - } -} - .backlink { @include icon('arrow-left-circle'); color: $color-233-18-29; @@ -191,6 +215,10 @@ h5 { padding-bottom: 1.4rem; } +.position-end { + text-align: end; +} + .section { border-bottom: 1px solid $color-221-51-90; padding: 4.5rem; @@ -202,7 +230,6 @@ h5 { @import 'form'; @import 'header'; @import 'menu-left'; -@import 'user-avatar'; // Button global CSS sib-delete, diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 75585e3..2ab7273 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -3,7 +3,8 @@ color: $color-0-0-100; display: block; max-width: 250px; - overflow: auto; + min-height: calc(100vh - 83px); /* 83px = nav height */ + flex: 1; /*transition: flex-basis 0.5s ease-in-out;*/ &.open { diff --git a/src/styles/base/user-avatar.scss b/src/styles/base/user-avatar.scss deleted file mode 100644 index 0c93093..0000000 --- a/src/styles/base/user-avatar.scss +++ /dev/null @@ -1,29 +0,0 @@ -.project-profile-user-avatar { - align-self: center; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - display: inline; - - * { - height: 100%; - width: 100%; - } - - div { - background-color: $color-0-0-100; - border-radius: 50%; - height: 7vh; - overflow: hidden; - position: relative; - width: 7vh; - - img { - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - } -} \ No newline at end of file diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index bc5d339..e5e0592 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -8,11 +8,10 @@ display: flex; flex-direction: row; align-items: stretch; - overflow-x: hidden; + overflow: hidden; .views-container { flex: 1 0 0; - overflow-y: auto; -webkit-backface-visibility: hidden; &.sidebar-is-closed { @@ -26,6 +25,7 @@ } nav { + background: $color-210-25-95; transition: all 0.5s; >sib-router { diff --git a/src/styles/index.scss b/src/styles/index.scss index 4fdc6a7..3dd012d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -10,8 +10,9 @@ div#viewport { display: flex; - flex-grow: 1; - flex-shrink: 1; + flex: 1; + /*height: auto; + min-height: 100vh;*/ overflow-y: auto; @import 'components/index'; @import 'layout/members/index'; diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index 3502e79..2d483cf 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -3,12 +3,6 @@ #admin-circle-list, #admin-circle-create { - h2 { - font-size: 1.7rem; - font-weight: bold; - text-transform: uppercase; - } - .content-box__info { @extend %padding-block; display: flex; diff --git a/src/styles/layout/project-profile/_index.scss b/src/styles/layout/project-profile/_index.scss index c00467b..0ff827c 100644 --- a/src/styles/layout/project-profile/_index.scss +++ b/src/styles/layout/project-profile/_index.scss @@ -1 +1,2 @@ -@import 'project-profile' \ No newline at end of file +@import 'project'; +@import 'project-profile'; \ No newline at end of file diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index 0770e3a..4ad0b2f 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -1,233 +1,150 @@ #project-profile { - [name^='block-']:not([name='block-title']) { - margin-top: 5.1rem; - - [name^='label-'] { - display: block; - font-weight: bold; - margin: 1.4rem 0; - text-transform: uppercase; - @extend h2; - } - - sib-display-value:not(:first-of-type), - ul, - [name*='job'] { - font-size: 1.5rem; - } + .button-question__position { + position: relative; + bottom: 5px; } - [name='block-title'] { - border-bottom: 1px solid $color-221-51-90; + .button-question__color { + color: $color-216-4-22; + } + + .customer-box { display: flex; - padding-bottom: 3.4rem; - - >* { - color: $color-216-4-22; - font-size: 2rem; - font-weight: bold; - padding-right: 0.85rem; - text-transform: uppercase; - } - - >[name^='const-'] { - padding: 0; - } - - >sib-display-value[name='name'] { - padding-left: 0.85rem; - } - - > :nth-child(5) { - color: $color-233-18-29; - font-weight: normal; - text-transform: none; - } - - [name='entitled'] { - margin-left: auto; - } - - > :nth-last-child(-n+2) { - color: $color-213-4-50; - font-size: 1.6rem; - font-weight: normal; - text-transform: none; - } - } - - [name='infos'] { - display: flex; - justify-content: space-between; - - [name='description'] { - display: flex; - flex-direction: column; - width: 90%; - } - - [name='block-logo'] { - box-sizing: border-box; - display: block; - height: 8.5vh; - position: relative; - text-align: end; - width: 15vw; - } - } - - [name='businessProvider'] { - - ul { - list-style: none; - padding-left: 0; - - li { - - &:first-child { - margin-bottom: 0.5em; - } - - span { - font-weight: bold; - } - } - } - } - - #clientBox { - display: flex; - margin: 1.7rem auto; - max-width: 100%; + margin: 1.6rem 0; >* { border: 1px solid $color-221-51-90; - flex: 1 1 auto; - justify-content: space-between; - margin: 0 -0.1rem -0.1rem 0; - min-width: 25vw; - padding: 0; - - h5 { - margin-left: 2rem; - margin-top: 2rem; - } - - ul { - font-size: 1.5rem; - list-style: none; - margin: -2.04rem 0 3.74rem -2.04rem; - - li { - - span { - font-weight: bold; - } - } - } + flex: 0 1 50%; + padding: 1.7rem 2rem; &:first-child { - li { - span { - margin-right: 0.3em; - } + li:last-child { + margin-top: 3rem; - &:first-child { - margin-bottom: 0.5em; + p { + margin-top: 0.8rem; } + } - &:last-child { - margin-top: 2.4em; - } + span { + margin-right: 0.6rem; } } - &:not(:first-child) { - padding-left: 5.1rem; + &:last-child { + border-left: none; li { - margin-bottom: 1.7rem; - - &:last-child { - margin-top: 2.2rem; - } - - &::before { - color: $color-43-100-50; - font-size: 2.2rem; - padding: 0 1rem 0 0; - } + margin-bottom: 1.5rem; } } } } - [name='block-team'], [name='block-captain'] { - label { - display: none; - } + .customer-logo { + box-sizing: border-box; + display: flex; + height: 8.5vh; + justify-content: flex-end; + margin-top: 20px; + text-align: end; + width: 15vw; + } - sib-display.project-profile-user-avatar { + hd-captain>sib-display>div, + circle-team-template>sib-display>div { /* Maybe move it in main.scss. /!\ some fields are different */ + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + + >[name='account.picture'] { + align-items: center; align-self: center; + background-color: $color-213-20-91; + border-radius: 50%; + display: flex; grid-column: 1 / span 1; grid-row: 1 / span 2; + height: 7vh; + justify-content: center; + overflow: hidden; + position: relative; + width: 7vh; - div { - background-color: $color-0-0-100; - border-radius: 50%; - height: 7vh; - overflow: hidden; - position: relative; - width: 7vh; + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } - img { - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; + object { + height: 45%; + width: 45%; + } + } + + >[name='sup'] { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; + + [name='name'] { + font-weight: 600; + } + + sib-multiple { + display: flex; + margin-left: 1rem; + + [name='groups'] { + @extend %user-role; } } } - project-team-template[name='members'], captain-template[name='captain'] { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; - - > div:nth-child(2) { - align-self: end; + >[name$='profile.city']:not(:empty) { + @include mdi('atom'); + align-items: center; display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - span { - align-self: center; - font-weight: 600; - } - - span ~ sib-display { - - > div { - display: flex; - margin-left: 1rem; - - sib-multiple [name='name'] { - @extend %user-role; - } - } + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; } } + } + } - > span:nth-child(3) { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; + ul { + list-style: none; + padding-left: 0; + + li { + margin-bottom: 0.5em; + + &::before { + color: $color-43-100-50; + font-size: 2.2rem; + margin: 0 1rem 0 0; + } + + span { + font-weight: bold; } } } diff --git a/src/styles/layout/project-profile/project.scss b/src/styles/layout/project-profile/project.scss new file mode 100644 index 0000000..cd3c9d6 --- /dev/null +++ b/src/styles/layout/project-profile/project.scss @@ -0,0 +1,8 @@ +#project-profile { + + .content-box__info { + @extend %padding-block; + display: flex; + flex-direction: column; + } +} \ No newline at end of file diff --git a/src/templates/hd-business-provider.pug b/src/templates/hd-business-provider.pug new file mode 100644 index 0000000..be113ac --- /dev/null +++ b/src/templates/hd-business-provider.pug @@ -0,0 +1,6 @@ +sib-widget(name='hd-business-provider') + template + ul + li #[span Happy Dev Paris:] 5% + li #[span Business provider:] ${await value.name ? await value.name : ""} ${await value.name ? "," : ""} ${await value.fee ? await value.fee:0}% + \ No newline at end of file diff --git a/src/templates/hd-captain.pug b/src/templates/hd-captain.pug new file mode 100644 index 0000000..f16a51a --- /dev/null +++ b/src/templates/hd-captain.pug @@ -0,0 +1,11 @@ +include hd-user-avatar.pug + +sib-widget(name='hd-captain') + template + sib-display( + data-src="${await value}" + fields='account.picture, sup(name), sub(profile.city)' + + widget-account.picture='hd-user-avatar' + ) + diff --git a/src/templates/hd-customer.pug b/src/templates/hd-customer.pug new file mode 100644 index 0000000..32cfc99 --- /dev/null +++ b/src/templates/hd-customer.pug @@ -0,0 +1,19 @@ +sib-widget(name='hd-customer') + template + div.customer-box + div + h3 Client: + ul + li #[span Business name:]${await value.name} + li #[span Company register:]${await value.companyRegister} + li + span Address: + br + p ${await value.address} + div + h3 Contact: + ul + li(class='mdi-account-outline') #[span ${await value.firstName} ${await value.lastName}], ${await value.role} + li(class='mdi-email-outline') + a(href='mailto:${await value.email}') ${await value.email} + li(class='mdi-cellphone-iphone') ${await value.phone} diff --git a/src/templates/template-business-provider.pug b/src/templates/template-business-provider.pug deleted file mode 100644 index 5e49550..0000000 --- a/src/templates/template-business-provider.pug +++ /dev/null @@ -1,6 +0,0 @@ -sib-widget(name='template-business-provider') - template - ul - li #[span Happy Dev Paris:] 5% - li #[span Business provider:] ${value.name}, ${value.fee ? value.fee:0}% - \ No newline at end of file diff --git a/src/templates/template-captain.pug b/src/templates/template-captain.pug deleted file mode 100644 index d1bec42..0000000 --- a/src/templates/template-captain.pug +++ /dev/null @@ -1,23 +0,0 @@ -include hd-user-avatar.pug - -sib-widget(name='captain-template') - template - sib-display.project-profile-user-avatar( - data-src="${value ? value['@id'] : ''}" - fields='account.picture', - widget-account.picture='hd-user-avatar' - ) - div(name='user.thumb') - sib-display( - data-src="${value ? value['@id'] : ''}" - fields='name' - ) - sib-display( - data-src="${value ? value['@id'] : ''}", - fields='name' - nested-field="groups" - ) - sib-display( - data-src="${value ? value['@id'] : ''}" - fields='username' - ) diff --git a/src/templates/template-customer.pug b/src/templates/template-customer.pug deleted file mode 100644 index a5abb0b..0000000 --- a/src/templates/template-customer.pug +++ /dev/null @@ -1,20 +0,0 @@ -sib-widget(name='customer-template') - template - div#clientBox - div - h5 Client: - ul - li #[span Business name:]${value.name} - li #[span Company register:]${value.companyRegister} - li - span Address: - br - p ${value.address} - div - h5 Contact: - ul - li(class='mdi-account-outline') #[span ${value.firstName} ${value.lastName}], ${value.role} - li(class='mdi-email-outline') - a(href='mailto:${value.email}') ${value.email} - li(class='mdi-cellphone-iphone') ${value.phone} - diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug index eeecc90..2ffd17f 100644 --- a/src/templates/template-team.pug +++ b/src/templates/template-team.pug @@ -2,23 +2,24 @@ include hd-user-avatar.pug sib-widget(name='project-team-template') template - sib-display.project-profile-user-avatar( - data-src="${value.user ? value.user['@id'] : ''}" - fields='account.picture', - widget-account.picture='hd-user-avatar' - ) - div(name='user.thumb') - sib-display( - data-src="${value.user ? value.user['@id'] : ''}" - fields='name' - ) - sib-display( - data-src="${value.user ? value.user['@id'] : ''}", - fields='name' - nested-field="groups" - ) sib-display( - data-src="${value.user ? value.user['@id'] : ''}" - fields='username' + data-src='${await value}' + fields='account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)' + + class-user.name='user-name' + class-is_admin='tag-admin' + class-user.groups='tag-group' + class-user.profile.city='city' + + widget-account.picture='hd-user-avatar' + widget-is_admin='hd-user-admin' + widget-user.groups='hd-user-groups' + + multiple-user.groups='' ) +sib-widget(name='hd-user-admin') + template ${await value ? "Administrator" : ""} + +sib-widget(name='hd-user-groups') + template ${await value.name} diff --git a/www/images/contributions-help.png b/www/images/contributions-help.png new file mode 100644 index 0000000..4a3597b Binary files /dev/null and b/www/images/contributions-help.png differ