ui : job-offers & members page update

src/config.integration.pug

@@ -1,4 +1,4 @@
-- var sdn = process.env.SDN || 'staging-app.happy-dev.fr'
+- var sdn = process.env.SDN || 'https://test-paris.happy-dev.fr'
 - var cdn = process.env.CDN || 'staging-app.happy-dev.fr'
 - var xmpp = 'https://jabber.happy-dev.fr/http-bind/'
 - var client_id = 833925

src/page-job-offers.pug

@@ -1,8 +1,8 @@
-div
+div.containerH
-  sib-trigger(next="job-offer-create" class="new-job-offer") Post a new offer
+  div.containerV.grow
     h1 New offers
       span Here you can find and post offers
-  sib-display#offers-list.limiter(
+    sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
       data-fields='date, user-thumb, title, description, skills',
       widget-skills='sib-display-lookuplist',
@@ -13,3 +13,17 @@ div
       set-searchset='title, description, skills',
       search-fields='searchset'
     )
+  div.containerV.fix
+
+    div.containerH.containerCenter.action-link
+      div.containerV.fix.icon-plus
+      div.containerV.fix
+        sib-trigger(next="job-offer-create") Post a new offer
+    div.containerH.containerCenter.how-link
+      div.containerV.fix.icon-idea
+      div.containerV.grow
+        sib-trigger() How To find a new offer
+    div.containerH.containerCenter.how-link
+      div.containerV.fix.icon-idea
+      div.containerV.grow
+        sib-trigger() How to set notification ?

src/page-members.pug

@@ -1,11 +1,13 @@
-div
+div.containerH
+  div.containerV.grow
     h1 Members
     sib-display#profiles-list(
       data-src=`${sdn}/members/`,
-    data-fields='header, infos'
+      data-fields='header, infos, group, role'
       set-header='avatar, user, pseudonym, bio',
       set-infos='cell, roles, user.email, foaf:homepage, skills',
       set-pseudonym='before-pseudo, pseudo',
+      label-skills='skill'
       value-before-pseudo='@',
       widget-avatar='sib-display-img',
       widget-user='hdapp-userinfo',
@@ -15,7 +17,7 @@ div
       widget-roles='sib-display-lookuplist',
       widget-skills='sib-display-lookuplist',
       set-searchset='pseudo',
-    search-fields='searchset',
+      search-fields='pseudo, skills, roles',
       next='member')
 
     //- sib-display#profiles-list(
@@ -33,3 +35,12 @@ div
       set-searchset='last_name',
       search-fields='searchset',
       next='member')
+  div.containerV.fix
+    div.containerH.containerCenter.how-link
+      div.containerV.fix.icon-idea
+      div.containerV.grow
+        sib-trigger() How To...
+    div.containerH.containerCenter.how-link
+      div.containerV.fix.icon-idea
+      div.containerV.grow
+        sib-trigger() How to complete my profile ?

src/styles/content.scss

@@ -1,9 +1,13 @@
 // job offers
-.new-job-offer {
+// .new-job-offer {
-  @extend %button;
+//   @extend %button;
-  text-transform: uppercase;
+//   text-transform: uppercase;
-  float: right;
+//   margin-left: 1em;
-}
+//   margin-bottom: 1em
+//   //float: right;
+// }
+
+
 #offers-list {
   > div {
     > sib-display {
@@ -280,6 +284,61 @@ hdapp-available {
     }
   }
 }
+
+
+.right-link{
+  padding: 0.5em;
+  margin-bottom: 1em;
+  margin-left: 1em;
+  flex-basis: content;
+  border-radius: 2em;
+  sib-trigger{
+    padding-left: 1em;
+  }
+}
+
+.how-link{
+  @extend .right-link;
+  background-color: $color-white;
+  color: $color-black;
+  .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;
+  }
+  sib-trigger{
+    padding-left: 1em;
+    width: 12em;
+  }
+}
+
+.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;

src/styles/icons.scss

@@ -248,6 +248,7 @@ $icons: (
   social-vkontakte: '\e618',
   event: '\e619',
   social-steam: '\e620',
+  idea:'\e076'
 );
 
 

src/styles/main.scss

@@ -5,8 +5,8 @@
 }
 
 *,
