ui : members & job-offers form search

src/page-groups.pug

@@ -1,7 +1,7 @@
 #groups
   sib-display#groups-list(
     data-src=`${sdn}/channels/`,
-    data-fields='name, description', 
+    data-fields='name, description',
     search-fields='name, description',
     next='group'
   )

src/page-job-offers.pug

@@ -1,20 +1,5 @@
-div.containerH
-  div.containerV.grow
-    h1 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',
-      widget-skills='sib-display-lookuplist',
-      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-searchset='title, description, skills',
-      search-fields='searchset'
-    )
+div.containerH.reverse
   div.containerV.fix
-
     div.containerH.containerCenter.action-link
       div.containerV.fix.icon-plus
       div.containerV.fix
@@ -27,3 +12,17 @@ div.containerH
       div.containerV.fix.icon-idea
       div.containerV.grow
         sib-trigger() How to set notification ?
+  div.containerV.grow
+    h1 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',
+      widget-skills='sib-display-lookuplist',
+      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'
+    )

src/page-members.pug

@@ -1,4 +1,13 @@
-div.containerH
+div.containerH.reverse
+  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 ?
   div.containerV.grow
     h1 Members
     sib-display#profiles-list(
@@ -16,8 +25,8 @@ div.containerH
       widget-cell='hdapp-usercell',
       widget-roles='sib-display-lookuplist',
       widget-skills='sib-display-lookuplist',
-      set-searchset='pseudo',
-      search-fields='pseudo, skills, roles',
+      set-name='pseudo,user.first_name',
+      search-fields='name, skills, roles',
       next='member')
 
     //- sib-display#profiles-list(
@@ -35,12 +44,3 @@ div.containerH
       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

@@ -226,6 +226,38 @@ hdapp-available {
     grid-gap: 1em;
   }
 }
+#profiles-list>sib-form>form{
+  display: grid;
+  grid-template-columns: 50% 50%;
+  label{
+    flex-basis :5em;
+    flex-shrink: 0;
+  }
+  input{
+    flex-grow:1;
+    min-width:0;
+  }
+  input[type="submit"]{
+    display: none
+  }
+}
+
+#offers-list>sib-form>form{
+  display: grid;
+  grid-template-columns: 50% 50%;
+  label{
+    flex-basis :5em;
+    flex-shrink: 0;
+  }
+  input{
+    flex-grow:1;
+    min-width:0;
+  }
+  input[type="submit"]{
+    display: none
+  }
+}
+
 #member-profile,
 #profiles-list {
   ul {

src/styles/form.scss

@@ -105,3 +105,8 @@ sib-form {
     }
   }
 }
+
+sib-form-label-text{
+  display: flex;
+  flex-wrap: nowrap;
+}

src/styles/main.scss

@@ -276,6 +276,7 @@ sib-trigger.back {
 
 .containerH {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .containerV {
@@ -298,3 +299,7 @@ sib-trigger.back {
   justify-content: center;
   align-items: center;
 }
+
+.reverse{
+  flex-direction: row-reverse;
+}