Merge branch 'gm-job-offers'

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

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

src/page-job-offers.pug

@@ -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-fields='content,skills,open',
-      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
-      div.containerV.fix.icon-plus
+      div.icon-plus
-      div.containerV.fix Post a new offer
+      div Post a new offer
     sib-link().containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
+      div.icon-idea
-      div.containerV.grow How To find a new offer
+      div.grow How To find a new offer?
     sib-link().containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
+      div.icon-idea
-      div.containerV.grow How to set notification ?
+      div.grow How to set notification?

src/page-notifications.pug

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

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,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 {
   }
 }
 */
+

src/styles/filters.scss

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

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

src/styles/header.scss

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

src/styles/index.scss

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

src/styles/job-offers.scss

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

src/styles/main.scss

@@ -48,8 +48,7 @@ h1 {
   font-size: 1.24em;
 }
 
-h2 {
+h2 {  font-size: 20px;
-  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{
+.grid-layer-main {
-  background: green;
   grid-column-start: start;
   grid-column-end: end;
   grid-row-start: start;
   grid-row-end: end;
 }
-.grid-layer-links{
+.grid-layer-links {
-  background: pink;
   grid-column-start: middle;
   grid-column-end: end;
   grid-row-start: start;

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

src/styles/variables.scss

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