-*::before,
+*::after,
-*::after {
+*::before {
   //  box-sizing: inherit;
 }
 
@@ -17,9 +17,6 @@ html {
   background-color: $color-grey-light;
   color: $color-grey;
 }
-
-
-
 // body {
 //   height: 100%;
 //   display:flex;
@@ -36,9 +33,11 @@ h6 {
   font-weight: 600;
   padding: 0;
   margin: 0.67em 0;
+
   span {
     font-weight: 400;
     padding-left: 0.5em;
+
     &:before {
       content: '// ';
     }
@@ -48,12 +47,15 @@ h6 {
 h1 {
   font-size: 1.24em;
 }
+
 h2 {
   font-size: 1.04em;
 }
+
 h3 {
-  font-size: .84em;
+  font-size: 0.84em;
 }
+
 h4 {
   font-size: 0.68em;
 }
@@ -67,13 +69,12 @@ h4 {
   padding: 1em;
 }
 
-
 #header {
   background-color: $color-white;
   color: $color-black;
   //position: relative;
   //@include border-shadow(bottom);
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
   border: solid $color-white;
   border-width: 1px 0;
   display: flex;
@@ -82,6 +83,7 @@ h4 {
   flex-shrink: 0;
   align-items: center;
   padding: 1em 0;
+
   > * {
     padding: 0 1rem;
   }
@@ -97,7 +99,7 @@ h4 {
 }
 
 #logo {
-  flex: 1 1 0px;
+  flex: 1 1 0;
 }
 
 #notifications-button {
@@ -114,11 +116,11 @@ h4 {
   height: 0;
   left: 0;
   z-index: 1;
+
   > div {
     position: absolute;
     top: 0;
     right: 0;
-
   }
 }
 
@@ -126,6 +128,7 @@ h4 {
   > * {
     vertical-align: middle;
   }
+
   img {
     margin-right: 0.5em;
     width: 43px;
@@ -136,10 +139,12 @@ h4 {
   }
 }
 
-
 .layer {
   position: absolute;
-  bottom:0;top:0;right:0;left:0;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  left: 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -164,39 +169,46 @@ h4 {
   max-width: 650px;
 }
 /* sub menu (right menu) */
-
 #mainContainer > div {
   display: flex;
   flex-direction: row-reverse;
   align-items: flex-start;
+
   > sib-router {
     font-family: monospace;
     color: $color-black;
     display: block;
     background-color: $color-grey-light2;
+
     sib-route {
       display: block;
       cursor: pointer;
+
       > div {
         position: relative;
         padding: 1.5em 3em;
         border-bottom: 1px solid $color-grey;
       }
+
       &:hover {
         background-color: $color-grey;
       }
+
       &[active] {
         font-weight: bold;
         background-color: $color-black;
         color: $color-yellow;
+
         > div:before {
           opacity: 1;
           transform: translateX(-150%);
           transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
       }
+
       > div {
         @include icon(arrow-left);
+
         &:before {
           position: absolute;
           transform: translateX(-50%);
@@ -205,9 +217,10 @@ h4 {
       }
     }
   }
+
   > div {
     margin: 2.6em;
-    flex: 1 1 0px;
+    flex: 1 1 0;
   }
 }
 
@@ -219,8 +232,8 @@ h4 {
   pointer-events: none;
 }
 
-#search-icon,
+#close-search-icon,
-#close-search-icon {
+#search-icon {
   position: absolute;
   right: 0.4em;
   top: 50%;
@@ -228,18 +241,22 @@ h4 {
   margin: auto;
   display: block;
 }
+
 #search-input {
   -webkit-appearance: textfield;
   border-radius: 10em;
   padding: 0.4em 0.8em;
   border: 1px solid $color-grey;
+
   & ~ #close-search-icon {
     opacity: 0;
   }
+
   &:focus {
     & ~ #close-search-icon {
       opacity: 1;
     }
+
     & ~ #search-icon {
       visibility: hidden;
     }
@@ -256,3 +273,28 @@ sib-trigger.back {
   @include icon('arrow-left');
   @extend h1;
 }
+
+.containerH {
+  display: flex;
+}
+
+.containerV {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.grow {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.fix {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.containerCenter {
+  justify-content: center;
+  align-items: center;
+}