From 95c3284e5fc64f7ee8a54eae9dc4f6bb844c72e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Thu, 14 Mar 2019 14:43:18 +0100
Subject: [PATCH 1/8] feature(members): MR!6 - Sib-directory added

- CSS finalised
- Default user picture added
- See https://git.happy-dev.fr/startinblox/components/sib-directory/merge_requests/6
---
 src/dependencies.pug              |  4 +--
 src/index.pug                     |  2 --
 src/menu-left.pug                 |  1 -
 src/page-member-profile.pug       | 32 ------------------
 src/page-members.pug              | 55 +++----------------------------
 src/scripts/index.js              |  6 ++++
 src/styles/filters.scss           | 14 +++++---
 src/styles/index.scss             |  1 +
 src/styles/main.scss              | 15 +++++----
 src/styles/member-profile.scss    | 44 ++++++++++---------------
 src/styles/members.scss           | 34 +++++++++++--------
 src/styles/variables.scss         |  8 ++++-
 src/templates/template-skills.pug |  1 +
 src/templates/template-status.pug |  1 +
 14 files changed, 79 insertions(+), 139 deletions(-)
 delete mode 100644 src/page-member-profile.pug

diff --git a/src/dependencies.pug b/src/dependencies.pug
index 5ec0e2b..722df98 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -11,7 +11,7 @@ script(
 script(src="/scripts/index.js")
 
 // Stylesheets
-link(rel='stylesheet', href='/lib/normalize.css')
+//link(rel='stylesheet', href='/lib/normalize.css')
 link(rel='stylesheet', href='/styles/index.css')
 link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&amp;subset=latin-ext')
 link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
@@ -27,9 +27,9 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //link(rel='import', href='/lib/sib-chat/sib-chat.html')
 
 //- cdn
-//- don't forget to change version in hd-widgets.js
 script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory")
 
diff --git a/src/index.pug b/src/index.pug
index 3f08fcc..d32d309 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -21,8 +21,6 @@ html(lang="en")
             include page-members.pug
           #member-chat(hidden)
             include page-member-chat.pug
-          #member(hidden)
-            include page-member-profile.pug
           #job-offers(hidden)
             include page-job-offers.pug
           #job-offer-create(hidden)
diff --git a/src/menu-left.pug b/src/menu-left.pug
index fbb76fd..1970241 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -9,7 +9,6 @@ nav#navbar
         )
       div.menu-label Members
       div.menu-icon.icon-people
