diff --git a/src/dependencies.pug b/src/dependencies.pug
index 69db538..68fc0ae 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -33,9 +33,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- cdn
-//- don't forget to change version in hd-widgets.js
script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
-script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
+script(type="module" src="https://unpkg.com/@startinblox/router@latest")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
-script(type="module" src="/scripts/hd-widgets.js")
diff --git a/src/header.pug b/src/header.pug
index 6551d37..7379730 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -18,5 +18,5 @@ sib-display#profile(
data-fields='first_name, account.picture',
widget-account.picture='sib-display-img',
bind-user
- )
+)
diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug
index 186fa7f..14f9388 100644
--- a/src/page-job-offer-create.pug
+++ b/src/page-job-offer-create.pug
@@ -1,4 +1,13 @@
.frame-form
+
+ sib-widget(name='title-text')
+ template
+ p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".
+
+ sib-widget(name='description-text')
+ template
+ p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
+
sib-link(next='job-offers' class='back') Back
h1 Post a new job offer
p.form-goal This form allows you to share an offer to all members of the network.
@@ -11,16 +20,11 @@
data-fields='title, title-text, description, description-text, skills',
label-title='Title*',
-
- value-title-text='Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".',
- widget-title-text='hdapp-form-text',
-
label-description='Description*',
-
- value-description-text='Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...',
- widget-description-text='hdapp-form-text',
-
label-skills='The required skills for this mission:*',
+
+ widget-title-text='title-text',
+ widget-description-text='description-text',
widget-skills='sib-form-auto-completion',
next="job-offers"
diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index dd19bcb..49b7df9 100644
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@@ -1,26 +1,25 @@
div.grid-layer
+
+ include templates/template-groups.pug
+ include templates/template-skills.pug
+
div.grid-layer-main.containerV
h2 New offers
span Here you can find and post offers
sib-display#offers-list(
data-src=`${sdn}/job-offers/`,
- data-fields='status, user-thumb, creation, title, description, skills, send',
-
- set-status='closingDate',
- widget-closingDate='hdapp-closing-date',
+ data-fields='user-thumb, creationDate, title, description, skills, send',
set-user-thumb='author.account.picture, author.first_name, author.groups',
widget-author.account.picture='sib-display-img',
- widget-author.groups='sib-display-lookuplist',
-
- set-creation='creationDate',
+ widget-author.groups='groups-name',
+ multiple-author.groups,
- widget-skills='sib-display-lookuplist',
+ widget-skills='skills-name',
+ multiple-skills,
- set-send='before-send-link, send-link',
- value-before-send-link='',
- value-send-link='Send a private message',
- template-send-link='chat-link'
+ action-send='member-chat',
+ label-send='Send a private message',
search-range-skills=`${sdn}/skills/`,
search-fields='content, skills, open',
diff --git a/src/page-member-profile.pug b/src/page-member-profile.pug
index a701aff..3bd20f3 100644
--- a/src/page-member-profile.pug
+++ b/src/page-member-profile.pug
@@ -1,10 +1,8 @@
sib-link(next="members" class="backlink") Back to directory
-template#chat-link
- sib-link(next="member-chat") ${value}
-
-template#member-status
- div#member-status ${value == true ? 'Available' : 'Busy'}
+include templates/template-groups.pug
+include templates/template-skills.pug
+include templates/template-status.pug
div#member-profile
sib-display(
@@ -13,18 +11,22 @@ div#member-profile
set-member-profile__bio ='user.profile.available, member-img, member-profile, user.username, bio, infos, send',
set-member-profile__skills='user.skills',
set-member-profile__xp='',
+
set-member-img='user.account.picture',
- set-member-profile='user.first_name, user.last_name, user.groups',
+ set-member-profile='user.name, user.groups',
set-infos='city, user.groups, user.email, phone, foaf:homepage',
- template-user.profile.available='member-status',
- template-send='chat-link',
-
- value-send='SEND A MESSAGE',
+ label-send='SEND A MESSAGE',
+ action-send='member-chat',
widget-user.account.picture='sib-display-img',
- widget-user.groups='sib-display-lookuplist',
- widget-user.skills='sib-display-lookuplist',
+ widget-user.groups='groups-name',
+ widget-user.skills='skills-name',
+ widget-user.profile.available='status-template',
+
+ multiple-user.groups,
+ multiple-user.skills,
bind-resources
)
+
diff --git a/src/page-member.pug b/src/page-member.pug
deleted file mode 100644
index ee5f063..0000000
--- a/src/page-member.pug
+++ /dev/null
@@ -1,5 +0,0 @@
-//-
- #container-member
- sib-link(next="members" class="back") Back to directory
- div#member-profile
- include page-member-profile.pug
diff --git a/src/page-members.pug b/src/page-members.pug
index ae9acb2..b5f5d40 100644
--- a/src/page-members.pug
+++ b/src/page-members.pug
@@ -1,40 +1,44 @@
div.grid-layer
- template#chat-link
- sib-link(next="member-chat") ${value}
+
+ include templates/template-groups.pug
+ include templates/template-skills.pug
+
div.grid-layer-main.containerV
h1 Members
sib-display#profiles-list(
data-src=`${sdn}/members/`,
- counter-template='${counter} members',
- data-fields='header, infos',
- paginate-by='3',
-
- set-header='user.account.picture, user.first_name, user.last_name, pseudonym, bio, send',
- widget-user.account.picture='sib-display-img',
- set-pseudonym='before-pseudo,user.username',
- value-before-pseudo='@',
- value-send='SEND A MESSAGE',
- template-send='chat-link',
-
- set-infos='city, user.groups, user.email, phone, user.skills',
- widget-user.groups='sib-display-lookuplist',
- widget-user.skills='sib-display-lookuplist',
-
search-range-groups=`${sdn}/groups/`,
search-range-skills=`${sdn}/skills/`,
+
search-fields='name, groups, skills',
-
set-name='pseudo, user.first_name, user.last_name',
-
- search-label-groups='Filter by role',
search-label-name='Search by lastname, firstname...',
+ search-label-groups='Filter by role',
search-label-skills='Search by skills',
-
- search-widget-groups='sib-form-placeholder-dropdown',
search-widget-name='sib-form-placeholder-text',
- search-widget-skills='sib-form-placeholder-dropdown',
+ search-widget-groups='sib-form-placeholder-dropdown',
+ search-widget-skills='sib-form-placeholder-text',
+
+ counter-template='${counter} members',
+
+ data-fields='header, infos',
+ set-header='user.account.picture, user.name, pseudonym, bio, send',
+ set-infos='city, user.groups, user.email, phone, user.skills',
+ set-pseudonym='before-pseudo,user.username',
+ value-before-pseudo='@',
+ label-send='SEND A MESSAGE',
+ action-send='member-chat',
+ widget-user.account.picture='sib-display-img',
+ widget-user.groups='groups-name',
+ widget-user.skills='skills-name',
+ multiple-user.groups,
+ multiple-user.skills,
+
+ paginate-by='3',
+
+ next='member'
+ )
- next='member')
div.grid-layer-links.containerV
div.containerH.containerCenter.how-link
div.containerV.fix.icon-idea
@@ -44,3 +48,4 @@ div.grid-layer
div.containerV.fix.icon-idea
div.containerV.grow
sib-trigger() How to complete my profile ?
+
diff --git a/src/page-project-create.pug b/src/page-project-create.pug
index 2aeb473..ed036f3 100644
--- a/src/page-project-create.pug
+++ b/src/page-project-create.pug
@@ -8,7 +8,7 @@
range-members=`${sdn}/members/`,
range-team=`${sdn}/users/`,
- data-fields=`customer.name, name, description, customer.logo, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
+ data-fields=`customer.name, name, customer.logo, description, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
set-block-team=`team, members`,
set-block-fee=`businessProvider, businessProviderFee`,
@@ -32,5 +32,7 @@
widget-jabberRoom='sib-form-checkbox',
widget-description='sib-form-textarea',
widget-team='sib-form-multiple-dropdown',
- widget-members='sib-form-multiple-dropdown'
+ widget-members='sib-form-multiple-dropdown',
+ bind-resources
)
+
\ No newline at end of file
diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index a8b9c97..1cc7ce0 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -4,33 +4,6 @@
.form-view
sib-form.block(
range-team=`${sdn}/users/`,
- range-members=`${sdn}/project-members/`,
-
- data-fields=`customer.name, name, description, customer.logo, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
- set-block-team=`team, members`,
- set-block-fee=`businessProvider, businessProviderFee`,
-
- label-customer.name='Business name',
- label-name='Project name',
- label-description='Project description',
- label-customer.logo='Customer logo',
- label-customer.companyRegister='Company register',
- label-customer.address='Customer address',
- label-customer.firstName='Contact firstname',
- label-customer.lastName='Contact lastname',
- label-customer.role='Contact role',
- label-customer.email='Contact email',
- label-customer.phone='Contact phone',
- label-businessProvider='Business provider',
- label-businessProviderFee='Fee (%)',
- label-foaf:jabberID='Chatroom id',
- label-team='Teammates',
- label-members='Member role'
-
- widget-jabberRoom='sib-form-checkbox',
- widget-description='sib-form-textarea',
- widget-team='sib-form-multiple-dropdown',
- widget-members='sib-form-multiple-dropdown',
bind-resources
)
diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug
index 61c3c90..7815d34 100644
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@@ -1,30 +1,16 @@
.frame
- template#customer-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(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
- li(name='email')
- a(href='mailto:${value.email}') ${value.email}
- li(name='phone') ${value.phone}
+
+ include templates/template-customer.pug
+ include templates/template-team.pug
sib-display(
- data-fields='block-title, infos, block-lead, block-fee, block-customer',
+ data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
+ extra-context='{"project-profile":"${sdn}/projects/"}'
set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
- value-const-title1="N°",
- value-const-title2="-",
- value-entitled="Creation date:"
+ value-const-title1='N°',
+ value-const-title2='-',
+ value-entitled='Creation date:'
set-infos='block-description, block-logo',
set-block-description='label-description, description',
@@ -33,31 +19,23 @@
widget-customer.logo='sib-display-img',
set-block-fee='label-fee, details-cell, details-business',
- value-label-fee='FEE:',
set-details-cell='cell-name, cell-fee, percentage',
+ set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+ value-label-fee='FEE:',
value-cell-name='Happy Dev Paris:',
value-cell-fee='5',
value-percentage='%',
- set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
- value-business-contribution='Business contribution:',
value-comma=', ',
set-block-customer='label-customer, customer',
value-label-customer='CUSTOMER INFORMATIONS:'
- template-customer='customer-template',
- bind-resources,
+ widget-customer='customer-template',
+
+ set-block-team='label-team, members',
+ value-label-team='TEAM:'
+ widget-members='team-template',
+ multiple-members,
+
+ bind-resources
)
- div(name='block-team')
- h2(name='label-team') Team:
- sib-display(
- id-suffix='members',
- data-fields='teammate-img, teammate-profile, teammate-job',
- set-teammate-img='user.account.picture',
- set-teammate-profile='user.first_name, user.last_name, user.groups',
- set-teammate-job='name',
- widget-user.account.picture='sib-display-img',
- widget-user.groups='sib-display-lookuplist',
- next='profile',
- bind-resources,
- )
diff --git a/src/page-project-profile.pug.orig b/src/page-project-profile.pug.orig
new file mode 100644
index 0000000..6b55161
--- /dev/null
+++ b/src/page-project-profile.pug.orig
@@ -0,0 +1,58 @@
+.frame
+
+ include templates/template-customer.pug
+ include templates/template-team.pug
+
+ sib-display(
+ data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
+ extra-context='{"project-profile":"${sdn}/projects/"}'
+
+ set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
+ value-const-title1='N°',
+ value-const-title2='-',
+ value-entitled='Creation date:'
+
+ set-infos='block-description, block-logo',
+ set-block-description='label-description, description',
+ set-block-logo='customer.logo',
+ value-label-description='DESCRIPTION:',
+ widget-customer.logo='sib-display-img',
+
+ set-block-fee='label-fee, details-cell, details-business',
+ set-details-cell='cell-name, cell-fee, percentage',
+ set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+ value-label-fee='FEE:',
+ value-cell-name='Happy Dev Paris:',
+ value-cell-fee='5',
+ value-percentage='%',
+ value-business-contribution='Business contribution:',
+ value-comma=', ',
+
+ set-block-customer='label-customer, customer',
+ value-label-customer='CUSTOMER INFORMATIONS:'
+ widget-customer='customer-template',
+
+ set-block-team='label-team, members',
+ value-label-team='TEAM:'
+ widget-members='team-template',
+ multiple-members,
+
+ bind-resources
+ )
+<<<<<<< HEAD
+
+ div(name='block-team')
+ h2(name='label-team') Team:
+ sib-display(
+ id-suffix='members',
+ data-fields='teammate-img, teammate-profile, teammate-job',
+ set-teammate-img='user.account.picture',
+ set-teammate-profile='user.first_name, user.last_name, user.groups',
+ set-teammate-job='name',
+ widget-user.account.picture='sib-display-img',
+ widget-user.groups='sib-display-lookuplist',
+ next='profile',
+ bind-resources,
+ )
+=======
+>>>>>>> b8190bc... ui(all pages): MR!13 - upgrade to sib-core v0.6
diff --git a/src/scripts/hd-widgets.js b/src/scripts/hd-widgets.js
deleted file mode 100644
index 27dc50e..0000000
--- a/src/scripts/hd-widgets.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import {Helpers, SIBWidget, store} from 'https://unpkg.com/@startinblox/core@0.6';
-
-class HDAppMail extends SIBWidget {
- get template() {
- return `
${this.value}
`; - } - - render() { - this.innerHTML = this.template; - } -} - -customElements.define('hdapp-mail', HDAppMail); -customElements.define('hdapp-member', HDAppMember); -customElements.define('hdapp-closing-date', HDAppClosingDate); -customElements.define('hdapp-available', HDAppAvailable); -customElements.define('hdapp-hyperlink', HDAppHyperlink); -customElements.define('hdapp-link-more', HDAppLinkMore); -customElements.define('hdapp-form-text', HDAppFormText); \ No newline at end of file diff --git a/src/styles/content.scss b/src/styles/content.scss index 720008b..4d66ca7 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -7,23 +7,6 @@ // //float: right; // } -[name='user-thumb'] { - display: flex; - align-items: center; - margin: -0.25em; - - > * { - margin: 0.25em; - } - - sib-display-img { - width: 4.25rem; - height: 4.25rem; - overflow: hidden; - border-radius: 100%; - } -} - // skills /*#member-profile sib-display-lookuplist { diff --git a/src/styles/filters.scss b/src/styles/filters.scss index 4043600..622176c 100644 --- a/src/styles/filters.scss +++ b/src/styles/filters.scss @@ -4,7 +4,6 @@ grid-gap: 0px 15px; grid-template-columns: 50% 50%; grid-template-rows: 3.5em 3.5em; - padding-bottom: 4.8rem; label { display: block; @@ -51,7 +50,7 @@ } #offers-list, #profiles-list { - & > sib-form > form { + & > sib-form { @extend %filters; } } diff --git a/src/styles/form.scss b/src/styles/form.scss index c19a3b1..a0a6537 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -17,6 +17,7 @@ #job-offer-create, #project-create, #project-edit { + flex: 1; font-size: 1.7rem; h1 { @@ -31,7 +32,7 @@ text-align: center; } - p[name$='-text'] { + [name$='-text'] { font-size: 1.5rem; margin-bottom: 2em; } @@ -63,6 +64,7 @@ border: none; color: $color-purple-dark; line-height: 1.5; + width: 95%; } input, @@ -100,7 +102,7 @@ margin-top: 1.7rem; div.choices__item { - @extend %skill; + /*@extend %skill;*/ button.choices__button { border-left: 1px solid $color-selective-yellow; diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss index 975b04c..41c439e 100644 --- a/src/styles/job-offers.scss +++ b/src/styles/job-offers.scss @@ -21,88 +21,102 @@ > sib-display { @extend %frame; display: block; + font-size: 1.5rem; margin: 1.7rem 0; padding: 3.4rem; /*&:nth-child(odd) { background-color: $color-anti-flash-white; }*/ + + [name='user-thumb'] { + align-items: center; + display: flex; + margin: -0.25em; + + > * { + margin: 0.25em; + } + + [name='author.first_name'] { + color: $color-quartz; + font-weight: 600; + } + + sib-multiple[name$='groups'] { + display: flex; + + li { + @extend %group; + } + } + + sib-display-img { + background-color: $color-white; + border-radius: 50%; + height: 4.25rem; + overflow: hidden; + position: relative; + width: 4.25rem; + + img { + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + } + } + + [name='creationDate'] { + margin-bottom: 0.7rem; + margin-top: 2rem; + } + sib-display-div[name='title'] { @extend h3; display: block; font-weight: bold; + line-height: 19px; } - label { - display: none; + [name='description'] { + line-height: 1.6; + margin-bottom: 1.6rem; } + + [name='send'] { + color: $color-majorelle-blue; + font-size: 1.3rem; + float: right; + + > sib-link { + cursor: pointer; + @include icon('speech'); + + &::before { + font-size: 1.5rem; + margin-right: 1.2rem; + } + } + } + + [name='status'] { + float: right; + display: flex; + align-items: center; + margin: -0.25em; + + > * { + margin: 0.25em; + } + + strong { + @extend %status-open; + } + } } } } -[name='creation'] { - margin-top: 2rem; -} - -[name='description'] { - line-height: 1.6; -} - -[name='send'] { - color: $color-majorelle-blue; - font-size: 1.3rem; - text-align: right; - - > sib-link { - cursor: pointer; - @include icon('speech'); - - &::before { - font-size: 1.5rem; - margin-right: 1.2rem; - } - } -} - -[name='status'] { - float: right; - display: flex; - align-items: center; - margin: -0.25em; - - > * { - margin: 0.25em; - } - - strong { - @extend %status-open; - } -} - -[name='user-thumb'] { - align-items: center; - color: $color-quartz; - display: flex; - font-weight: 600; - margin: -0.25em; - - > * { - margin: 0.25em; - } - - sib-display-img { - border-radius: 100%; - height: 2.5em; - overflow: hidden; - width: 2.5em; - } - - div[name*='roles'] { - border: 1px solid yellow; - border-radius: 3px; - color: $color-rolling-stone; - font-size: 1.5rem; - font-weight: 400; - margin-left: 1.7rem; - padding: calc(16px - 0.8em) 0.7em; - } -} diff --git a/src/styles/main.scss b/src/styles/main.scss index 8ae3290..f432d5e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -78,6 +78,12 @@ button { -webkit-appearance: none; } +li { + list-style: none; + margin-right: 0.4rem; + padding-left: 0; +} + #job-offers, #members { @extend %content-padding; @@ -205,65 +211,21 @@ sib-link.back { } -/*sib-display-lookuplist[name$="skills"] { - display: flex; -}*/ +/* TEMPLATE SKILLS*/ -sib-display-lookuplist { +sib-multiple[name*='skills'] { display: flex; - - ul { - display: flex; - flex-wrap: wrap; - list-style: none; - padding: 0; - } - - li[name*='skills'] { - @extend %skill; - } + flex-wrap: wrap; } -div[name*='groups'], -li[name*='groups'] { - border: 1px solid $color-mikado-yellow; - border-radius: 3px; - color: $color-rolling-stone; - font-size: 1.3rem; - font-weight: 400; - margin-left: 1.7rem; - padding: calc(16px - 1em) 0.7em; - - &:first-of-type { - margin-left: 0; - } +.skill { + background-color: $color-selective-yellow; + border: 1px solid $color-selective-yellow; + border-radius: 2em; + color: $color-white; + font-size: 1.4rem; + font-weight: bold; + margin: 0.4rem 0.4rem 0.4rem 0; + padding: 0.5rem 2rem; } -[name='user-thumb'] { - align-items: center; - color: $color-quartz; - display: flex; - font-weight: 600; - margin: -0.25em; - - > * { - margin: 0.25em; - } - - sib-display-img { - border-radius: 100%; - height: 2.5em; - overflow: hidden; - width: 2.5em; - } - - div[name*='roles'] { - border: 1px solid yellow; - border-radius: 3px; - color: $color-rolling-stone; - font-size: 15px; - font-weight: 400; - margin-left: 1em; - padding: calc(16px - 0.8em) 0.7em; - } -} diff --git a/src/styles/member-profile.scss b/src/styles/member-profile.scss index 1a09aae..0573909 100644 --- a/src/styles/member-profile.scss +++ b/src/styles/member-profile.scss @@ -60,16 +60,13 @@ font-weight: bold; @extend h1; } - - sib-display-lookuplist[name='user.groups'] { - - label { - display: none; - } - - > ul { - margin-block-end: 0; - margin-block-start: 0; + + > sib-multiple[name$='groups'] { + display: flex; + padding-left: 1.4rem; + + li { + @extend %group; } } } @@ -92,13 +89,13 @@ @extend %member-info; } - #member-status { + status-template[name$='available']{ align-self: flex-end; color: $color-majorelle-blue; grid-area: status; justify-self: flex-end; - > span { + span { align-items: center; align-self: center; display: flex; @@ -107,7 +104,7 @@ line-height: 2; } - > span.status-one { + span.status-one { @include ci('awareness'); &::before { @@ -117,7 +114,7 @@ } } - > span.status-two { + span.status-two { @include ci('armor'); &::before { @@ -128,17 +125,21 @@ } } - [next=member-chat] { + sib-action[name='send'] { align-self: flex-end; + grid-area: button; + justify-self: flex-end; + } + + [next=member-chat] { + @include icon('speech'); border: 1px solid $color-majorelle-blue; border-radius: 2em; color: $color-majorelle-blue; font-size: 18px; font-weight: bold; - grid-area: button; justify-self: end; padding: 0.6em 1.5em 0.4em; - @include icon('speech'); &::before { font-size: 25px; diff --git a/src/styles/members.scss b/src/styles/members.scss index b44880c..a5a7f32 100644 --- a/src/styles/members.scss +++ b/src/styles/members.scss @@ -55,23 +55,26 @@ color: $color-quartz; font-weight: bold; justify-content: center; - margin-bottom: 3.75rem; - white-space: nowrap; - - &::before, &::after { - border-top: 1px solid $color-timberwolf; - content: ''; - position: relative; - top: 0.85rem; - width: 35.2vw; - } + margin: 3.75rem 0; + position: relative; + z-index: 1; &::before { - right: 5.1rem; + border-top: 1px solid $color-timberwolf; + bottom: 0; + content: ''; + left: 0; + margin: 0 auto; + position: absolute; + right: 0; + top: 50%; + width: 100%; + z-index: -1; } - &::after { - left: 5.1rem; + span { + background-color: $color-anti-flash-white; + padding: 0 60px; } } @@ -106,7 +109,7 @@ } sib-display-img { - background-color: white; + background-color: $color-white; border-radius: 50%; height: 28vh; margin: 1.7rem auto; @@ -114,7 +117,6 @@ position: relative; width: 28vh; - img { height: 100%; left: 0; @@ -125,7 +127,7 @@ } } - ul[name='user'] { + [name='user.name'] { font-weight: bold; margin: 0; @extend h1; @@ -161,6 +163,10 @@ padding: 0 1.7rem; @extend %member-info; + + sib-multiple[name$='groups'] { + display: flex; + } } } } diff --git a/src/styles/menu-right.scss b/src/styles/menu-right.scss index fa6c0eb..08ad665 100644 --- a/src/styles/menu-right.scss +++ b/src/styles/menu-right.scss @@ -5,7 +5,7 @@ nav { > sib-router { - background-color: $color-link-water; + background-color: $color-222-52-90; color: $color-purple-dark; flex: 0 0 auto; font-weight: 600; @@ -20,9 +20,7 @@ align-items: center; border-bottom: 1px solid $color-lavender-gray; display: flex; - margin-bottom: 0; - margin-left: 0; - margin-top: 0; + margin: 0; padding: 2.55rem 2.55rem; position: relative; width: 12em; @@ -31,7 +29,7 @@ float: left; font-size: 4rem; margin-left: 0; - margin-right: 1.5rem; + margin-right: 2.55rem; } } @@ -75,7 +73,7 @@ } &.offsite-is-closed { - transform: translate(12rem); + transform: translate(15.5rem); & .jsOffsiteToggle::before { transform: rotate(180deg); @@ -83,7 +81,7 @@ & ~ #views-container { flex-basis: 95%; - transform: translate(12rem); + transform: translate(15.5rem); } } } diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss index 0413bb6..53d7169 100644 --- a/src/styles/project-profile.scss +++ b/src/styles/project-profile.scss @@ -38,7 +38,7 @@ padding-left: 0.85rem; } - > :not(:nth-last-child(n+4)) { + > :nth-child(5) { color: $color-purple-dark; font-weight: normal; text-transform: none; @@ -47,6 +47,13 @@ [name='entitled'] { margin-left: auto; } + + > :nth-last-child(-n+2) { + color: $color-text-base; + font-size: 1.6rem; + font-weight: normal; + text-transform: none; + } } [name='infos'] { @@ -176,62 +183,67 @@ [name='block-team'] { - > sib-display > div > sib-display > div { - align-items: center; - display: grid; - grid-template-columns: 5vw 2fr; - grid-template-rows: repeat(2, 5.2vh); - - label { - display: none; - } - - [name='teammate-profile'], - [name='teammate-img'], - [name='teammate-job'] { - margin: 0; - width: auto; - } + > sib-multiple { - [name='teammate-img'] { - grid-row: 1 / -1; - - img { - border: 0; - border-radius: 100%; - display: block; - font-size: 100%; - margin: 0; - padding: 0; - width: 75%; + > team-template[name='members'] { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + + > sib-display:first-child { + align-self: center; + grid-column: 1 / span 1; + grid-row: 1 / span 2; + + div { + background-color: $color-white; + 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%; + } + } } - } - - [name='teammate-profile'] { - align-self: end; - - hdapp-userinfo { - display: inline-block; - height: 0; - > ul { + > div:nth-child(2) { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + + span { + align-self: center; font-weight: 600; - padding-inline-start: 0; + } + + span ~ sib-display { + + div { + display: flex; + + div[name='name'] { + @extend %group; + margin-left: 1rem; + } + } } } - - sib-display-lookuplist { - display: inline-block; - > ul { - margin-block-end: 0; - margin-block-start: 0; - } + > span:nth-child(3) { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; } } - - [name='teammate-job'] { - align-self: start; - } } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 3b93290..b446e57 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -18,6 +18,7 @@ $color-bombay: hsl(215, 9%, 73%); $color-manatee: hsl(215, 6%, 63%); $color-dark-lava: hsl(216, 4%, 22%); $color-link-water: hsl(221, 51%, 90%); +$color-222-52-90: hsl(222, 52%, 90%); $color-glitter: hsl(222, 57%, 95%); $color-lavender-gray: hsl(229, 25%, 79%); $color-purple-dark: hsl(233, 18%, 29%); @@ -38,6 +39,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%); } %content-padding { + flex: 1; padding: 4.4rem; } @@ -46,14 +48,21 @@ $color-majorelle-blue: hsl(244, 73%, 62%); background-color: $color-white; } -%member-info { - - label { - display: none; - } +%group { + border: 1px solid $color-mikado-yellow; + border-radius: 3px; + color: $color-rolling-stone; + font-size: 1.4rem; + font-weight: 400; + padding: calc(1.6rem - 0.8em) 0.7em; +} - > sib-display-div > div, - > sib-display-lookuplist > ul { +%member-info { + + sib-multiple[name^='user.'], + > sib-display-div > div { + display: flex; + flex-wrap: wrap; margin-bottom: 0; margin-top: 1.7rem; @@ -62,19 +71,12 @@ $color-majorelle-blue: hsl(244, 73%, 62%); padding: 0 0.6em 0 0; } } - - > sib-display-lookuplist[name$='groups'] > ul > li { - border: none; - font-size: inherit; - margin-left: 0; - padding: 0; - } [name$='city'] * { @include mdi('atom'); } - ul[name*='groups'] { + sib-multiple[name='user.groups'] { @include mdi('account-outline'); } @@ -116,16 +118,6 @@ $color-majorelle-blue: hsl(244, 73%, 62%); box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19); } -%skill { - background-color: $color-selective-yellow; - border: 1px solid $color-selective-yellow; - border-radius: 2em; - color: $color-white; - font-weight: bold; - margin: 0.4rem; - padding: 0.5rem 2rem; -} - %status-open { background-color: $color-majorelle-blue; border: none; diff --git a/src/templates/template-customer.pug b/src/templates/template-customer.pug new file mode 100644 index 0000000..c2d3d59 --- /dev/null +++ b/src/templates/template-customer.pug @@ -0,0 +1,19 @@ +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(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role} + li(name='email') + a(href='mailto:${value.email}') ${value.email} + li(name='phone') ${value.phone} diff --git a/src/templates/template-groups.pug b/src/templates/template-groups.pug new file mode 100644 index 0000000..843a597 --- /dev/null +++ b/src/templates/template-groups.pug @@ -0,0 +1,3 @@ +sib-widget(name='groups-name') + template ${value.name} + diff --git a/src/templates/template-skills.pug b/src/templates/template-skills.pug new file mode 100644 index 0000000..cb2cdcb --- /dev/null +++ b/src/templates/template-skills.pug @@ -0,0 +1,4 @@ +sib-widget(name='skills-name') + template + li(class='skill') ${value.name} + diff --git a/src/templates/template-status.pug b/src/templates/template-status.pug new file mode 100644 index 0000000..94e6e2f --- /dev/null +++ b/src/templates/template-status.pug @@ -0,0 +1,3 @@ +sib-widget(name='status-template') + template + div#member-status ${value == true ? 'Available' : 'Busy'} diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug new file mode 100644 index 0000000..fa5b3e0 --- /dev/null +++ b/src/templates/template-team.pug @@ -0,0 +1,16 @@ +sib-widget(name='team-template') + template + sib-display( + data-src="${value.user.account['@id']}", + data-fields='picture', + widget-picture='sib-display-img' + ) + div + span ${value.user.name} + sib-display( + data-src="${value.user.groups['@id']}", + data-fields='name', + multiple-name + ) + span ${value.name} +