feature(job-offers): sib-job-board component added

job-offers pug, css and dependancies file are updated.

src/dependencies.pug

@@ -13,6 +13,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
 //- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
 //- script(type="module" src="/lib/sib-directory/sib-directory.js")
+//- script(type="module" src="/lib/sib-joboffers/sib-joboffers.js")
 
 //- CDN
 script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
@@ -21,4 +22,4 @@ script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1")
 script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2")
 script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1")
-
+script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.1")

src/page-job-offers.pug

@@ -1,48 +1,11 @@
-div.job-offers__main
-
-  include templates/hd-user-avatar.pug
-  include templates/template-groups.pug
-  include templates/template-skills.pug
-  include templates/template-joboffers-filter.pug
-  
-  sib-widget(name='hd-contact-author')
-    template
-      p ${JSON.stringify(value)}
-      sib-link(next='messages', data-src="${value.profile['@id']}") Send a message
-      
-  div.job-offers__content
-    h1 New offers
-      span Here you can find and post offers
-    sib-display#offers-list(
-      data-src=`${sdn}/sources/job-offers/`,
-      data-fields='user-thumb, creationDate, title, description, skills, author',
-      
-      set-user-thumb='author.account.picture, author.first_name, author.groups',
-      widget-author.account.picture='hd-user-avatar',
-      widget-author.groups='groups-name',
-      multiple-author.groups,
-
-      widget-skills='skills-name',
-      multiple-skills,
-      
-      widget-author='hd-contact-author',
-      
-      search-range-skills=`${sdn}/skills/`,
-      search-fields='content, open, skills',
-      
-      set-content='title, description',
-      
-      search-label-content='Search by keyword',
-      search-label-skills='Search by skills',
-
-      search-widget-content='sib-form-placeholder-text',
-      search-widget-skills='sib-form-placeholder-dropdown',
-      search-widget-open='joboffers-filter'
+.job-offers__container
+  sib-job-board(
+    data-src=`${sdn}/job-offers/`,
+    range-skills=`${sdn}/skills/`
   )
 
   div.job-offers__newoffer
-    template#groups-list-template
-      p ${value}
     sib-link(next="job-offer-create").plus-button
       div.icon-plus
       div Post a new offer
+

src/styles/components/filters.scss

@@ -52,7 +52,7 @@
   }
 }
 
-#offers-list, #members-list {
+.job-board, #members-list {
   sib-form {
     @extend %filters;
   }

src/styles/layout/job-offers/job-offers.scss

@@ -1,8 +1,8 @@
-.job-offers__main {
+.job-offers__container {
   @extend %grid-layer;
 }
 
-.job-offers__content {
+sib-job-board {
   @extend %grid-layer-main;
   @extend %containerV;
 }
@@ -34,7 +34,7 @@
     }
   }
 
-  #offers-list {
+  .job-board__list {
     @extend %grid-layer;
 
     >sib-form {
@@ -87,7 +87,7 @@
             }
           }
 
-          hd-user-avatar {
+          author-avatar {
             background-color: $color-0-0-100;
             border-radius: 50%;
             height: 4.25rem;
@@ -131,7 +131,7 @@
           }
         }
 
-        hd-contact-author {
+        author-contact {
           color: $color-244-73-62;
           font-size: 1.3rem;
           float: right;
@@ -170,5 +170,4 @@
       }
     }
   }
-
 }