-    sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`)
     div.divider
     sib-route.menu(name='job-offers')
       div.menu-notification
diff --git a/src/page-member-profile.pug b/src/page-member-profile.pug
deleted file mode 100644
index 3bd20f3..0000000
--- a/src/page-member-profile.pug
+++ /dev/null
@@ -1,32 +0,0 @@
-sib-link(next="members" class="backlink") Back to directory
-
-include templates/template-groups.pug
-include templates/template-skills.pug
-include templates/template-status.pug
-
-div#member-profile
-  sib-display(
-    data-fields='member-profile__bio, member-profile__skills, member-profile__xp',
-    
-    set-member-profile__bio ='user.profile.available, member-img, member-profile, user.username, bio, infos, send',
-    set-member-profile__skills='user.skills',
-    set-member-profile__xp='',
-
-    set-member-img='user.account.picture',
-    set-member-profile='user.name, user.groups',
-    set-infos='city, user.groups, user.email, phone, foaf:homepage',
-    
-    label-send='SEND A MESSAGE',
-    action-send='member-chat',
-    
-    widget-user.account.picture='sib-display-img',
-    widget-user.groups='groups-name',
-    widget-user.skills='skills-name',
-    widget-user.profile.available='status-template',
-
-    multiple-user.groups,
-    multiple-user.skills,
-    
-    bind-resources
-  )
-
diff --git a/src/page-members.pug b/src/page-members.pug
index b5f5d40..aa6b537 100644
--- a/src/page-members.pug
+++ b/src/page-members.pug
@@ -1,51 +1,6 @@
-div.grid-layer
-
-  include templates/template-groups.pug
-  include templates/template-skills.pug
-
-  div.grid-layer-main.containerV
-    h1 Members
-    sib-display#profiles-list(
-      data-src=`${sdn}/members/`,
-      search-range-groups=`${sdn}/groups/`,
-      search-range-skills=`${sdn}/skills/`,
-      
-      search-fields='name, groups, skills',
-      set-name='pseudo, user.first_name, user.last_name',
-      search-label-name='Search by lastname, firstname...',
-      search-label-groups='Filter by role',
-      search-label-skills='Search by skills',
-      search-widget-name='sib-form-placeholder-text',
-      search-widget-groups='sib-form-placeholder-dropdown',
-      search-widget-skills='sib-form-placeholder-text',
-      
-      counter-template='<span>${counter} members</span>',
-      
-      data-fields='header, infos',
-      set-header='user.account.picture, user.name, pseudonym, bio, send',
-      set-infos='city, user.groups, user.email, phone, user.skills',
-      set-pseudonym='before-pseudo,user.username',
-      value-before-pseudo='@',
-      label-send='SEND A MESSAGE',
-      action-send='member-chat',
-      widget-user.account.picture='sib-display-img',
-      widget-user.groups='groups-name',
-      widget-user.skills='skills-name',
-      multiple-user.groups,
-      multiple-user.skills,
-
-      paginate-by='3',
-
-      next='member'
-    )
-
-  div.grid-layer-links.containerV
-    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 ?
+sib-directory(
+  data-src=`${sdn}/members/`,
+  range-groups=`${sdn}/groups/`,
+  range-skills=`${sdn}/skills/`
+)
 
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 9b4fac6..dc79031 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -6,6 +6,12 @@ document.addEventListener('DOMContentLoaded', function (event) {
   
   if (!navBar || !btnToggle) return;
 
+  document.querySelectorAll('img[name$="account.picture"]').forEach(function (e) {
+    if (!e.src || e.src == window.location) {
+      e.src = '/images/user.jpg';
+    }
+  });
+
   btnToggle.addEventListener('click', e => {
     navBar.classList.toggle('open');
     e.stopPropagation();
diff --git a/src/styles/filters.scss b/src/styles/filters.scss
index 622176c..4498840 100644
--- a/src/styles/filters.scss
+++ b/src/styles/filters.scss
@@ -1,8 +1,7 @@
 %filters {
-  border-bottom: 1px solid $color-gainsboro;
   display: grid;
   grid-gap: 0px 15px;
-  grid-template-columns: 50% 50%;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: 3.5em 3.5em;
 
   label {
@@ -29,7 +28,7 @@
   select {
     background: $color-white;
     background-image: url("/images/chevron-down.png");
-    background-position: 96% 60%;
+    background-position: right 12px top 60%;
     background-repeat: no-repeat;
     background-size: 14px 9px;
     box-sizing: border-box;
@@ -47,10 +46,15 @@
     display: flex;
     flex-direction: column;
   }
+
+  sib-form-placeholder-dropdown[name="skills"] {
+    grid-column-end: 3;
+    grid-column-start: 1;
+  }
 }
 
-#offers-list, #profiles-list {
-  & > sib-form {
+#offers-list, #members-list {
+  sib-form {
     @extend %filters;
   }
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1f8608e..3e0a702 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,7 @@
 @charset "UTF-8";
 
 @import '../../node_modules/include-media/dist/include-media';
+@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
 @import 'icons/custom-icons';
 @import 'icons/icons';
 @import 'icons/material-design-icons';
diff --git a/src/styles/main.scss b/src/styles/main.scss
index cc96944..484dfd6 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,6 +1,6 @@
-@import 'variables';
-
-[hidden] {
+[hidden],
+.hidden,
+.is-hidden {
   display: none !important;
 }
 
@@ -141,7 +141,6 @@ li {
 }
 
 sib-route,
-sib-trigger,
 sib-link {
   cursor: pointer;
 }
@@ -193,7 +192,7 @@ sib-link.back {
   display: grid;
   font-size: 16px;
   grid-template-columns: [start]auto[middle]25%[end];
-  grid-template-rows: [start]13em[middle]auto[end];
+  grid-template-rows: [start]7em[middle]auto[end];
 }
 .grid-layer-main {
   grid-column-start: start;
@@ -223,7 +222,11 @@ sib-multiple[name*='skills'] {
   color: $color-white;
   font-size: 1.4rem;
   font-weight: bold;
-  margin: 0.4rem 0.4rem 0.4rem 0;
+  margin: 0.4rem 1rem 0.4rem 0;
   padding: 0.5rem 2rem;
 }
 
+member-info-groups {
+  @extend %group;
+}
+
diff --git a/src/styles/member-profile.scss b/src/styles/member-profile.scss
index 40b3856..07ec783 100644
--- a/src/styles/member-profile.scss
+++ b/src/styles/member-profile.scss
@@ -1,4 +1,4 @@
-#member {
+#member-profile {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -14,7 +14,7 @@
     }
   }
 
-  #member-profile {
+  #member-info {
     background-color: $color-white;
     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
     margin: 2rem 1rem 5rem 2rem;
@@ -23,29 +23,22 @@
     div[name='member-profile__bio'] {
       border-bottom: 1px solid $color-link-water;
       display: grid;
-      grid-template-areas: "avatar name name name status"
-                           "avatar pseudo pseudo pseudo status"
-                           "avatar bio bio bio status"
-                           "avatar list list list button"
-                           "avatar list list list button";
+      grid-template-areas: "avatar name status"
+                           "avatar pseudo status"
+                           "avatar bio status"
+                           "avatar list button";
+      grid-template-columns: 1fr 2fr 1fr;
       padding: 4.5rem;
 
       div[name='member-img'] {
-        background-color: $color-bombay;
-        border-radius: 50%;
         grid-area: avatar;
-        height: 34vh;
         overflow: hidden;
         position: relative;
-        width: 34vh;
         
         img {
-          height: 100%;
-          left: 0;
+          border-radius: 50%;
           object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
+          max-width: 90% !important;
         }
       }
 
@@ -64,10 +57,6 @@
         > sib-multiple[name$='groups'] {
           display: flex;
           padding-left: 1.4rem;
-
-          groups-name {
-            @extend %group;
-          }
         }
       }
 
@@ -89,7 +78,7 @@
         @extend %member-info;
       }
 
-      status-template[name$='available']{
+      member-status[name$='available']{
         align-self: flex-end;
         color: $color-majorelle-blue;
         grid-area: status;
@@ -149,12 +138,15 @@
     }
 
     div[name='member-profile__skills'] {
+      padding: 4.5rem;
+      
+      & ~ div[name='member-profile__skills'] {
+        padding-top: 0;
+      }
 
-      sib-display-lookuplist {
-
-        label {
-          display: none;
-        }
+      label {
+        font-weight: bold;
+        padding-bottom: 0.5rem;
       }
     }
   }
diff --git a/src/styles/members.scss b/src/styles/members.scss
index db8f13d..d9122e3 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -1,6 +1,7 @@
-#members {
+#members-list {
+  @extend .grid-layer;
 
-  #profiles-list {
+  #members-list__content {
     @extend .grid-layer;
 
     nav {
@@ -86,9 +87,8 @@
         display: flex;
         flex-flow: column wrap;
         margin-bottom: 2.5rem;
-        padding-bottom: 10rem;
+        padding-bottom: 2rem;
         @media(min-width: 56rem) {
-          height: 62rem;
           width: 32%;
         }
 
@@ -96,19 +96,33 @@
           display: none;
         }
 
+        sib-multiple[name$='groups'] {
+          align-items: flex-start;
+          display: flex;
+          justify-content: flex-end;
+          min-height: 3.4rem;
+          padding-left: 2.6rem;
+          padding-right: 2.6rem;
+          padding-top: 1.3rem;
+
+          > * {
+            margin: 0.3rem;
+          }
+        }
+
         div[name='header'] {
           border-bottom: 1px solid $color-anti-flash-white;
           display: flex;
           flex-direction: column;
           padding: 0.85rem 0 3.4rem;
 
-          > *:not(sib-display-img) {
+          >*:not(member-picture) {
             display: flex;
             flex-basis: content;
             justify-content: center;
           }
 
-          sib-display-img {
+          member-picture {
             background-color: $color-white;
             border-radius: 50%;
             height: 28vh;
@@ -163,14 +177,6 @@
           padding: 0 1.7rem;
 
           @extend %member-info;
-
-          sib-multiple[name$='groups'] {
-            display: flex;
-
-            > * {
-              margin-right: 0.4rem;
-            }
-          }
         }
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ad6a14d..b282545 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -28,8 +28,13 @@ $color-spun-pearl:       hsl(244, 10%, 70%);
 $color-majorelle-blue:   hsl(244, 73%, 62%);
 
 %backlink {
-  color: #3d4057;
   @include icon('arrow-left-circle');
+  color: #3d4057;
+  text-decoration: underline;
+
+  &::before {
+    text-decoration: none;
+  }
 }
 
 %button {
@@ -63,6 +68,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 %member-info {
 
   sib-multiple[name^='user.'],
+  > member-info > div,
   > sib-display-div > div {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/templates/template-skills.pug b/src/templates/template-skills.pug
index cb2cdcb..cad1b90 100644
--- a/src/templates/template-skills.pug
+++ b/src/templates/template-skills.pug
@@ -2,3 +2,4 @@ sib-widget(name='skills-name')
   template
     li(class='skill') ${value.name}
 
+
diff --git a/src/templates/template-status.pug b/src/templates/template-status.pug
index 94e6e2f..c6f5fa8 100644
--- a/src/templates/template-status.pug
+++ b/src/templates/template-status.pug
@@ -1,3 +1,4 @@
 sib-widget(name='status-template')
   template
     div#member-status ${value == true ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'}
+

From 2f043ad93fbf13e02344fccb7252c8156c8f972a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Fri, 12 Apr 2019 20:01:31 +0200
Subject: [PATCH 2/8] Hotfix(notification bell + normalize)

---
 src/dependencies.pug | 2 +-
 src/index.pug        | 1 -
 src/styles/main.scss | 4 ----
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/dependencies.pug b/src/dependencies.pug
index 722df98..1e61912 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -11,7 +11,7 @@ script(
 script(src="/scripts/index.js")
 
 // Stylesheets
-//link(rel='stylesheet', href='/lib/normalize.css')
+link(rel='stylesheet', href='/lib/normalize.css')
 link(rel='stylesheet', href='/styles/index.css')
 link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&amp;subset=latin-ext')
 link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
diff --git a/src/index.pug b/src/index.pug
index d32d309..efe04b1 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -1,5 +1,4 @@
 include get_config.pug
-<!DOCTYPE html>
 html(lang="en")
   head
     meta(charset="UTF-8")
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 484dfd6..fd2779a 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -4,10 +4,6 @@
   display: none !important;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 :root {
   font-size: 62.5%;
   font-family: Open Sans, sans-serif;

From f60b720d37eea3604aecbbf0e476e74e78c202c0 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 16 Apr 2019 14:56:25 +0200
Subject: [PATCH 3/8] less javascript for user img

---
 .gitignore           | 4 ----
 src/dependencies.pug | 5 +----
 src/header.pug       | 6 +++++-
 src/scripts/index.js | 6 ------
 4 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index 360919c..f7696fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,8 +7,4 @@
 /www/scripts/
 /www/lib/
 /www/oidc-client-config.json
-!/www/lib/sib-core
-!/www/lib/sib-router
-!/www/lib/sib-chat
-!/www/lib/sib-oidc
 *.iml
\ No newline at end of file
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 1e61912..7793f96 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -3,10 +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.5"
-)
+script(type="module" src="https://unpkg.com/@startinblox/oidc@0.5")
 
 script(src="/scripts/index.js")
 
diff --git a/src/header.pug b/src/header.pug
index c89e0d6..6aced93 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -12,11 +12,15 @@ sib-notifications(
   bind-user
 )
 
+sib-widget(name="user-picture")
+  template
+    img(name="${name}",src="\${value || '/images/user.jpg'}",style="max-width:100%; max-height: 100%;")
+
 details#user-controls
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
       data-fields='first_name, account.picture',
-      widget-account.picture='sib-display-img',
+      widget-account.picture='user-picture',
       bind-user
     )
   #user-controls__panel
diff --git a/src/scripts/index.js b/src/scripts/index.js
index dc79031..9b4fac6 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -6,12 +6,6 @@ document.addEventListener('DOMContentLoaded', function (event) {
   
   if (!navBar || !btnToggle) return;
 
-  document.querySelectorAll('img[name$="account.picture"]').forEach(function (e) {
-    if (!e.src || e.src == window.location) {
-      e.src = '/images/user.jpg';
-    }
-  });
-
   btnToggle.addEventListener('click', e => {
     navBar.classList.toggle('open');
     e.stopPropagation();

From c29275f5e5aa658a3222835b98b46e779b906bd5 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 17 Apr 2019 17:08:47 +0200
Subject: [PATCH 4/8] fix project & circle sizing & add animation for right
 menu

---
 src/styles/main.scss       | 6 +-----
 src/styles/menu-right.scss | 4 +++-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/styles/main.scss b/src/styles/main.scss
index fd2779a..60748a0 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -127,11 +127,7 @@ li {
     overflow-x: hidden;
 
     > div {
-      //display: flex;
-      //margin: 2.6em;
-      //padding:2.6em;
-      //flex: 1 1 0;
-      flex-grow: 1;
+      transition: all 0.5s;
     }
   }
 }
diff --git a/src/styles/menu-right.scss b/src/styles/menu-right.scss
index 08ad665..e086514 100644
--- a/src/styles/menu-right.scss
+++ b/src/styles/menu-right.scss
@@ -4,6 +4,8 @@
 
     nav {
 
+      transition: all 0.5s;
+
       > sib-router {
         background-color: $color-222-52-90;
         color: $color-purple-dark;
@@ -80,7 +82,7 @@
         }
 
         & ~ #views-container {
-          flex-basis: 95%;
+          margin-left: -15.5rem;
           transform: translate(15.5rem);
         }
       }

From 5bee6f4fd7454955eb5c229b97181eb16e9ce24c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 15 Apr 2019 23:11:56 +0200
Subject: [PATCH 5/8] ui(general): MR!20 - Multiple changes for alpha

---
 src/dependencies.pug                          |   1 +
 src/index.pug                                 |   5 +-
 src/page-group-create.pug                     |  16 +--
 src/page-job-offers.pug                       |  12 +-
 src/page-project-create.pug                   |  49 ++++----
 src/page-project-edit.pug                     |  42 +++++++
 src/page-project-profile.pug                  |  11 +-
 src/styles/filters.scss                       |   3 +-
 src/styles/form.scss                          |  14 ++-
 src/styles/header.scss                        |   4 -
 src/styles/index.scss                         |   1 +
 src/styles/main.scss                          | 109 +++++++++++++++++-
 src/styles/member-chat.scss                   |   3 +
 src/styles/menu-right.scss                    |   1 -
 src/styles/mixins.scss                        |  11 ++
 src/styles/project-profile.scss               |  59 ++++------
 src/styles/variables.scss                     |  13 ++-
 src/templates/template-business-provider.pug  |   6 +
 src/templates/template-customer.pug           |   6 +-
 .../template-joboffers-conversation.pug       |   3 +
 src/templates/template-joboffers-filter.pug   |   8 ++
 src/templates/template-team.pug               |  23 +++-
 22 files changed, 284 insertions(+), 116 deletions(-)
 create mode 100644 src/styles/member-chat.scss
 create mode 100644 src/templates/template-business-provider.pug
 create mode 100644 src/templates/template-joboffers-conversation.pug
 create mode 100644 src/templates/template-joboffers-filter.pug

diff --git a/src/dependencies.pug b/src/dependencies.pug
index 7793f96..872c6f1 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -28,5 +28,6 @@ script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
+script(type="module" src="https://unpkg.com/@startinblox/component-conversation")
 script(type="module" src="https://unpkg.com/@startinblox/component-directory")
 
diff --git a/src/index.pug b/src/index.pug
index efe04b1..c6b83ee 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -9,10 +9,11 @@ html(lang="en")
     include dependencies.pug
   body
     div.layer
-      header#header(role='banner')
+      header#header.row(role='banner')
         include header.pug
-      #content
+      .content.row
         include menu-left.pug
+        
         main#mainContainer
           //- #dashboard(hidden)
             include page-dashboard.pug
diff --git a/src/page-group-create.pug b/src/page-group-create.pug
index 829e111..922bd3a 100644
--- a/src/page-group-create.pug
+++ b/src/page-group-create.pug
@@ -4,27 +4,23 @@
   .form-view
     sib-form(
       data-src=`${sdn}/circles/`,
-      range-owner=`${sdn}/members/`, 
+      range-owner=`${sdn}/users/`, 
       range-team=`${sdn}/members/`
       
       data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
 
-      label-description='Description',
-      label-foaf:jabberID='Chatroom id',
       label-name="Channel's name",
+      label-description='Description',
       label-owner='Owner of this channel',
+      label-foaf:jabberID='Chatroom id',
       label-team='Member(s) of this channel',
 
       value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
-      widget-description-text='hdapp-form-text',
-
-      value-team-text='Add any members as you want.',
-      widget-team-text='hdapp-form-text',
-
       value-owner-text='The one who will admin this channel',
-      widget-owner-text='hdapp-form-text',
+      value-team-text='Add any members as you want.',
+
 
       widget-description='sib-form-textarea',
       widget-jabberRoom='sib-form-checkbox',
-      widget-team='sib-form-multiple-dropdown',
+      widget-team='sib-form-multiple-dropdown'
     )
diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index 49b7df9..04050e7 100644
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@@ -2,14 +2,17 @@ div.grid-layer
 
   include templates/template-groups.pug
   include templates/template-skills.pug
+  include templates/template-joboffers-filter.pug
+  include templates/template-joboffers-conversation.pug
 
   div.grid-layer-main.containerV
     h2 New offers
       span Here you can find and post offers
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
-      data-fields='user-thumb, creationDate, title, description, skills, send',
+      data-fields='user-thumb, creationDate, title, description, skills, send, conversation',
       
+      set-conversation="@id"
       set-user-thumb='author.account.picture, author.first_name, author.groups',
       widget-author.account.picture='sib-display-img',
       widget-author.groups='groups-name',
@@ -20,19 +23,20 @@ div.grid-layer
       
       action-send='member-chat',
       label-send='Send a private message',
+
+      widget-conversation='joboffers-conversation'
       
       search-range-skills=`${sdn}/skills/`,
-      search-fields='content, skills, open',
+      search-fields='content, open, skills',
       
       set-content='title, description',
       
       search-label-content='Search by keyword',
       search-label-skills='Search by skills',
-      search-label-open='Filter opened or closed offers',
 
       search-widget-content='sib-form-placeholder-text',
       search-widget-skills='sib-form-placeholder-dropdown',
-      search-widget-open='sib-form-placeholder-text'
+      search-widget-open='joboffers-filter'
     )
   div.grid-layer-links.containerV
     template#groups-list-template
diff --git a/src/page-project-create.pug b/src/page-project-create.pug
index ed036f3..7e8fc7e 100644
--- a/src/page-project-create.pug
+++ b/src/page-project-create.pug
@@ -2,37 +2,32 @@
   h1 New project
   p.form-goal Here you can create your project, add members and assign them a job.
   .form-view
-    sib-form(
+    sib-form.block(
       data-src=`${sdn}/projects/`,
-      range-customer=`${sdn}/customers/`,
       range-members=`${sdn}/members/`,
       range-team=`${sdn}/users/`,
 
-      data-fields=`customer.name, name, customer.logo, description, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
-      set-block-team=`team, members`,
-      set-block-fee=`businessProvider, businessProviderFee`,
-      
-      label-customer.name='Business name',
-      label-name='Project name',
-      label-description='Project description',
-      label-customer.logo='Customer logo',
-      label-customer.companyRegister='Company register',
-      label-customer.address='Customer address',
-      label-customer.firstName='Contact firstname',
-      label-customer.lastName='Contact lastname',
-      label-customer.role='Contact role',
-      label-customer.email='Contact email',
-      label-customer.phone='Contact phone',
-      label-businessProvider='Business provider',
-      label-businessProviderFee='Fee (%)',
-      label-foaf:jabberID='Chatroom id',
-      label-team='Teammates',
-      label-members='Member role'
+      data-fields='block-project__info, block-project__fee, block-project__customer',
 
