From 54535c4007fd1653779960897db59db42cd7ddf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 7 Jun 2019 11:01:34 +0200 Subject: [PATCH] ui(job-offer-create): new fields added - Date field added - New multiple select - All css stykes for form reviewed --- src/page-job-offer-create.pug | 6 +- src/styles/base/form.scss | 106 +++++++++++++++++++++++----------- www/images/arrow-down.svg | 1 + www/images/calendar.svg | 4 ++ 4 files changed, 82 insertions(+), 35 deletions(-) create mode 100644 www/images/arrow-down.svg create mode 100644 www/images/calendar.svg diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug index ae0202b..8b9a437 100644 --- a/src/page-job-offer-create.pug +++ b/src/page-job-offer-create.pug @@ -14,7 +14,7 @@ data-src=`${sdn}/sources/job-offers/` range-skills=`${sdn}/skills/` - data-fields='title, title-text, description, description-text, skills' + data-fields='title, title-text, description, description-text, skills, closingDate' class-title='field form-label is-light is-expanded' label-title='Title*' @@ -32,6 +32,10 @@ label-skills='The required skills for this mission:*' multiple-skills='sib-multiple-select' widget-skills='sib-form-auto-completion' + + class-closingDate='form-label is-dark' + label-closingDate='Publication end date:*' + widget-closingDate='sib-form-date' next="job-offers" ) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index d50bbf0..f6d878f 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -23,6 +23,7 @@ } p.center { + margin: 0; text-align: center; } @@ -41,14 +42,20 @@ flex-direction: column; input { - -webkit-appearance: none; + -webkit-tap-highlight-color: $color-244-73-62; background-color: $color-222-57-95; border: none; color: $color-233-18-29; - flex: 1 1 0; + /*flex: 1 1 0; Problem on Firefox for input type date*/ margin-top: 0.8rem; min-width: 0; padding: 1.2rem; + + &:focus, + &:active { + border-color: transparent; + border-bottom: 2px solid $color-244-73-62; + } } } @@ -70,26 +77,52 @@ .form-label { font-weight: 600; - &.is-dark label > div { + &.is-dark label { color: $color-216-4-22; + margin-top: 3rem; } - &.is-light label > div { + &.is-light label { color: $color-244-10-70; + margin-top: 2.2rem; text-transform: uppercase; } } - .large-margin>p{ - margin-bottom: 3rem; - } - - .small-margin>p { - margin-bottom: 2.2rem; - } - /* WIDGETS */ + sib-form-date { + + input[type='date'] { + color: $color-213-4-50; + font-size: 1.4rem; + margin-top: 1.6rem; + max-width: 48.75vw; + background-image: url("/images/calendar.svg"); + background-position: right 12px top 50%; + background-repeat: no-repeat; + background-size: 14px; + cursor: default; + position: relative; + + &::-webkit-calendar-picker-indicator { + cursor: pointer; + opacity: 0; + position: absolute; + right: 8px; + } + + &::-webkit-clear-button { + cursor: pointer; + margin-right: 3px; + } + + &::-webkit-inner-spin-button { + display: none + } + } + } + sib-multiple-select { sib-form-auto-completion > label { @@ -97,8 +130,9 @@ flex-direction: column; .ss-main { + margin-bottom: 7.8rem; margin-top: 1.6rem; - width: 70%; + max-width: 50vw; .ss-multi-selected { align-items: center; @@ -107,37 +141,41 @@ border-radius: 0px; display: flex; justify-content: flex-end; - height: 4.2rem; + min-height: 4.2rem; + padding-left: 1.2rem; + + .ss-add { + font-size: 1.8rem; + margin: 0 12px 0 0; + + span.ss-plus { + background: $color-244-73-62; + + &::after { + background: $color-244-73-62; + } + } + } .ss-values { background: transparent; position: absolute; top: 6rem; width: 100%; - } - .ss-disabled { - color: transparent; - } + .ss-disabled { + color: transparent; + font-size: 1.4rem; + left: calc(1.2rem - 5px); + position: absolute; + top: calc(-6rem + 7px); - .ss-add { - @include icon('plus'); - color: $color-244-73-62; - font-size: 1.8rem; - margin: 0px 12px 0 38px; - position: absolute; - - span.ss-plus { - align-self: center; - background: transparent; - - &::after { - background: transparent; + &::before { + color: $color-213-4-50; + content: "Select skills"; + font-weight: normal; } } - } - - .ss-values { .ss-value { @extend .skill; diff --git a/www/images/arrow-down.svg b/www/images/arrow-down.svg new file mode 100644 index 0000000..29607cd --- /dev/null +++ b/www/images/arrow-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/www/images/calendar.svg b/www/images/calendar.svg new file mode 100644 index 0000000..3aa532e --- /dev/null +++ b/www/images/calendar.svg @@ -0,0 +1,4 @@ + \ No newline at end of file