From 05d71de3793cfc0b042d748a156eceb8b41a6cee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 25 Mar 2019 16:35:36 +0100
Subject: [PATCH] ui(all pages): MR!13 - Upgrade to core v0.6
Fixed responsive issue on counter in /members page
Had to modify some CSS files, create templates, modify data-fields in sib-display, clean up and refactor
Removed custom-widgets
---
src/dependencies.pug | 4 +-
src/header.pug | 2 +-
src/page-job-offer-create.pug | 20 ++--
src/page-job-offers.pug | 23 ++---
src/page-member-profile.pug | 26 ++---
src/page-member.pug | 5 -
src/page-members.pug | 53 +++++-----
src/page-project-create.pug | 6 +-
src/page-project-edit.pug | 27 -----
src/page-project-profile.pug | 58 ++++-------
src/page-project-profile.pug.orig | 58 +++++++++++
src/scripts/hd-widgets.js | 93 -----------------
src/styles/content.scss | 17 ----
src/styles/filters.scss | 3 +-
src/styles/form.scss | 6 +-
src/styles/job-offers.scss | 152 +++++++++++++++-------------
src/styles/main.scss | 74 ++++----------
src/styles/member-profile.scss | 35 +++----
src/styles/members.scss | 38 ++++---
src/styles/menu-right.scss | 12 +--
src/styles/project-profile.scss | 110 +++++++++++---------
src/styles/variables.scss | 40 +++-----
src/templates/template-customer.pug | 19 ++++
src/templates/template-groups.pug | 3 +
src/templates/template-skills.pug | 4 +
src/templates/template-status.pug | 3 +
src/templates/template-team.pug | 16 +++
27 files changed, 421 insertions(+), 486 deletions(-)
delete mode 100644 src/page-member.pug
create mode 100644 src/page-project-profile.pug.orig
delete mode 100644 src/scripts/hd-widgets.js
create mode 100644 src/templates/template-customer.pug
create mode 100644 src/templates/template-groups.pug
create mode 100644 src/templates/template-skills.pug
create mode 100644 src/templates/template-status.pug
create mode 100644 src/templates/template-team.pug
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 69db538e..68fc0ae3 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 6551d376..73797308 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 186fa7f7..14f93886 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 dd19bcb6..49b7df95 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 a701affa..3bd20f31 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 ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'}
+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 ee5f063e..00000000
--- 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 ae9acb26..b5f5d407 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',
+ 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='<span>${counter} members</span>',
+
+ 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 2aeb4736..ed036f30 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 a8b9c971..1cc7ce09 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 61c3c90d..7815d344 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 00000000..6b551617
--- /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 27dc50e4..00000000
--- 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 `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
- }
-}
-
-class HDAppMember extends SIBWidget {
- get template() {
- return `
- <div name="${this.name}">
- <img src="${this.value.avatar}"/>
- </div>
- `;
- }
-
- render() {
- store.get(this.value).then(value => {
- this._value = value;
- this.innerHTML = this.template;
- });
- }
-}
-
-class HDAppClosingDate extends SIBWidget {
- get template() {
- return this.value
- ? `<strong>closed</strong> (${this.value})`
- : '<strong>open</strong>';
- }
-
- render() {
- this.innerHTML = this.template;
- }
-}
-
-class HDAppAvailable extends SIBWidget {
- get template() {
- return this.value
- ? '<strong>Available</strong>'
- : '<strong>Not available</strong>';
- }
-
- render() {
- this.innerHTML = this.template;
- }
-}
-
-class HDAppHyperlink extends SIBWidget {
- get template() {
- const escaped = this.value
- .replace(/&/g, '&')
- .replace(/</g, '<')
- .replace(/>/g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
- return `<a href="${escaped}">${escaped}</a>`;
- }
-
- render() {
- this.innerHTML = this.template;
- }
-}
-
-class HDAppLinkMore extends SIBWidget {
- get template() {
- const id = Helpers.uniqID();
- return `
- ${this.label}
- ${this.name}
- ${this.escapedValue}
- `;
- }
-}
-
-class HDAppFormText extends SIBWidget {
- get template() {
- return `<p name="${this.name}">${this.value}</p>`;
- }
-
- 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 720008b6..4d66ca73 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 40436001..622176cd 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 c19a3b1b..a0a6537c 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 975b04c3..41c439e2 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 8ae3290b..f432d5e8 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 1a09aae4..0573909c 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 b44880c7..a5a7f32e 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 fa6c0ebd..08ad6653 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 0413bb6f..53d71696 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;
- }
-
- [name='teammate-img'] {
- grid-row: 1 / -1;
-
- img {
- border: 0;
- border-radius: 100%;
- display: block;
- font-size: 100%;
- margin: 0;
- padding: 0;
- width: 75%;
+ > sib-multiple {
+
+ > 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;
}
- }
-
- sib-display-lookuplist {
- display: inline-block;
- > ul {
- margin-block-end: 0;
- margin-block-start: 0;
+ span ~ sib-display {
+
+ div {
+ display: flex;
+
+ div[name='name'] {
+ @extend %group;
+ margin-left: 1rem;
+ }
+ }
}
}
- }
- [name='teammate-job'] {
- align-self: start;
+ > span:nth-child(3) {
+ align-self: start;
+ grid-column: 2 / span 1;
+ grid-row: 2 / span 1;
+ }
}
}
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3b932904..b446e57d 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;
}
+%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;
+}
+
%member-info {
-
- label {
- display: none;
- }
- > sib-display-div > div,
- > sib-display-lookuplist > ul {
+ 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 00000000..c2d3d59e
--- /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 00000000..843a597b
--- /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 00000000..cb2cdcb1
--- /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 00000000..94e6e2f8
--- /dev/null
+++ b/src/templates/template-status.pug
@@ -0,0 +1,3 @@
+sib-widget(name='status-template')
+ template
+ div#member-status ${value == true ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'}
diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug
new file mode 100644
index 00000000..fa5b3e00
--- /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}
+
--
GitLab