-      widget-jabberRoom='sib-form-checkbox',
-      widget-description='sib-form-textarea',
-      widget-team='sib-form-multiple-dropdown',
-      widget-members='sib-form-multiple-dropdown',
-      bind-resources
+      set-block-project__info='customer.name, name, customer.logo, description',
+      label-customer.name='Customer\'s name',
+      label-name='Project\'s name',
+      label-customer.logo='Customer\'s logo',
+      label-description='Project description',
+      
+      set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
+      widget-fieldset-fee='template-legend-fee',
+      label-businessProvider='Business provider',
+      label-businessProviderFee='Amount of the contribution',
+      
+      set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
+      widget-fieldset-customer='template-legend-customer',
+      label-customer.companyRegister='Company register',
+      label-customer.address='Address',
+      label-customer.firstName='Name of the contact at the customer\'s premises',
+      label-customer.lastName='Firstname of the contact at the customer\'s premises',
+      label-customer.role='Role within the company',
+      label-customer.email='Email',
+      label-customer.phone='Phone'
     )
     
\ No newline at end of file
diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index 1cc7ce0..b835fcd 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -1,10 +1,52 @@
+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
+
 .frame-form
   h1 Edit your project
   p.form-goal Here you can edit your projet's details
   .form-view
     sib-form.block(
+      data-src=`${sdn}/projects/`,
+      range-members=`${sdn}/members/`,
       range-team=`${sdn}/users/`,
 
+      data-fields='block-project__info, block-project__fee, block-project__customer',
+
+      set-block-project__info='customer.name, name, customer.logo, description',
+      label-customer.name='Customer\'s name',
+      label-name='Project\'s name',
+      label-customer.logo='Customer\'s logo',
+      label-description='Project description',
+      
+      set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
+      widget-fieldset-fee='template-legend-fee',
+      label-businessProvider='Business provider',
+      label-businessProviderFee='Amount of the contribution',
+      
+      set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
+      widget-fieldset-customer='template-legend-customer',
+      label-customer.companyRegister='Company register',
+      label-customer.address='Address',
+      label-customer.firstName='Name of the contact at the customer\'s premises',
+      label-customer.lastName='Firstname of the contact at the customer\'s premises',
+      label-customer.role='Role within the company',
+      label-customer.email='Email',
+      label-customer.phone='Phone',
+
       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).
