diff --git a/src/dependencies.pug b/src/dependencies.pug
index b6786d057045541c929b11e79181ab7dff270e70..b1e1a35078f1e5c42af8df7576cc4f749540322c 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 574a6c23cd8583f3c06d2517ff22f079665251e2..186fa7f7f64910de1a1593574daace7d72c45cb1 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 bc78295a68cf8482677cd53b133e4a73d1bb385a..2aeb47363f07748f0cc7b2d251ec0c03c74ee06a 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 138c7bdbf54192fddbe0bbc66d3cecdd86f7389b..a8b9c97163bbdc42c45f347cea466d96a7a3d8c8 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 e4ae0467ca0f1f87dbcb8c06de92c362910449a7..e27fc33d0ec7830dd28a1cf76b14d685c2bf3229 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 `<p name="${this.name}">${this.value}</p>`;
+ }
+
+ 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 50b7cfd40486bcade3639ddad1dc992e969eda06..af2a1ffd794bdec66f1b8c737d73d4cbe26c62e0 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 1357041313788e61b4490785909867b2a503cbf8..cff26622125ce38ee2767d7d778555f7761408c2 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 8e5ff9ffcc950810a2a52ff45b5cf2c6c016b190..715c7c0708435ebef2a1df9ae507eaa00a0b4843 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,