style

src/dependencies.pug

@@ -3,7 +3,7 @@
 script(src="/lib/webcomponentsjs/webcomponents-loader.js")
 //- script(src="lib/html-imports.js")
 
-script(src='/lib/sib-chat/3rdparty/sib-oidc-client.js')
+//- script(src='/lib/sib-chat/3rdparty/sib-oidc-client.js')
 script(src="/scripts/index.js")
 
 // Stylesheets
@@ -20,7 +20,7 @@ link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,6
 //- local
 link(rel='import', href='/lib/sib-core/sib-display.html')
 link(rel='import', href='/lib/sib-router/sib-router.html')
-link(rel='import', href='/lib/sib-chat/sib-chat.html')
+//- link(rel='import', href='/lib/sib-chat/sib-chat.html')
 
 //- cdn
   link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html")

src/menu.pug

@@ -4,12 +4,12 @@ div
       div(hidden)
       div#menu-items
         sib-route(name='members')
-          div.icon-people Membres
+          div.icon-people Members
         sib-route(hidden, name='member', id-prefix=`${sdn}/members/`)
         sib-route(name='job-offers')
           div.icon-briefcase Job offers
         div
-          div.icon-folder-alt Projets
+          div.icon-folder-alt Projects
           sib-display(
             data-src=`${sdn}/projects/`,
             data-fields='name',

src/page-group-edit.pug

@@ -1,5 +1,5 @@
 #group-edit
-  sib-form(
+  sib-form.block(
     range-owner=`${sdn}/members/`,
     widget-members='sib-form-multiple-dropdown',
     range-members=`${sdn}/members/`,

src/page-member-edit.pug

@@ -18,7 +18,7 @@
 label.d-none(for='avatar-input')
   img#avatar-preview(src='', style='width: 100%;')
 input#avatar-input.d-none(accept='image/*', name='avatar', value='', type='file')
-sib-form.edit-form(
+sib-form.edit-form.block(
   data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
   widget-user='hdapp-usereditinfo',
   range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown',

src/page-project-edit.pug

@@ -1,5 +1,5 @@
 #project-edit
-  sib-form(
+  sib-form.block(
     range-client=`${sdn}/clients/`,
     widget-team='sib-form-multiple-dropdown',
     range-team=`${sdn}/members/`,

src/styles/content.scss

@@ -118,3 +118,11 @@ sib-display#member-info,
     grid-gap: 1em;
   }
 }
+
+
+// projects
+#project-profile {
+  [name="title"]{
+    
+  }
+}

src/styles/form.scss

@@ -1,6 +1,8 @@
 //button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
 
-
+sib-form.block>form>*{
+  display: block;
+}
 sib-form{
   form{
     margin: -.5em;

src/styles/icons.scss

@@ -250,6 +250,7 @@ $icons: (
   social-steam: '\e620',
 );
 
+
 @each $name, $code in $icons {
   .icon-#{$name} {
     &:before {

src/styles/main.scss

@@ -99,7 +99,7 @@ h3 {
   flex: 1 1 0px;
 }
 
-.limiter{
+.limiter {
   display: block;
   max-width: 650px;
 }
@@ -110,21 +110,37 @@ h3 {
   flex-direction: row-reverse;
   align-items: flex-start;
   > sib-router {
+    font-family: monospace;
+    color: $color-black;
     display: block;
-    background-color: #ccc;
+    background-color: $color-grey-light2;
     sib-route {
       display: block;
+      cursor: pointer;
       > div {
         position: relative;
-        padding: 1em 2em;
+        padding: 1.5em 3em;
-        border-bottom: 1px solid #888;
+        border-bottom: 1px solid $color-grey;
+      }
+      &:hover {
+        background-color: $color-grey;
       }
       &[active] {
         font-weight: bold;
+        background-color: $color-black;
+        color: $color-yellow;
         > div:before {
-          content: '<';
+          opacity: 1;
-          position: absolute;
           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%);
+          opacity: 0;
         }
       }
     }
@@ -170,6 +186,11 @@ h3 {
   }
 }
 
+sib-route,
+sib-trigger {
+  cursor: pointer;
+}
+
 sib-trigger.back {
   display: block;
   @include icon('arrow-left');

src/styles/variables.scss

@@ -2,6 +2,7 @@
 $color-white: #fff;
 $color-black: #36383b;
 $color-grey: #898f95;
+$color-grey-light2: #d8d8d8;
 $color-grey-light: #f0f3f6;
 
 $color-yellow: #ffb700;
@@ -11,6 +12,11 @@ $color-yellow-light: #ffd759;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
 }
 
+%cadre {
+  @extend %shadow;
+  background-color: $color-white;
+}
+
 $breakpoints: (
   phone: 480px,
   tablet: 768px,

www/lib/sib-chat

@@ -1 +1 @@
-Subproject commit 24192a89c1bc19f7faa06546ba1b798ad717e04b
+Subproject commit ef607e3aecf6f7091b2fee1fd327e181b376b24d

www/test.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>[test] HD App</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <!-- Scripts-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.7/webcomponents-loader.js" integrity="sha256-fz7VMnmo2h7TlM7CBea8/vpbWpdQnbp20TnwmRwi/KU=" crossorigin="anonymous"></script>
+    <!-- Web components-->
+    <link rel="import" href="https://cdn.happy-dev.fr/sib-core/sib-display.html"/>
+
+    <style>
+      body.debug *:not(script):not(button){
+        display: block;
+        padding: 3px;
+        margin: 3px;
+        border: 1px solid #f006;
+      }
+    </style>
+  </head>
+  <body>
+    <button onclick="document.body.classList.toggle('debug')">debug</button>
+    <div id="job-offers">
+      <h1>Job offers</h1>
+      <sib-display id="offers-list"
+        data-src="https://test-paris.happy-dev.fr/job-offers/"
+        data-fields="title, description, skills"
+        widget-skills="sib-display-lookuplist"
+      ></sib-display>
+    </div>
+    <div id="members">
+      <h1>Members</h1>
+      <sib-display id="profiles-list"
+        data-src="https://test-paris.happy-dev.fr/members/"
+        data-fields="pseudo, bio"
+      ></sib-display>
+    </div>
+  </body>
+</html>