diff --git a/src/dependencies.pug b/src/dependencies.pug index b6786d0..b1e1a35 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -33,6 +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.5") script(type="module" src="https://unpkg.com/@startinblox/router@latest") script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1") diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug index 574a6c2..186fa7f 100644 --- a/src/page-job-offer-create.pug +++ b/src/page-job-offer-create.pug @@ -1,12 +1,27 @@ -//#job-offer-create -div - h1 New job offer +.frame-form + 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. .form-view sib-form.block( data-src=`${sdn}/job-offers/`, - data-fields='title, description, skills', range-skills= `${sdn}/skills/`, range-author= `${sdn}/users/`, - widget-skills='sib-form-multiple-dropdown' + + 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-skills='sib-form-auto-completion', + next="job-offers" ) diff --git a/src/page-project-create.pug b/src/page-project-create.pug index bc78295..2aeb473 100644 --- a/src/page-project-create.pug +++ b/src/page-project-create.pug @@ -1,6 +1,6 @@ .frame-form h1 New project - p Here you can create your project, add members and assign them a job. + p.form-goal Here you can create your project, add members and assign them a job. .form-view sib-form( data-src=`${sdn}/projects/`, @@ -12,17 +12,17 @@ set-block-team=`team, members`, set-block-fee=`businessProvider, businessProviderFee`, - 'label-customer,name'='Business name', + 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-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', diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index 138c7bd..a8b9c97 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -1,8 +1,8 @@ .frame-form h1 Edit your project - p Here you can edit your projet's details + p.form-goal Here you can edit your projet's details .form-view - sib-form( + sib-form.block( range-team=`${sdn}/users/`, range-members=`${sdn}/project-members/`, @@ -10,17 +10,17 @@ set-block-team=`team, members`, set-block-fee=`businessProvider, businessProviderFee`, - 'label-customer,name'='Business name', + 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-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', diff --git a/src/scripts/hd-widgets.js b/src/scripts/hd-widgets.js index e4ae046..e27fc33 100644 --- a/src/scripts/hd-widgets.js +++ b/src/scripts/hd-widgets.js @@ -1,4 +1,4 @@ -import {Helpers, SIBWidget, SIBDisplayLookupList, store} from 'https://unpkg.com/@startinblox/core@0.5.7'; +import {Helpers, SIBWidget, SIBDisplayLookupList, store} from 'https://unpkg.com/@startinblox/core@0.5'; class HDAppUserInfo extends SIBDisplayLookupList { get parentElement() { @@ -127,6 +127,16 @@ class HDAppLinkMore extends SIBWidget { } } +class HDAppFormText extends SIBWidget { + get template() { + return `

${this.value}

`; + } + + render() { + this.innerHTML = this.template; + } +} + customElements.define('hdapp-userinfo', HDAppUserInfo); customElements.define('hdapp-mail', HDAppMail); customElements.define('hdapp-member', HDAppMember); @@ -134,4 +144,5 @@ customElements.define('hdapp-author', HDAppAuthor); customElements.define('hdapp-closing-date', HDAppClosingDate); customElements.define('hdapp-available', HDAppAvailable); customElements.define('hdapp-hyperlink', HDAppHyperlink); -customElements.define('hdapp-link-more', HDAppLinkMore); \ No newline at end of file +customElements.define('hdapp-link-more', HDAppLinkMore); +customElements.define('hdapp-form-text', HDAppFormText); \ No newline at end of file diff --git a/src/styles/form.scss b/src/styles/form.scss index 50b7cfd..af2a1ff 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -1,4 +1,9 @@ .frame-form { + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 0 auto; + min-height: 100%; padding: 4em 5em 6em; @extend %frame; @@ -8,6 +13,7 @@ } } +#job-offer-create, #project-create, #project-edit { font-size: 17px; @@ -19,11 +25,16 @@ text-align: center; } - p { + p.form-goal { margin-bottom: 4em; text-align: center; } + p[name$='-text'] { + font-size: 15px; + margin-bottom: 2em; + } + div[name^='block-'] { display: flex; @@ -32,6 +43,7 @@ } } + sib-form-auto-completion, sib-form-checkbox, sib-form-label-text, sib-form-multiple-dropdown, @@ -57,7 +69,6 @@ input, textarea { - margin-bottom: 2em; padding: 1em; } @@ -67,6 +78,40 @@ } } + sib-form-auto-completion { + + label { + color: $color-dark-lava; + } + + div.choices__inner { + background-color: inherit; + border: none; + display: flex; + flex-direction: column-reverse; + padding-left: 0; + + div.choices__list { + margin-top: 1em; + + div.choices__item { + @extend %skill; + + button.choices__button { + border-left: 1px solid $color-selective-yellow; + opacity: 1; + padding-left: 0; + } + } + } + + input[type='text'].choices__input { + max-width: 16em; + min-width: 16em; + } + } + } + sib-form-checkbox { flex-direction: row; @@ -132,6 +177,15 @@ input[type='submit'] { margin-top: 3.5em; - @extend %button-form; + @extend %submit-form; + } +} + +#project-create, +#project-edit { + + input, + textarea { + margin-bottom: 2em; } } diff --git a/src/styles/main.scss b/src/styles/main.scss index 1357041..cff2662 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -201,9 +201,12 @@ sib-link { } sib-link.back { + color: $color-purple-dark; display: block; - @include icon('arrow-left'); - @extend h1; + font-size: 20px; + font-weight: bold; + text-align: right; + @include icon('arrow-left-circle'); } .containerH { @@ -276,13 +279,7 @@ sib-display-lookuplist { } li[name*='skills'] { - padding: 0.3em 1.2em; - border: 1px solid; - border-radius: 2em; - margin: 0.25em; - background-color: $color-selective-yellow; - color: $color-white; - font-weight: bold; + @extend %skill; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 8e5ff9f..715c7c0 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -29,19 +29,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%); border: none; border-radius: 100em; font-weight: normal; -} - -%button-form { - background-color: $color-purple-dark; - color: $color-white; - float: right; - font-weight: bold; - text-transform: uppercase; -} - -%shadow { - box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19); -} +} %content-padding { padding: 2.6em; @@ -50,6 +38,21 @@ $color-majorelle-blue: hsl(244, 73%, 62%); %frame { @extend %shadow; background-color: $color-white; +} + +%shadow { + 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-size: 16px; + font-weight: bold; + margin: 0.25em; + padding: 0.3em 1.2em; } %status-open { @@ -62,6 +65,14 @@ $color-majorelle-blue: hsl(244, 73%, 62%); padding: 0.5em 1em; } +%submit-form { + background-color: $color-purple-dark; + color: $color-white; + float: right; + font-weight: bold; + text-transform: uppercase; +} + $breakpoints: ( phone: 480px, tablet: 768px,