ui : temp commit to test template

src/index.pug

@@ -25,7 +25,7 @@ html(lang="en")
             include page-job-offers.pug
           #job-offer-create(hidden)
             include page-job-offer-create.pug
-          //-#projects(hidden)
+          #projects(hidden)
             include page-projects.pug
           #project(hidden)
             include page-project.pug

src/page-job-offer-create.pug

@@ -1,4 +1,5 @@
-#job-create
+//#job-offer-create
+div
   h1 New job offer
   .form-view
     sib-form.block(

src/page-job-offers.pug

@@ -1,17 +1,14 @@
 div.containerH.reverse
   div.containerV.fix
-    div.containerH.containerCenter.action-link
+    sib-link(next="job-offer-create").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 Post a new offer
+    sib-link().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.grow How To find a new offer
+    sib-link().containerH.containerCenter.how-link
       div.containerV.fix.icon-idea
-      div.containerV.grow
-        sib-trigger() How to set notification ?
+      div.containerV.grow How to set notification ?
   div.containerV.grow
     h1 New offers
       span Here you can find and post offers

src/page-project-edit.pug

@@ -1,7 +1,7 @@
 h1 Edit project
   //- sib-display(data-fields="name" bind-resources)]
 .form-view
-  sib-form.block(
+  sib-form(
     range-client=`${sdn}/clients/`,
     range-team=`${sdn}/members/`,
     data-fields=`name, number, client, description, team, jabberRoom, foaf:jabberID`,

src/page-project-profile.pug

@@ -1,13 +1,16 @@
 .frame
+  template#client-template
+    div.toto ${value.address}
   sib-display(
-    data-fields='title, label-description, description, client',
-    set-title='number, client.name, name',
-    set-client='label-client, client.name, client.logo, client.address',
-    value-label-description="Description:"
-    value-label-client="Client:"
-    widget-client.logo='sib-display-img',
-    widget-client='hdapp-client',
-    widget-team='sib-display-lookuplist',
+    data-fields='client',
+    template-client='client-template',
+    bind-resources,
+  )
+  sib-display(
+    data-fields='client.logo,label-description, description, label-client, client',
+    value-label-description="Description:",
+    value-label-client="Client:",
+    template-client='client-template',
     bind-resources,
   )
 

src/page-project.pug

@@ -1,4 +1,4 @@
-sib-router#project-router(default-route='project-chat')
+sib-router#project-router(default-route='project-profile')
   sib-route(name='project-chat')
     div Chat
   sib-route(name='project-profile')

src/page-projects.pug

@@ -1,4 +1,5 @@
-#projects
+//#projects
+div
   h1 Projects
   sib-display(
     data-src=`${sdn}/projects/`,

src/scripts/hd-widgets.js

@@ -55,15 +55,24 @@ document.addEventListener('WebComponentsReady', function(event) {
 
   class HDAppClient extends SIBWidget {
     get template() {
-      return `<img name="${this.name}" src="${this.value.logo}"/>`;
+
+      return `<div>${this.value}</div>`;
     }
 
     render() {
-      store.get(this.value).then(value => {
-        this._value = value;
-        this.innerHTML = this.template;
-      });
+      this.innerHTML = this.template;
     }
+
+    // get template() {
+    //   return `<img name="${this.name}" src="${this.value.logo}"/>`;
+    // }
+    //
+    // render() {
+    //   store.get(this.value).then(value => {
+    //     this._value = value;
+    //     this.innerHTML = this.template;
+    //   });
+    // }
   }
   customElements.define('hdapp-client', HDAppClient);
 

src/styles/content.scss

@@ -318,14 +318,32 @@ hdapp-available {
 }
 
 
+#project-edit form{
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  >*{
+      display: flex;
+      margin-bottom: 1em;
+      label{
+        flex-basis : 8em;
+        flex-shrink: 0;
+      }
+      input,textarea{
+        flex-grow: 1;
+        min-width: 0;
+      }
+  }
+}
+
 .right-link{
   padding: 0.5em;
   margin-bottom: 1em;
   margin-left: 1em;
   flex-basis: content;
   border-radius: 2em;
-  sib-trigger{
-    padding-left: 1em;
+  div[class*="icon-"]{
+    margin-right: 1em
   }
 }
 
@@ -344,10 +362,7 @@ hdapp-available {
     flex-direction: column;
     width: 1.8em;
     height: 1.8em;
-  }
-  sib-trigger{
-    padding-left: 1em;
-    width: 12em;
+    //margin-right: 1em;
   }
 }
 
@@ -364,7 +379,7 @@ hdapp-available {
     align-items: center;
     display: flex;
     &:before {
-      font-size: 1.3em;
+      //font-size: 1.3em;
     }
   }
 }

src/styles/main.scss

@@ -172,16 +172,16 @@ h4 {
 #mainContainer > div {
   display: flex;
   flex-direction: row-reverse;
-  align-items: flex-start;
+  align-items: stretch;
 
   > sib-router {
     font-family: monospace;
     color: $color-black;
-    display: block;
     background-color: $color-grey-light2;
+    display: flex;
+    flex-direction: column;
 
     sib-route {      
-      display: block;
       cursor: pointer;
 
       > div {