ui(general): correct the general display after switching to Core 0.7 + freezed dependancies

src/dependencies.pug

@@ -3,7 +3,7 @@
 //script(src="/lib/webcomponentsjs/webcomponents-loader.js")
 //- script(src="lib/html-imports.js")
 
-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6")
+script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
 
 script(src="/scripts/index.js")
 
@@ -23,10 +23,10 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //link(rel='import', href='/lib/sib-chat/sib-chat.html')
 
 //- cdn
-script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
+script(type="module" src="https://unpkg.com/@startinblox/core@0.7.15")
-script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
+script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1.11")
-script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2")
+script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2.1")
-script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.10")
 

src/index.pug

@@ -1,4 +1,5 @@
 include get_config.pug
+doctype html
 html(lang="en")
   head
     meta(charset="UTF-8")

src/menu-left.pug

@@ -3,8 +3,8 @@ nav#navbar
     sib-route.menu(name='members')
       div.menu-notification
         sib-display(
-        data-fields,
         data-src=`${sdn}/members/`,
+        data-fields='-',
         counter-template='${counter}'
         )
       div.menu-label Members
@@ -13,8 +13,8 @@ nav#navbar
     sib-route.menu(name='job-offers')
       div.menu-notification
         sib-display(
-        data-fields,
         data-src=`${sdn}/job-offers/`,
+        data-fields='-',
         counter-template='${counter}'
         )
       div.menu-label Job offers
@@ -27,7 +27,7 @@ nav#navbar
           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/`, use-id='')
+      sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`, use-id)
       div.sub-menu
         sib-display(
           data-src=`${sdn}/projects/`,
@@ -43,7 +43,7 @@ nav#navbar
           div.menu-icon.icon-arrow-up
         div.menu-label Cercles
         div.menu-icon.icon-globe
-      sib-route(hidden, name='circle', id-prefix=`${sdn}/circles/`, use-id='')
+      sib-route(hidden, name='circle', id-prefix=`${sdn}/circles/`)
       div.sub-menu
         sib-display(
           data-src=`${sdn}/circles/`,

src/page-job-offers.pug

@@ -16,7 +16,7 @@ div.grid-layer
       widget-author.groups='groups-name',
       multiple-author.groups,
 
-      
+      widget-skills='skills-name',
       multiple-skills,
       
       action-send='member-chat',

src/page-project-edit.pug

@@ -1,24 +1,27 @@
-sib-widget(name='template-legend-fee')
-  template
-    span Fee
-
-sib-widget(name='template-legend-customer')
-  template
-    span Customer information
 
 sib-widget(name='template-legend-team')
   template
-    span The team
+    span ${label}
+
+sib-widget(name='template-members')
+  template
+
+    sib-form.team.is-horizontal(
+      naked,
+      data-src='${id}',
+      data-fields='user.name, name',
+      range-user.name=`${sdn}/users/`,
+      class-name='field',
+      class-user.name='field',
+      label-name='Role',
+      label-user.name='Member(s)',
+    )
 
 .frame-form
   h1 Edit your project
   p.form-goal Here you can edit your projet's details
   .form-view
     sib-form.block(
-      range-businessProvider=`${sdn}/businessproviders/`,
-      range-team=`${sdn}/users/`,
-      range-members=`${sdn}/project-members/`,
-
       data-fields='block-project__info, block-project__fee, block-project__customer, block-project__team',
 
       set-block-project__info='customer.name, name, customer.logo, description',
@@ -28,10 +31,12 @@ sib-widget(name='template-legend-team')
       label-description='Project description',
       
       set-block-project__fee='fieldset-fee, businessProvider, businessProvider.fee',
+      range-businessProvider=`${sdn}/businessproviders/`,
       label-businessProvider='Business provider',
       label-businessProvider.fee='Amount of the contribution (%)',
-      widget-fieldset-fee='template-legend-fee',
+      widget-fieldset-fee='template-legend-team',
       widget-businessProvider.fee='sib-form-number',
+      label-fieldset-fee='Fee',
       
       set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
       label-customer.companyRegister='Company registration number',
@@ -41,20 +46,14 @@ sib-widget(name='template-legend-team')
       label-customer.role='Role within the company',
       label-customer.email='Email',
       label-customer.phone='Phone',
-      widget-fieldset-customer='template-legend-customer',
+      widget-fieldset-customer='template-legend-team',
+      label-fieldset-customer='Customer information',
 
-      set-block-project__team='fieldset-team, team, members',
+      set-block-project__team='fieldset-team, members',
-      label-team='Member',
+      label-fieldset-team='The team',
-      label-members='Role',
       widget-fieldset-team='template-legend-team',
-      multiple-team,
+      widget-members='template-members',
       multiple-members,
 
       bind-resources
     )
-
-    //-
-      set-block-project__team='fieldset-team, team',
-      widget-fieldset-team='template-legend-team',
-      widget-team='sib-form-multiple-dropdown',
-      (sib-form-multiple-dropdown ne fonctionne pas).

src/page-project-profile.pug

@@ -23,13 +23,13 @@
     widget-businessProvider='template-business-provider'
 
     set-block-customer='label-customer, customer',
-    value-label-customer='CUSTOMER INFORMATIONS:'
+    value-label-customer='CUSTOMER INFORMATIONS:',
     widget-customer='customer-template',
     
     set-block-team='label-team, members',
-    value-label-team='TEAM:'
+    value-label-team='TEAM:',
     widget-members='team-template',
-    multiple-members,
+    multiple-members='',
 
     bind-resources
   )

src/page-project.pug

@@ -3,16 +3,16 @@ nav.jsRightMenu(role='navigation')
     ul
       li.jsOffsiteToggle
         a Fold menu
-      sib-route(name='project-chat')
+      sib-route(name='project-chat', use-id)
         li 
           a Chat
-      sib-route(name='project-profile')
+      sib-route(name='project-profile', use-id)
         li 
           a Information
-      sib-route(name='project-edit')
+      sib-route(name='project-edit', use-id)
         li 
           a Edit
-      sib-route(name='project-create')
+      sib-route(name='project-create', use-id)
         li
           a Add new
 #views-container

src/styles/form.scss

@@ -46,6 +46,17 @@
     flex-direction: column;
   }
 