\ No newline at end of file
diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug
index 7815d34..16c5869 100644
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@@ -1,11 +1,11 @@
 .frame
 
+  include templates/template-business-provider.pug
   include templates/template-customer.pug
   include templates/template-team.pug
 
   sib-display(
     data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
-    extra-context='{"project-profile":"${sdn}/projects/"}'
     
     set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
     value-const-title1='N°',
@@ -18,14 +18,9 @@
     value-label-description='DESCRIPTION:',
     widget-customer.logo='sib-display-img',
 
-    set-block-fee='label-fee, details-cell, details-business',
-    set-details-cell='cell-name, cell-fee, percentage',
-    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+    set-block-fee='label-fee, businessProvider',
     value-label-fee='FEE:',
-    value-cell-name='Happy Dev Paris:',
-    value-cell-fee='5',
-    value-percentage='%',
-    value-comma=', ',
+    widget-businessProvider='template-business-provider'
 
     set-block-customer='label-customer, customer',
     value-label-customer='CUSTOMER INFORMATIONS:'
diff --git a/src/styles/filters.scss b/src/styles/filters.scss
index 4498840..847e3a0 100644
--- a/src/styles/filters.scss
+++ b/src/styles/filters.scss
@@ -12,6 +12,7 @@
     appearance: none;
     border-style: none;
     box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
+    color: $color-taupe-gray;
     font-size: 1.36rem;
     line-height: 1.80;
     margin-top: 1.36rem;
@@ -32,9 +33,7 @@
     background-repeat: no-repeat;
     background-size: 14px 9px;
     box-sizing: border-box;
-    color: $color-taupe-gray;
     display: inline-block;
-    padding: 0.68rem;
     width: 100%;
 
     > option:not(:first-child) {
diff --git a/src/styles/form.scss b/src/styles/form.scss
index a0a6537..f5a811b 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -18,7 +18,7 @@
 #project-create,
 #project-edit {
   flex: 1;
-  font-size: 1.7rem;
+  font-size: 1.5rem;
 
   h1 {
     color: $color-purple-dark;
@@ -39,11 +39,12 @@
 
   div[name^='block-'] {
     display: flex;
-    
-    > * {
-      margin-right: 4rem;
-    }
+    flex-direction: column;
   }
+
+  @include styleTemplateFieldset('fee');
+  @include styleTemplateFieldset('customer');
+  @include styleTemplateFieldset('team');
   
   sib-form-auto-completion,
   sib-form-checkbox,
@@ -64,7 +65,7 @@
       border: none;
       color: $color-purple-dark;
       line-height: 1.5;
-      width: 95%;
+      width: 100%;
     }
 
     input,
@@ -86,6 +87,7 @@
     label {
       color: $color-dark-lava;
       font-weight: 600;
+      text-transform: initial;
     }
   }
 
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 037c33c..8ad8696 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -9,10 +9,6 @@
   padding: 1.6rem 0.64rem;
   position: relative;
   z-index: 1;
-  //position: relative;
-  //@include border-shadow(bottom);
-  //flex-grow: 0;
-  //flex-basis : 150px;
 
   > * {
     padding: 0 2.5rem;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 3e0a702..14a79e8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -20,6 +20,7 @@
 @import 'member-profile';
 @import 'members';
 @import 'project-profile';
+@import 'member-chat';
 
 // @import 'members';
 @import 'header';
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 60748a0..89aaa14 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -10,14 +10,23 @@
   --sib-notifications-theme: #{$color-46-100-50};
   
   body {
+    /*Will help to make .content fit your height screen size. Part.1*/
     background-color: $color-anti-flash-white;
     color: $color-text-base;
+    display: flex;
+    flex-direction: column;
     font-size: 1.6rem;
-    margin: 0 auto;
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
     overflow-wrap: break-word;
   }
 }
 
+img {
+  max-width: 100%;
+}
+
 h1,
 h2,
 h3,
@@ -100,10 +109,12 @@ li {
   overflow-x: hidden;
 }
 
+/*
 #content {
   display: flex;
   overflow: hidden;
 }
+*/
 
 #mainContainer {
   flex-grow: 1;
@@ -222,3 +233,99 @@ member-info-groups {
   @extend %group;
 }
 
+
+/* NEW RESPONSIVE */
+
+.right-sidebar {
+  overflow: hidden;
+  transition: width 0.3s;
+}
+
+.right-sidebar.js-right-sidebar-expanded {
+  width: 130px;
+}
+
+.right-sidebar.js-right-sidebar-collapsed {
+  width: 62px;
+}
+
+/*Define the basic row-column properties that construct the foundation*/
+.row {
+  display: flex;
+  max-width: 100%;
+}
+
+.content {
+  /*Will help to make .content fit your height screen size. Part 2*/
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
+}
+
+.col {
+  min-width: 0;
+}
+
+.block-grid {
+  display: flex;
+  flex-wrap: nowrap;
+  height: 100%;
+}
+
+/* Dividing into columns */
+@mixin respond-to($breakpoint) {
+  
+  @if map-has-key($breakpoints, $breakpoint) {
+
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+
+  @else {
+    @warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
+      + "Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}
+
+.small-2 {
+
+  @include respond-to('phone'){
+    display: block;
+    flex: 0 1 calc(100% / 12 * 2);
+  }
+}
+
+.small-shrink {
+
+  @include respond-to('phone') {
+    display: block;
+    flex: 0 1 auto;
+  }
+}
+
+.medium-auto {
+
+  @include respond-to('tablet') {
+    display: block;
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.small-12 {
+
+  @include respond-to('phone') {
+    display: block;
+    flex: 0 1 calc(100% / 12 * 12);
+  }
+}
+
+.small-auto {
+
+  @include respond-to ('phone') {
+    display: block;
+    flex: 1;
+    overflow: auto;
+  }
+}
diff --git a/src/styles/member-chat.scss b/src/styles/member-chat.scss
new file mode 100644
index 0000000..bd679dc
--- /dev/null
+++ b/src/styles/member-chat.scss
@@ -0,0 +1,3 @@
+#member-chat {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/styles/menu-right.scss b/src/styles/menu-right.scss
index e086514..4d40034 100644
--- a/src/styles/menu-right.scss
+++ b/src/styles/menu-right.scss
@@ -3,7 +3,6 @@
   > div {
 
     nav {
-
       transition: all 0.5s;
 
       > sib-router {
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index 9b4afae..d8d0b6e 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -147,3 +147,14 @@
     }
   }
 }
+
+@mixin styleTemplateFieldset($name) {
+  template-legend-#{$name} {
+    border-bottom: 1px solid $color-link-water;
+    color: $color-purple-dark;
+    font-size: 1.8rem;
+    font-weight: 600;
+    padding-bottom: 1rem;
+  }
+}
+
diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss
index 53d7169..1988b5a 100644
--- a/src/styles/project-profile.scss
+++ b/src/styles/project-profile.scss
@@ -58,6 +58,7 @@
 
   [name='infos'] {
     display: flex;
+    justify-content: space-between;
 
     [name='description'] {
       width: 90%;
@@ -68,25 +69,27 @@
       display: block;
       height: 8.5vh;
       position: relative;
-      text-align: center;
+      text-align: end;
       width: 15vw;
     }
   }
 
+  [name='businessProvider'] {
+    
+    ul {
+      list-style: none;
+      padding-left: 0;
 
-  [name^='details-'] {
-    display: flex;
-    font-size: 1.5rem;
-    margin-bottom: 0.85rem;
-
-    [name='cell-name'],
-    [name='business-contribution'] {
-      font-weight: bold;
-      margin-right: 0.5rem;
-    }
-
-    [name='comma'] {
-      margin-right: 0.2em;
+      li {
+        
+        &:first-child {
+          margin-bottom: 0.5em;
+        }
+        
+        span {
+          font-weight: bold;
+        }
+      }
     }
   }
 }
@@ -153,30 +156,10 @@
 
         &::before {
           color: $color-selective-yellow;
-          font-size: 2rem;
+          font-size: 2.2rem;
           padding: 0 1rem 0 0;
         }
       }
-
-      [name$='name'] {
-        @include mdi('account-outline');
-
-        &::before {
-          padding-left: 0.2em;
-        }
-      }
-
-      [name$='email'] {
-        @include icon('envelope');
-      }
-
-      [name$='phone'] {
-        @include mdi('cellphone-iphone');
-
-        &::before{
-          padding-left: 0.2em;
-        }
-      }
     }
   }
 }
@@ -227,13 +210,13 @@
         }
 
         span ~ sib-display {
-
-          div {
+          
+          > div {
             display: flex;
+            margin-left: 1rem;
             
             div[name='name'] {
               @extend %group;
-              margin-left: 1rem;
             }
           }
         }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index b282545..c31a9f9 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -85,10 +85,6 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
     @include mdi('atom');
   }
 
-  sib-multiple[name='user.groups'] {
-    @include mdi('account-outline');
-  }
-
   [name$='email'] * {
     @include mdi('email-outline');
   }
@@ -106,6 +102,11 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   color: $color-spun-pearl;
   font-weight: 600;
   margin: 2em 0 0.5em;
+  text-transform: uppercase;
+
+  > div {
+    padding-bottom: 1rem;
+  }
 }
 
 %notification {
@@ -145,5 +146,5 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 $breakpoints: (
   phone: 480px,
   tablet: 768px,
-  desktop: 1024px,
-);
+  desktop: 1024px
+) !default;
diff --git a/src/templates/template-business-provider.pug b/src/templates/template-business-provider.pug
new file mode 100644
index 0000000..5e49550
--- /dev/null
+++ b/src/templates/template-business-provider.pug
@@ -0,0 +1,6 @@
+sib-widget(name='template-business-provider')
+  template
+    ul
+      li #[span Happy Dev Paris:] 5%
+      li #[span Business provider:] ${value.name}, ${value.fee ? value.fee:0}%
+      
\ No newline at end of file
diff --git a/src/templates/template-customer.pug b/src/templates/template-customer.pug
index c2d3d59..f3446b4 100644
--- a/src/templates/template-customer.pug
+++ b/src/templates/template-customer.pug
@@ -13,7 +13,7 @@ sib-widget(name='customer-template')
       div
         h5 Contact:
         ul
