From fefb7685d850f3d5e822bc55cf7bb81c56d5759a Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Fri, 7 Dec 2018 12:19:04 +0100 Subject: [PATCH 01/15] notification block doesn't appear --- src/styles/header.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/header.scss b/src/styles/header.scss index a150cec..96f5a19 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -47,6 +47,7 @@ } #notifications { + display: none; position: absolute; right: 0; bottom: 0; From d2b2bb53df9cd6753bf69aea171641a3bd184978 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Fri, 7 Dec 2018 13:02:46 +0100 Subject: [PATCH 02/15] delete old code --- src/page-job-offers.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index b08d423..ca0ea38 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -1,6 +1,6 @@ div.grid-layer div.grid-layer-main.containerV - h1 New offers + h2 New offers span Here you can find and post offers sib-display#offers-list( data-src=`${sdn}/job-offers/`, From 7ef17b5fa8254745a42fae827a2f9d5bc0941c83 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Fri, 7 Dec 2018 13:03:44 +0100 Subject: [PATCH 03/15] delete old code --- src/styles/main.scss | 71 -------------------------------------------- 1 file changed, 71 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 7153236..676fb42 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -68,77 +68,6 @@ h4 { @extend %frame; padding: 1em; } -/* -#header { - background-color: $color-white; - color: $color-black; - //position: relative; - //@include border-shadow(bottom); - box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); - border: solid $color-white; - border-width: 1px 0; - display: flex; - //flex-grow: 0; - //flex-basis : 150px; - flex-shrink: 0; - align-items: center; - padding: 1em 0; - - > * { - padding: 0 1rem; - } -} - -#button-toggle { - @include icon('menu'); - display: none; - color: $color-black; - font-size: 2em; - padding: 0.72em; - cursor: pointer; -} - -#logo { - flex: 1 1 0; -} - -#notifications-button { - @include icon(bell); - font-size: 2em; - cursor: pointer; - list-style-type: none; -} - -#notifications { - position: absolute; - right: 0; - bottom: 0; - height: 0; - left: 0; - z-index: 1; - - > div { - position: absolute; - top: 0; - right: 0; - } -} - -#profile { - > * { - vertical-align: middle; - } - - img { - margin-right: 0.5em; - width: 48px; - height: 48px; - object-fit: cover; - object-position: center; - border-radius: 100%; - } -} -*/ .menu-notification { //flex-basis: 3em; From 237df22d667356dd65b30d8c8cb79acfcd2bbcf2 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Fri, 7 Dec 2018 17:25:05 +0100 Subject: [PATCH 04/15] wip --- src/dependencies.pug | 12 ++++++------ src/page-notifications.pug | 2 +- src/styles/header.scss | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index 93a27b5..711b96b 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -5,7 +5,7 @@ script(src="/lib/webcomponentsjs/webcomponents-loader.js") script(src="/lib/oidc-client.js") script( - src="/lib/sib-oidc/sib-oidc.js" + src="https://cdn.happy-dev.fr/sib-oidc/sib-oidc.js" data-authority=`${sdn}/openid/`, data-client_id=`${client_id}`, data-response_type='id_token token', @@ -29,11 +29,11 @@ link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,6 // Web components //- local -link(rel='import', href='/lib/sib-core/sib-display.html') -link(rel='import', href='/lib/sib-router/sib-router.html') -//- link(rel='import', href='/lib/sib-chat/sib-chat.html') +//- link(rel='import', href='/lib/sib-core/sib-display.html') + link(rel='import', href='/lib/sib-router/sib-router.html') + link(rel='import', href='/lib/sib-chat/sib-chat.html') //- cdn - link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html") - link(rel='import', href="https://cdn.happy-dev.fr/sib-router/sib-router.html") +link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html") +link(rel='import', href="https://cdn.happy-dev.fr/sib-router/sib-router.html") link(rel='import', href="https://cdn.happy-dev.fr/sib-chat/sib-chat.html") diff --git a/src/page-notifications.pug b/src/page-notifications.pug index eb38c1f..68b15af 100644 --- a/src/page-notifications.pug +++ b/src/page-notifications.pug @@ -2,6 +2,6 @@ div.frame h1 Notifications sib-display( - data-src=`${sdn}/notifications/` + bind-user data-fields='summary' ) \ No newline at end of file diff --git a/src/styles/header.scss b/src/styles/header.scss index 96f5a19..fbd0f0c 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -13,6 +13,7 @@ flex-shrink: 0; align-items: center; padding: 1em 0.4em; + position: relative; > * { padding: 0 1.8rem; @@ -47,7 +48,6 @@ } #notifications { - display: none; position: absolute; right: 0; bottom: 0; From a192db463c2d26e3f8d3515d49a3a613f6fa2c13 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Sun, 9 Dec 2018 19:56:56 +0100 Subject: [PATCH 05/15] right panel ok --- src/page-job-offers.pug | 16 ++++++------ src/styles/content.scss | 51 ------------------------------------- src/styles/index.scss | 1 + src/styles/main.scss | 11 +++++--- src/styles/right-panel.scss | 49 +++++++++++++++++++++++++++++++++++ 5 files changed, 65 insertions(+), 63 deletions(-) create mode 100644 src/styles/right-panel.scss diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index ca0ea38..466c96a 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 New offers - span Here you can find and post offers + h2 Nouvelles offres + span Tu trouveras ici des offres de missions sib-display#offers-list( data-src=`${sdn}/job-offers/`, data-fields='date, user-thumb, title, description, skills', @@ -16,11 +16,11 @@ div.grid-layer ) div.grid-layer-links.containerV sib-link(next="job-offer-create").containerH.containerCenter.action-link - div.containerV.fix.icon-plus - div.containerV.fix Post a new offer + div.icon-plus + div Poster une offre sib-link().containerH.containerCenter.how-link - div.containerV.fix.icon-idea - div.containerV.grow How To find a new offer + div.icon-idea + div.grow Comment trouver une offre ? sib-link().containerH.containerCenter.how-link - div.containerV.fix.icon-idea - div.containerV.grow How to set notification ? + div.icon-idea + div.grow Comment programmer des notifications ? diff --git a/src/styles/content.scss b/src/styles/content.scss index 7605e89..147acd6 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -452,57 +452,6 @@ hdapp-available { } } -.right-link { - padding: 0.5em; - margin-bottom: 1em; - margin-left: 1em; - flex-basis: content; - border-radius: 2em; - - div[class*="icon-"] { - margin-right: 1em; - } -} - -.how-link { - @extend .right-link; - background-color: $color-white; - color: $color-black; - flex-wrap: nowrap; - .icon-idea { - background-color: $color-yellow-light; - border-radius: 100%; - flex-shrink: 0; - flex-grow: 0; - justify-content: center; - align-items: center; - display: flex; - flex-direction: column; - width: 1.8em; - height: 1.8em; - //margin-right: 1em; - } -} - -.action-link { - @extend .right-link; - background-color: $color-yellow; - color: $color-white; - font-weight: bold; - text-transform: uppercase; - - .icon-plus { - flex-shrink: 0; - flex-grow: 0; - justify-content: center; - align-items: center; - display: flex; - - &:before { - //font-size: 1.3em; - } - } -} /* label { @extend h2; diff --git a/src/styles/index.scss b/src/styles/index.scss index 457c9b4..f76054e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -8,6 +8,7 @@ @import 'main'; @import 'form'; @import 'content'; +@import 'right-panel'; // @import 'members'; @import 'header'; diff --git a/src/styles/main.scss b/src/styles/main.scss index 676fb42..15cf084 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -49,11 +49,11 @@ h1 { } h2 { - font-size: 1.04em; + font-size: 20px; } h3 { - font-size: 0.84em; + font-size: 20px; } h4 { @@ -276,16 +276,19 @@ sib-trigger.back { .grid-layer{ display: grid; - grid-template-columns: [start]auto[middle]20em[end]; - grid-template-rows: [start]10em[middle]auto[end]; + font-size: 16px; + grid-template-columns: [start]auto[middle]25%[end]; + grid-template-rows: [start]13em[middle]auto[end]; } .grid-layer-main{ + background: green; grid-column-start: start; grid-column-end: end; grid-row-start: start; grid-row-end: end; } .grid-layer-links{ + background: pink; grid-column-start: middle; grid-column-end: end; grid-row-start: start; diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss new file mode 100644 index 0000000..fd97352 --- /dev/null +++ b/src/styles/right-panel.scss @@ -0,0 +1,49 @@ +.right-link { + padding: 0.5em; + margin-bottom: 1em; + margin-left: 5em; + flex-basis: auto; + border-radius: 2em; + + div[class*="icon-"] { + align-items: center; + display: flex; + flex-grow: 0; + flex-shrink: 0; + } +} + +.how-link { + @extend .right-link; + background-color: $color-white; + color: $color-black; + flex-wrap: nowrap; + .icon-idea { + background-color: $color-yellow-light; + border-radius: 100%; + justify-content: center; + margin-right: 0.7em; + //flex-direction: column; + width: 1.8em; + height: 1.8em; + //margin-right: 1em; + } +} + +.action-link { + @extend .right-link; + background-color: $color-yellow; + color: $color-white; + font-weight: bold; + text-transform: uppercase; + + .icon-plus { + font-size: 20px; + justify-content: center; + margin: 0.3em 0.3em 0.3em 0; + + &:before { + //font-size: 1.3em; + } + } +} \ No newline at end of file From 4c25b87020fc5e3c6a7937088853cdc1ad365d5c Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Mon, 10 Dec 2018 12:07:14 +0100 Subject: [PATCH 06/15] chevrons ok --- src/menu.pug | 6 +++--- src/styles/content.scss | 6 ++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/menu.pug b/src/menu.pug index 15d2566..9b766ac 100644 --- a/src/menu.pug +++ b/src/menu.pug @@ -17,7 +17,7 @@ nav#navbar div.menu-wrapper div.menu div.menu-chevron - div.menu-icon.icon-arrow-down + div.menu-icon.icon-arrow-up div.menu-label Projects div.menu-icon.icon-folder-alt sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`) @@ -31,7 +31,7 @@ nav#navbar div.menu-wrapper div.menu div.menu-chevron - div.menu-icon.icon-arrow-down + div.menu-icon.icon-arrow-up div.menu-label Groups div.menu-icon.icon-globe sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`) @@ -45,7 +45,7 @@ nav#navbar div.menu-wrapper div.menu div.menu-chevron - div.menu-icon.icon-arrow-down + div.menu-icon.icon-arrow-up div.menu-label Chat div.menu-icon.icon-envelope-letter sib-route(hidden, name='chat', id-prefix=`${sdn}/members/`) diff --git a/src/styles/content.scss b/src/styles/content.scss index 147acd6..e0c8f23 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -324,6 +324,10 @@ hdapp-available { grid-template-columns: 50% 50%; grid-template-rows: 3.5em 3.5em; + sib-form-label-text { + display: flex; + } + label { flex-basis: 5em; flex-shrink: 0; @@ -332,6 +336,7 @@ hdapp-available { input, select { flex-grow: 1; min-width: 0; + box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); } input[type="submit"] { @@ -460,3 +465,4 @@ label { } } */ + From 08c3b0bff8deda59fe29675a536d20dbe7c3fe1f Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Mon, 10 Dec 2018 15:31:25 +0100 Subject: [PATCH 07/15] search fields: wip --- src/page-job-offers.pug | 3 ++- src/styles/content.scss | 20 +++++++++++++------- src/styles/main.scss | 20 ++++++++++++++++++++ 3 files changed, 35 insertions(+), 8 deletions(-) diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index 466c96a..e31233e 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -11,7 +11,8 @@ div.grid-layer set-date='closingDate, creationDate', widget-closingDate='hdapp-closing-date', set-content='title, description', - search-fields='content,skills,open' + search-fields='content,skills,open', + label-content='contenu', search-range-skills=`${sdn}/skills/`, ) div.grid-layer-links.containerV diff --git a/src/styles/content.scss b/src/styles/content.scss index e0c8f23..9a9c94a 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -320,23 +320,29 @@ hdapp-available { } } #offers-list > sib-form > form { + //display: grid; + //grid-template-columns: 50% 50%; + //grid-template-rows: 3.5em 3.5em; + background-color: orangered; display: grid; - grid-template-columns: 50% 50%; - grid-template-rows: 3.5em 3.5em; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; sib-form-label-text { display: flex; + flex-direction: column; } label { - flex-basis: 5em; - flex-shrink: 0; + //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); + //flex-grow: 1; + //min-width: 0; + //box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); } input[type="submit"] { diff --git a/src/styles/main.scss b/src/styles/main.scss index 15cf084..de77aa3 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -294,3 +294,23 @@ sib-trigger.back { grid-row-start: start; grid-row-end: middle; } + +sib-form-label-text { + background: aqua; +} + +form { + background-color: orangered; + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; + + label { + display: block; + } + + input { + padding: 1em; + margin-top: 1em; + } +} From 0069c27fe28644f6777e3b51a2c7878d417a2dae Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Mon, 10 Dec 2018 16:12:21 +0100 Subject: [PATCH 08/15] select: wip --- src/styles/main.scss | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/styles/main.scss b/src/styles/main.scss index de77aa3..e91a133 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -295,6 +295,38 @@ sib-trigger.back { grid-row-end: middle; } + + + + +#offers-list > sib-form > form { + select { + display: inline-block; + font: inherit; + line-height: 1.5em; + padding: 0.5em 3.5em 0.5em 1em; + + margin: 0; + 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 5px, + 5px 5px, + 1px 1.5em; + background-repeat: no-repeat; + } +} + sib-form-label-text { background: aqua; } From 6dfd234ee99a6d7b2eb974ff4033d950823220ab Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Mon, 10 Dec 2018 17:39:22 +0100 Subject: [PATCH 09/15] select and search fields seem ok --- src/styles/content.scss | 9 +++------ src/styles/form.scss | 4 ++-- src/styles/main.scss | 16 +++++++--------- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/styles/content.scss b/src/styles/content.scss index 9a9c94a..e13ac3d 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -320,13 +320,10 @@ hdapp-available { } } #offers-list > sib-form > form { - //display: grid; - //grid-template-columns: 50% 50%; - //grid-template-rows: 3.5em 3.5em; background-color: orangered; - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 20px; + //display: grid; + //grid-template-columns: 1fr 1fr; + //grid-gap: 20px; sib-form-label-text { display: flex; diff --git a/src/styles/form.scss b/src/styles/form.scss index cee8deb..b3bf08a 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -107,8 +107,8 @@ sib-form { } sib-form-label-text,sib-form-dropdown{ - display: flex; - flex-wrap: nowrap; + //display: flex; + //flex-wrap: nowrap; } select{ diff --git a/src/styles/main.scss b/src/styles/main.scss index e91a133..995636a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -301,12 +301,11 @@ sib-trigger.back { #offers-list > sib-form > form { select { + background: white; display: inline-block; - font: inherit; line-height: 1.5em; - padding: 0.5em 3.5em 0.5em 1em; + padding: 0.5em 12.5em 0.5em 1em; - margin: 0; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; @@ -320,8 +319,8 @@ sib-trigger.back { calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: - 5px 5px, - 5px 5px, + 5px 6px, + 5px 6px, 1px 1.5em; background-repeat: no-repeat; } @@ -334,15 +333,14 @@ sib-form-label-text { form { background-color: orangered; display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 20px; + grid-template-columns: 33% auto; + grid-gap: 24px; label { display: block; } - input { - padding: 1em; + input, select { margin-top: 1em; } } From 535f5d07f7b4420dbbc5517f0a4de3f8680ef9e9 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Tue, 11 Dec 2018 13:42:53 +0100 Subject: [PATCH 10/15] filters section almost ok --- src/page-job-offers.pug | 10 +++---- src/styles/content.scss | 27 ------------------- src/styles/filters.scss | 56 +++++++++++++++++++++++++++++++++++++++ src/styles/form.scss | 14 ++-------- src/styles/index.scss | 1 + src/styles/main.scss | 56 ++------------------------------------- src/styles/variables.scss | 1 + 7 files changed, 67 insertions(+), 98 deletions(-) create mode 100644 src/styles/filters.scss 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; From 024857640bc99654458d0dddf21c193acd819130 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Tue, 11 Dec 2018 14:29:59 +0100 Subject: [PATCH 11/15] first offer card top aligned --- src/styles/content.scss | 38 -------------------------------------- src/styles/filters.scss | 6 ------ src/styles/index.scss | 1 + src/styles/job-offers.scss | 38 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 39 insertions(+), 44 deletions(-) create mode 100644 src/styles/job-offers.scss diff --git a/src/styles/content.scss b/src/styles/content.scss index 645225b..7ee82b0 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -7,28 +7,6 @@ // //float: right; // } -#offers-list { - > div { - > sib-display { - display: block; - margin: 1em 0; - @extend %frame; - padding: 2em; - /*&:nth-child(odd) { - background-color: $color-grey-light; - }*/ - sib-display-div[name='title'] { - display: block; - @extend h2; - } - - label { - display: none; - } - } - } -} - [name='user-thumb'] { display: flex; align-items: center; @@ -304,22 +282,6 @@ hdapp-available { } } -#offers-list { - @extend .grid-layer; - > sib-form { - grid-column-start: start; - grid-column-end: middle; - grid-row-start: start; - grid-row-end: middle; - } - > div { - grid-column-start: start; - grid-column-end: end; - grid-row-start: middle; - grid-row-end: end; - } -} - #member-profile, #profiles-list { ul { diff --git a/src/styles/filters.scss b/src/styles/filters.scss index 14d55a8..8737a6f 100644 --- a/src/styles/filters.scss +++ b/src/styles/filters.scss @@ -5,7 +5,6 @@ grid-template-columns: 33% auto; padding-bottom: 3em; - label { display: block; } @@ -49,8 +48,3 @@ flex-direction: column; } } - -# - - - diff --git a/src/styles/index.scss b/src/styles/index.scss index bc53b09..ecd5f85 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -10,6 +10,7 @@ @import 'content'; @import 'filters'; @import 'right-panel'; +@import 'job-offers'; // @import 'members'; @import 'header'; diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss new file mode 100644 index 0000000..2d6d63b --- /dev/null +++ b/src/styles/job-offers.scss @@ -0,0 +1,38 @@ +#offers-list { + @extend .grid-layer; + > sib-form { + grid-column-start: start; + grid-column-end: middle; + grid-row-start: start; + grid-row-end: middle; + } + + > div { + grid-column-start: start; + grid-column-end: end; + grid-row-start: middle; + grid-row-end: end; + + &:first-of-type { + margin-top: 3em; + } + + > sib-display { + display: block; + margin: 1em 0; + @extend %frame; + padding: 2em; + /*&:nth-child(odd) { + background-color: $color-grey-light; + }*/ + sib-display-div[name='title'] { + display: block; + @extend h2; + } + + label { + display: none; + } + } + } +} \ No newline at end of file From 5a6b3f8398a92c8963a785f1f93aa9b5fe8b9905 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Tue, 11 Dec 2018 15:40:37 +0100 Subject: [PATCH 12/15] filters left align ok --- src/styles/form.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/form.scss b/src/styles/form.scss index 3bf154e..93297b5 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -13,9 +13,9 @@ padding: 1em; } sib-display sib-form form { - margin: -0.5em; + //margin: -0.5em; > * { - margin: 0.5em; + margin-top: 0.5em; } } sib-form.block { From c8564fb76c46e329f217c1137e7a0781294f1d67 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Tue, 11 Dec 2018 15:42:51 +0100 Subject: [PATCH 13/15] platform specific styling to inputs and select are removed --- src/styles/filters.scss | 4 +--- src/styles/main.scss | 5 +++++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/styles/filters.scss b/src/styles/filters.scss index 8737a6f..d802d40 100644 --- a/src/styles/filters.scss +++ b/src/styles/filters.scss @@ -1,7 +1,7 @@ #offers-list > sib-form > form { border-bottom: 1px solid $color-grey1; display: grid; - grid-gap: 0px 24px; + grid-gap: 0px 30px; grid-template-columns: 33% auto; padding-bottom: 3em; @@ -25,8 +25,6 @@ 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%), diff --git a/src/styles/main.scss b/src/styles/main.scss index d33da27..f0250be 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -60,6 +60,11 @@ h4 { font-size: 0.68em; } +input, select { + -webkit-appearance: none; + -moz-appearance: none; +} + .debug { outline: 2px dotted red; } From 7f81f4b7ac35feb9663d9716a7a8c898a1f8e5f5 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Tue, 11 Dec 2018 21:44:03 +0100 Subject: [PATCH 14/15] wip --- src/page-job-offers.pug | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index c7bfea1..1079be2 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -6,14 +6,14 @@ div.grid-layer data-src=`${sdn}/job-offers/`, data-fields='date, user-thumb, title, description, skills', widget-skills='sib-display-lookuplist', - set-user-thumb='author.member.avatar, author.first_name, author.last_name' + set-user-thumb='author.member.avatar, author.first_name, author.last_name', widget-author.member.avatar='sib-display-img', set-date='closingDate, creationDate', widget-closingDate='hdapp-closing-date', set-content='title, description', search-fields='content,skills,open', label-content='contenu', - search-range-skills=`${sdn}/skills/`, + search-range-skills=`${sdn}/skills/` ) div.grid-layer-links.containerV sib-link(next="job-offer-create").containerH.containerCenter.action-link From 54310fe62784603b4d5ae1c65f415ae6803d7641 Mon Sep 17 00:00:00 2001 From: Gaelle Morin Date: Wed, 12 Dec 2018 11:13:03 +0100 Subject: [PATCH 15/15] wip --- src/page-job-offers.pug | 6 +++--- src/styles/filters.scss | 3 +-- src/styles/job-offers.scss | 23 +++++++++++++++++++++-- src/styles/variables.scss | 1 + 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index 1079be2..609fcab 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -4,15 +4,15 @@ div.grid-layer 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', + data-fields='date, user-thumb, title, description, roles, skills', widget-skills='sib-display-lookuplist', - set-user-thumb='author.member.avatar, author.first_name, author.last_name', + set-user-thumb='author.member.avatar, author.first_name, author.last_name, author.groups', widget-author.member.avatar='sib-display-img', set-date='closingDate, creationDate', + set-creation='creationDate', widget-closingDate='hdapp-closing-date', set-content='title, description', search-fields='content,skills,open', - label-content='contenu', search-range-skills=`${sdn}/skills/` ) div.grid-layer-links.containerV diff --git a/src/styles/filters.scss b/src/styles/filters.scss index d802d40..099bdaf 100644 --- a/src/styles/filters.scss +++ b/src/styles/filters.scss @@ -21,11 +21,10 @@ select { background: white; + box-sizing: border-box; display: inline-block; padding: 0.5em 12.5em 0.5em 1em; - box-sizing: border-box; - background-image: linear-gradient(45deg, transparent 50%, $color-grey 50%), linear-gradient(135deg, $color-grey 50%, transparent 50%), diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss index 2d6d63b..e084221 100644 --- a/src/styles/job-offers.scss +++ b/src/styles/job-offers.scss @@ -18,16 +18,16 @@ } > sib-display { + @extend %frame; display: block; margin: 1em 0; - @extend %frame; padding: 2em; /*&:nth-child(odd) { background-color: $color-grey-light; }*/ sib-display-div[name='title'] { - display: block; @extend h2; + display: block; } label { @@ -35,4 +35,23 @@ } } } +} + +[name='user-thumb'] { + align-items: center; + color: $color-black-light; + display: flex; + font-weight: 600; + margin: -0.25em; + + > * { + margin: 0.25em; + } + + sib-display-img { + border-radius: 100%; + height: 2.5em; + overflow: hidden; + width: 2.5em; + } } \ No newline at end of file diff --git a/src/styles/variables.scss b/src/styles/variables.scss index b16b60a..bd4a04a 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,6 +1,7 @@ // colors $color-white: #fff; $color-black: #36383b; +$color-black-light: #4a4a4a; $color-grey1: #d7dbe0; $color-grey: #898f95; $color-grey-mid: #abaaba;