autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
This commit is contained in:
Gaëlle Morin 2019-03-25 16:35:36 +01:00
parent 9681943289
commit 05d71de379
27 changed files with 422 additions and 487 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/dependencies.pug
View File

@ -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")

2
src/header.pug
View File

@ -18,5 +18,5 @@ sib-display#profile(
data-fields='first_name, account.picture',
widget-account.picture='sib-display-img',
bind-user
)
)

20
src/page-job-offer-create.pug
View File

@ -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"

23
src/page-job-offers.pug
View File

@ -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',

26
src/page-member-profile.pug
View File

@ -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
)

5
src/page-member.pug
View File

@ -1,5 +0,0 @@
//-
#container-member
sib-link(next="members" class="back") Back to directory
div#member-profile
include page-member-profile.pug

53
src/page-members.pug
View File

@ -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='<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 ?

6
src/page-project-create.pug
View File

@ -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
)

27
src/page-project-edit.pug
View File

@ -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
)

58
src/page-project-profile.pug
View File

@ -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,
)

58
src/page-project-profile.pug.orig Normal file
View File

@ -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

93
src/scripts/hd-widgets.js
View File

@ -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, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
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);

17
src/styles/content.scss
View File

@ -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 {

3
src/styles/filters.scss
View File

@ -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;
}
}

6
src/styles/form.scss
View File

@ -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;

152
src/styles/job-offers.scss
View File

@ -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;
}
}

74
src/styles/main.scss
View File

@ -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;
}
}

35
src/styles/member-profile.scss
View File

@ -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;

38
src/styles/members.scss
View File

@ -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;
}
}
}
}

12
src/styles/menu-right.scss
View File

@ -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);
}
}
}

110
src/styles/project-profile.scss
View File

@ -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;
}
}
}

42
src/styles/variables.scss
View File

@ -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;

19
src/templates/template-customer.pug Normal file
View File

@ -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}

3
src/templates/template-groups.pug Normal file
View File

@ -0,0 +1,3 @@
sib-widget(name='groups-name')
template ${value.name}

4
src/templates/template-skills.pug Normal file
View File

@ -0,0 +1,4 @@
sib-widget(name='skills-name')
template
li(class='skill') ${value.name}

3
src/templates/template-status.pug Normal file
View File

@ -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>'}

16
src/templates/template-team.pug Normal file
View File

@ -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}