-          li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
-          li(name='email')
+          li(class='mdi-account-outline') #[span ${value.firstName} ${value.lastName}], ${value.role}
+          li(class='mdi-email-outline')
             a(href='mailto:${value.email}') ${value.email}
-          li(name='phone') ${value.phone}
+          li(class='mdi-cellphone-iphone') ${value.phone}
diff --git a/src/templates/template-joboffers-conversation.pug b/src/templates/template-joboffers-conversation.pug
new file mode 100644
index 0000000..a427d5d
--- /dev/null
+++ b/src/templates/template-joboffers-conversation.pug
@@ -0,0 +1,3 @@
+sib-widget
+  template
+    sib-conversation(data-src="${value}", id-suffix="threads")
diff --git a/src/templates/template-joboffers-filter.pug b/src/templates/template-joboffers-filter.pug
new file mode 100644
index 0000000..b9d5e0d
--- /dev/null
+++ b/src/templates/template-joboffers-filter.pug
@@ -0,0 +1,8 @@
+sib-widget(name='joboffers-filter')
+  template
+    select
+      option(name='Offers',disabled) Offers
+      option(selected,name='Current offers') Current offers
+      option(name='Expired offers') Expired offers
+      option(name='All offers') All offers
+      option(name='My offers') Only my offers
\ No newline at end of file
diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug
index fa5b3e0..6afdf97 100644
--- a/src/templates/template-team.pug
+++ b/src/templates/template-team.pug
@@ -1,11 +1,12 @@
+
 sib-widget(name='team-template')
   template
     sib-display(
-      data-src="${value.user.account['@id']}",
-      data-fields='picture',
-      widget-picture='sib-display-img'
+      data-src="${value.user['@id']}"
+      data-fields='account.picture',
+      widget-account.picture='sib-display-img'
     )