+  input {
+    -webkit-appearance: none;
+    align-items: center;
+    background: $color-glitter;
+    border: none;
+    color: $color-purple-dark;
+    display: inline-flex;
+    justify-content: flex-start;
+    line-height: 1.5;
+    vertical-align: top;
+  }
   
   sib-form-auto-completion,
   sib-form-checkbox,
@@ -61,7 +72,6 @@
       @extend %label;
     }
 
-    input,
     select,
     textarea {
       background: $color-glitter;
@@ -69,9 +79,9 @@
       color: $color-purple-dark;
       line-height: 1.5;
       width: 100%;
+      
     }
 
-    input,
     select,
     textarea {
       padding: 1.7rem;
@@ -207,6 +217,13 @@
     align-items: stretch;
   }
 
+  sib-multiple-form {
+
+    > label {
+      display: none;
+    }
+  }
+
   input[type='submit'] {
     margin-top: 6rem;
     @extend %submit-form;
@@ -221,3 +238,54 @@
     margin-bottom: 3.4rem;
   }
 }
+
+.is-horizontal {
+  display: flex;
+}
+
+.field {
+  margin-right: 0.75rem;
+  max-width: 50%;
+}
+
+.is-expanded {
+  flex-grow: 1;
+}
+
+sib-multiple-form[name='members'] {
+
+  > div {
+    align-items: center;
+    display: flex;
+  }
+
+  > div:not(:nth-child(-n + 2)) {
+
+    label {
+      
+      > div {
+        display: none;
+      }
+    }
+  }
+
+  button {
+    appearance: none;
+    background-color: $color-white;
+    border: 1px solid;
+    border-radius: 100%;
+    color: $color-majorelle-blue;
+    cursor: pointer;
+    font-size: 2.55rem;
+    height: 1em;
+    line-height: 0;
+    margin: 0.34rem;
+    padding: 0 0.04em 0.08em;
+    vertical-align: middle;
+    width: 1em;
+
+    &::after {
+      content: Add;
+    }
+  }
+}

src/styles/job-offers.scss

@@ -45,6 +45,10 @@
         sib-multiple[name$='groups'] {
           display: flex;
 
+          label {
+            display: none;
+          }
+
           > * {
             @extend %group;
           }
@@ -87,6 +91,12 @@
         line-height: 1.6;
         margin-bottom: 1.6rem;
       }
+
+      [name='skills'] {
+        label {
+          display: none;
+        }
+      }
       
       [name='send'] {
         color: $color-majorelle-blue;

src/styles/main.scss

@@ -223,6 +223,7 @@ sib-multiple[name*='skills'] {
   border: 1px solid $color-selective-yellow;
   border-radius: 2em;
   color: $color-white;
+  display: block;
   font-size: 1.4rem;
   font-weight: bold;
   margin: 0.4rem 1rem 0.4rem 0;

src/styles/member-profile.scss

@@ -146,6 +146,7 @@
 
       label {
         font-weight: bold;
+        display: block;
         padding-bottom: 0.5rem;
       }
     }

src/styles/project-profile.scss

@@ -171,6 +171,10 @@
   
   > sib-multiple {
 
+    label {
+      display: none;
+    }
+
     > team-template[name='members'] {
       display: grid;
       grid-column-gap: 1.6rem;
@@ -218,7 +222,7 @@
             display: flex;
             margin-left: 1rem;
             
-            div[name='name'] {
+            sib-multiple [name='name'] {
               @extend %group;
             }
           }

src/styles/variables.scss

@@ -93,7 +93,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
     @include mdi('cellphone-iphone');
   }
 
-  [name="foaf:homepage"] {
+  [name="foaf:homepage"]:not(:empty) {
     @include mdi('link-variant');
   }
 }

src/templates/template-team.pug

@@ -1,6 +1,5 @@
 sib-widget(name='team-template')
   template
-    p ${value}
     sib-display(
       data-src="${value.user['@id']}"
       data-fields='account.picture',