diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index e31233e455bd2cf0b810a43c8430f21921f6a3b8..c7bfea1a426a2e4949f0e497c41a2f12ed5e9e3b 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 e13ac3da90c6c9b205448c7614d0cd9e5c826b87..645225b8a3cf480aa9d8c75f7ce1daba27ba1092 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 0000000000000000000000000000000000000000..14d55a87d94f3d2905b0f5a82c05190c742a3e83
--- /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 b3bf08a010e6a3c05aeb96a0751078f9e2659cd3..3bf154e0e364a0187d092ae85ef75d477815af05 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 f76054e59c46b5c49ee1048fbb172aafe6ddd5f7..bc53b090c67e049568206c03638879f1cb61960a 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 995636a179d1a921df3de366ecd7fb75b5bb6a4a..d33da278d1eb84845dd0eb57b327ca4a88e5ef79 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 17a486d1319bd7bcbef565a47aea6bcd884ef40c..b16b60aa04ecbe6cb4da8027969063f574a0cc76 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;