-    div
+    div(name='user.thumb')
       span ${value.user.name}
       sib-display(
         data-src="${value.user.groups['@id']}",
@@ -14,3 +15,17 @@ sib-widget(name='team-template')
       )
     span ${value.name}
 
+//-
+  include templates/template-groups.pug
+
+  sib-widget(name='team-template')
+    template
+      sib-display(
+        data-src="${value.user['@id']}",
+        data-fields='account.picture, name, groups',
+        widget-account.picture='sib-display-img',
+        widget-groups='groups-name',
+        multiple-groups
+      )
+    span ${value.name}
+

From 184940b15ed5b38eece5ddf1d3d16b63082fe935 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste <bleme@pm.me>
Date: Thu, 18 Apr 2019 10:01:35 +0200
Subject: [PATCH 6/8] update: add alpha server to makefile

---
 Makefile | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/Makefile b/Makefile
index 4f4a825..58922bc 100644
--- a/Makefile
+++ b/Makefile
@@ -52,10 +52,17 @@ $(DIST_DIR)/index.html: src/index.pug src/config.json $(wildcard src/*.pug src/*
 # pug (prod)
 $(DIST_DIR)/index.prod.html: src/index.pug src/config.json $(wildcard src/*.pug src/*/*.pug)
 	@echo pug: $< ➜ $@
