diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index e31233e..c7bfea1 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -1,7 +1,7 @@ div.grid-layer div.grid-layer-main.containerV - h2 Nouvelles offres - span Tu trouveras ici des offres de missions + h2 New offers + span Here you can find and post offers sib-display#offers-list( data-src=`${sdn}/job-offers/`, data-fields='date, user-thumb, title, description, skills', @@ -18,10 +18,10 @@ div.grid-layer div.grid-layer-links.containerV sib-link(next="job-offer-create").containerH.containerCenter.action-link div.icon-plus - div Poster une offre + div Post a new offer sib-link().containerH.containerCenter.how-link div.icon-idea - div.grow Comment trouver une offre ? + div.grow How To find a new offer? sib-link().containerH.containerCenter.how-link div.icon-idea - div.grow Comment programmer des notifications ? + div.grow How to set notification? diff --git a/src/styles/content.scss b/src/styles/content.scss index e13ac3d..645225b 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -319,33 +319,6 @@ hdapp-available { grid-row-end: end; } } -#offers-list > sib-form > form { - background-color: orangered; - //display: grid; - //grid-template-columns: 1fr 1fr; - //grid-gap: 20px; - - sib-form-label-text { - display: flex; - flex-direction: column; - } - - label { - //flex-basis: 5em; - //flex-shrink: 0; - display: block; - } - - input, select { - //flex-grow: 1; - //min-width: 0; - //box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); - } - - input[type="submit"] { - display: none; - } -} #member-profile, #profiles-list { diff --git a/src/styles/filters.scss b/src/styles/filters.scss new file mode 100644 index 0000000..14d55a8 --- /dev/null +++ b/src/styles/filters.scss @@ -0,0 +1,56 @@ +#offers-list > sib-form > form { + border-bottom: 1px solid $color-grey1; + display: grid; + grid-gap: 0px 24px; + grid-template-columns: 33% auto; + padding-bottom: 3em; + + + label { + display: block; + } + + input, select { + border-style: none; + box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); + margin-top: 1em; + } + + input[type="submit"] { + display: none; + } + + select { + background: white; + display: inline-block; + padding: 0.5em 12.5em 0.5em 1em; + + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + + background-image: + linear-gradient(45deg, transparent 50%, $color-grey 50%), + linear-gradient(135deg, $color-grey 50%, transparent 50%), + linear-gradient(to right, white, white); + background-position: + calc(100% - 20px) calc(1em + 2px), + calc(100% - 15px) calc(1em + 2px), + calc(100% - 2.5em) 0.5em; + background-repeat: no-repeat; + background-size: + 5px 6px, + 5px 6px, + 1px 1.5em; + } + + sib-form-label-text { + display: flex; + flex-direction: column; + } +} + +# + + + diff --git a/src/styles/form.scss b/src/styles/form.scss index b3bf08a..3bf154e 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -64,11 +64,12 @@ sib-form.block { } } +//fix: style à mignrer dans filter.scss ? => A voir si ces styles sont utilisés ailleurs que pour les filtres. sib-form { // text like textarea, input:not([type='button']):not([type='checkbox']):not([type='color']):not([type='file']):not([type='hidden']):not([type='image']):not([type='radio']):not([type='range']):not([type='reset']):not([type='submit']) { - padding: 0.5em; + padding: 0.7em; border: none; @extend %shadow; } @@ -105,14 +106,3 @@ sib-form { } } } - -sib-form-label-text,sib-form-dropdown{ - //display: flex; - //flex-wrap: nowrap; -} - -select{ - background-color: $color-white; - border-style: none; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15) -} diff --git a/src/styles/index.scss b/src/styles/index.scss index f76054e..bc53b09 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -8,6 +8,7 @@ @import 'main'; @import 'form'; @import 'content'; +@import 'filters'; @import 'right-panel'; // @import 'members'; diff --git a/src/styles/main.scss b/src/styles/main.scss index 995636a..d33da27 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -280,67 +280,15 @@ sib-trigger.back { grid-template-columns: [start]auto[middle]25%[end]; grid-template-rows: [start]13em[middle]auto[end]; } -.grid-layer-main{ - background: green; +.grid-layer-main { grid-column-start: start; grid-column-end: end; grid-row-start: start; grid-row-end: end; } -.grid-layer-links{ - background: pink; +.grid-layer-links { grid-column-start: middle; grid-column-end: end; grid-row-start: start; grid-row-end: middle; } - - - - - -#offers-list > sib-form > form { - select { - background: white; - display: inline-block; - line-height: 1.5em; - padding: 0.5em 12.5em 0.5em 1em; - - box-sizing: border-box; - -webkit-appearance: none; - -moz-appearance: none; - - background-image: - linear-gradient(45deg, transparent 50%, gray 50%), - linear-gradient(135deg, gray 50%, transparent 50%), - linear-gradient(to right, white, white); - background-position: - calc(100% - 20px) calc(1em + 2px), - calc(100% - 15px) calc(1em + 2px), - calc(100% - 2.5em) 0.5em; - background-size: - 5px 6px, - 5px 6px, - 1px 1.5em; - background-repeat: no-repeat; - } -} - -sib-form-label-text { - background: aqua; -} - -form { - background-color: orangered; - display: grid; - grid-template-columns: 33% auto; - grid-gap: 24px; - - label { - display: block; - } - - input, select { - margin-top: 1em; - } -} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 17a486d..b16b60a 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,6 +1,7 @@ // colors $color-white: #fff; $color-black: #36383b; +$color-grey1: #d7dbe0; $color-grey: #898f95; $color-grey-mid: #abaaba; $color-grey-light4: #b4b9c0;