autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'gm-job-offers'

Browse Source
This commit is contained in:
Gaelle Morin 2018-12-12 12:20:32 +01:00
commit b8256ff077
13 changed files with 190 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/dependencies.pug
View File

@ -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,9 +29,9 @@ 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-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-chat/sib-chat.html')
//- cdn
link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html")

6
src/menu.pug
View File

@ -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='member-chat', id-prefix=`${sdn}/members/`)

21
src/page-job-offers.pug
View File

@ -4,23 +4,24 @@ 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'
search-range-skills=`${sdn}/skills/`,
search-fields='content,skills,open',
search-range-skills=`${sdn}/skills/`
)
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 Post a new offer
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 How To find a new offer?
sib-link().containerH.containerCenter.how-link
div.containerV.fix.icon-idea
div.containerV.grow How to set notification ?
div.icon-idea
div.grow How to set notification?

2
src/page-notifications.pug
View File

@ -2,6 +2,6 @@ div.frame
h1 Notifications
sib-display(
data-src=`${sdn}/notifications/`
bind-user
data-fields='summary'
)

109
src/styles/content.scss
View File

@ -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,41 +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;
}
}
#offers-list > sib-form > form {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 3.5em 3.5em;
label {
flex-basis: 5em;
flex-shrink: 0;
}
input, select {
flex-grow: 1;
min-width: 0;
}
input[type="submit"] {
display: none;
}
}
#member-profile,
#profiles-list {
ul {
@ -465,57 +408,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;
@ -524,3 +416,4 @@ label {
}
}
*/

47
src/styles/filters.scss Normal file
View File

@ -0,0 +1,47 @@
#offers-list > sib-form > form {
border-bottom: 1px solid $color-grey1;
display: grid;
grid-gap: 0px 30px;
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;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 12.5em 0.5em 1em;
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;
}
}

18
src/styles/form.scss
View File

@ -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 {
@ -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)
}

1
src/styles/header.scss
View File

@ -13,6 +13,7 @@
flex-shrink: 0;
align-items: center;
padding: 1em 0.4em;
position: relative;
> * {
padding: 0 1.8rem;

3
src/styles/index.scss
View File

@ -8,6 +8,9 @@
@import 'main';
@import 'form';
@import 'content';
@import 'filters';
@import 'right-panel';
@import 'job-offers';
// @import 'members';
@import 'header';

57
src/styles/job-offers.scss Normal file
View File

@ -0,0 +1,57 @@
#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 {
@extend %frame;
display: block;
margin: 1em 0;
padding: 2em;
/*&:nth-child(odd) {
background-color: $color-grey-light;
}*/
sib-display-div[name='title'] {
@extend h2;
display: block;
}
label {
display: none;
}
}
}
}
[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;
}
}

79
src/styles/main.scss
View File

@ -48,8 +48,7 @@ h1 {
font-size: 1.24em;
}
h2 {
font-size: 20px;
h2 { font-size: 20px;
}
h3 {
@ -68,77 +67,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;
@ -347,18 +275,17 @@ sib-trigger.back {
.grid-layer{
display: grid;
font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end];
grid-template-rows: [start]10em[middle]auto[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;

49
src/styles/right-panel.scss Normal file
View File

@ -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;
}
}
}

2
src/styles/variables.scss
View File

@ -1,6 +1,8 @@
// colors
$color-white: #fff;
$color-black: #36383b;
$color-black-light: #4a4a4a;
$color-grey1: #d7dbe0;
$color-grey: #898f95;
$color-grey-mid: #abaaba;
$color-grey-light4: #b4b9c0;