-	
+
 	@export ENV="prod"; \
 	node_modules/.bin/pug --pretty $< --out $(dir $@) -E prod.html -O src/config.json || touch $@
 
+# pug (staging)
+$(DIST_DIR)/index.staging.html: src/index.pug src/config.json $(wildcard src/*.pug src/*/*.pug)
+	@echo pug: $< ➜ $@
+
+	@export ENV="staging"; \
+	node_modules/.bin/pug --pretty $< --out $(dir $@) -E staging.html -O src/config.json || touch $@
+
 # sass
 $(DIST_DIR)/styles/index.css: src/styles/index.scss $(wildcard src/*.scss src/*/*.scss)
 	@echo sass: $< ➜ $@
@@ -75,9 +82,14 @@ deploy: pull install build
 pull:
 	git pull
 
-sync: buildprod
-	rsync -rv www/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ --exclude=www/index.html --exclude=www/index.prod.html
-	rsync --no-R --no-implied-dirs www/index.prod.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/index.html
+sync: buildstaging
+	rsync -rv www/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ --exclude=www/index.html --exclude=www/index.prod.html --exclude=www/index.staging.html
+	rsync --no-R --no-implied-dirs www/index.staging.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/index.html
 	rsync -v www/.htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
 
+sync-prod: buildprod
+	rsync -rv www/* alpha@ssh-alpha.happy-dev.fr:~/alpha.happy-dev.fr/ --exclude=www/index.html --exclude=www/index.prod.html --exclude=www/index.staging.html
+	rsync --no-R --no-implied-dirs www/index.prod.html alpha@ssh-alpha.happy-dev.fr:~/www/index.html
+	rsync -v www/.htaccess alpha@ssh-alpha.happy-dev.fr:~/www/
+
 .PHONY: default install submodules copy_lib copy_samples build watch serve clean sync buildprod pull deploy
\ No newline at end of file

From a6f2c0d4a2caea9450d6f3e6b3720dae2769316b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 23 Apr 2019 10:42:53 +0200
Subject: [PATCH 7/8] fix: staging & prod makefile

---
 Makefile | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/Makefile b/Makefile
index 58922bc..5ef536c 100644
--- a/Makefile
+++ b/Makefile
@@ -7,13 +7,9 @@ SCRIPT_DEST := $(SCRIPT_SRC:src/%=$(DIST_DIR)/%)
 default: build
 
 clean:
-	git clean -fXd -e !src/config.pug
+	git clean -fXd -e !src/config.json
 
-install: node_modules copy_lib copy_samples submodules
-
-submodules:
-	git submodule init
-	git submodule update --recursive --remote
+install: node_modules copy_lib copy_samples
 
 build: $(DIST_DIR)/index.html $(DIST_DIR)/styles/index.css $(SCRIPT_DEST)
 
@@ -74,6 +70,9 @@ $(DIST_DIR)/%.js: src/%.js .babelrc
 	@mkdir -p $(dir $@)
 	@node_modules/.bin/babel $< --out-file $@ --source-maps || touch $@
 
+buildstaging: build
+	$(MAKE) $(DIST_DIR)/index.staging.html
+
 buildprod: build
 	$(MAKE) $(DIST_DIR)/index.prod.html
 
@@ -87,9 +86,9 @@ sync: buildstaging
 	rsync --no-R --no-implied-dirs www/index.staging.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/index.html
 	rsync -v www/.htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
 
-sync-prod: buildprod
-	rsync -rv www/* alpha@ssh-alpha.happy-dev.fr:~/alpha.happy-dev.fr/ --exclude=www/index.html --exclude=www/index.prod.html --exclude=www/index.staging.html
+syncprod: buildprod
+	rsync -rv www/* alpha@ssh-alpha.happy-dev.fr:~/www/ --exclude=www/index.html --exclude=www/index.prod.html --exclude=www/index.staging.html
 	rsync --no-R --no-implied-dirs www/index.prod.html alpha@ssh-alpha.happy-dev.fr:~/www/index.html
 	rsync -v www/.htaccess alpha@ssh-alpha.happy-dev.fr:~/www/
 
-.PHONY: default install submodules copy_lib copy_samples build watch serve clean sync buildprod pull deploy
\ No newline at end of file
+.PHONY: default install copy_lib copy_samples build watch serve clean sync syncprod buildstaging buildprod pull deploy
\ No newline at end of file

From 8baa606eee7fbe0aa3598cd6431893983aeee948 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 23 Apr 2019 10:02:36 +0000
Subject: [PATCH 8/8] Update config.sample.json for Staging

---
 src/config.sample.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/config.sample.json b/src/config.sample.json
index 085b314..743f6eb 100644
--- a/src/config.sample.json
+++ b/src/config.sample.json
@@ -6,8 +6,15 @@
     "client_id": "833925"
   },
 
+  "staging": {
+    "sdn": "http://test-paris.happy-dev.fr",
+    "cdn": "https://cdn.happy-dev.fr",
+    "xmpp": "https://jabber.happy-dev.fr/http-bind/",
+    "client_id": "833925"
+  },
+
   "prod": {
-    "sdn": "https://test-paris.happy-dev.fr",
+    "sdn": "https://api.alpha.happy-dev.fr",
     "cdn": "https://cdn.happy-dev.fr",
     "xmpp": "https://jabber.happy-dev.fr/http-bind/",
     "client_id": "833925"