add projects

.htaccess

@@ -1,7 +1,7 @@
 <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
-  RewriteRule ^index\.html$ - [L]
+  RewriteRule \. - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]

Makefile

@@ -1,7 +1,7 @@
 default: build
 
 config.pug:
-	cp config-sample.pug config.pug
+	cp -n config-sample.pug config.pug
 
 node_modules:
 	npm install
@@ -9,11 +9,19 @@ node_modules:
 install: node_modules
 	git submodule update --init --recursive
 
+update:
+	cd dist/lib/sib-chat; \
+	git pull origin master
+	cd dist/lib/sib-core; \
+	git pull origin master
+	cd dist/lib/sib-router; \
+	git pull origin master
+
 dist/css/hd-app.css: $(wildcard src/scss/*.scss)
-	npx node-sass src/scss/main.scss dist/css/hd-app.css --source-map true
+	npx node-sass src/scss/main.scss dist/css/hd-app.css --source-map true || touch dist/css/hd-app.css
 
 index.html: config.pug index.pug $(wildcard src/pug/*.pug)
-	npx pug --pretty index.pug
+	npx pug --pretty index.pug || touch index.html
 
 build: index.html dist/css/hd-app.css
 

config-sample.pug

@@ -1,3 +1,4 @@
-- var dn   = 'http://127.0.0.1:8080'
+- var dn   = process.env.DN  || 'http://127.0.0.1:8080'
-- var sdn  = 'http://127.0.0.1:8000'
+- var sdn  = process.env.SDN || 'http://127.0.0.1:8000'
-- v = Math.random()
+- var cdn  = process.env.CDN || 'http://127.0.0.1:8080'
+- var v = Date.now()

dist/lib/sib-chat

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

dist/lib/sib-core

@@ -1 +1 @@
-Subproject commit 60be3fcb3d3f54f7fa3f760cf6cdbb2aeac4277d
+Subproject commit e493387102088c9d7c4cd03ce5d4edbc3a26cdcc

dist/lib/sib-router

@@ -1 +1 @@
-Subproject commit 3914e3736e66a96c42fb9a20c5412ed948eabf86
+Subproject commit 04ea601abf2fe9d65603867450cb39106f5d06e8

preprod.sh

@@ -1,12 +1,12 @@
 #!/bin/bash
-export DN="https://staging-app.happy-dev.fr"
+export DN="http://staging-app.happy-dev.fr"
 export SDN="https://test-paris.happy-dev.fr"
-export CDN="https://cdn.happy-dev.fr"
+export CDN="http://staging-app.happy-dev.fr/dist/lib"
 make prod
-ssh staging-app@ssh-staging-app.happy-dev.fr "rm -R staging-app.happy-dev.fr; mkdir staging-app.happy-dev.fr; cd staging-app.happy-dev.fr; mkdir -p src/fonts; mkdir -p dist/css;"
+# ssh staging-app@ssh-staging-app.happy-dev.fr "rm -R staging-app.happy-dev.fr; mkdir staging-app.happy-dev.fr; cd staging-app.happy-dev.fr; mkdir -p src/fonts; mkdir -p dist/css;"
-scp index.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
+rsync -u index.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
-scp .htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
+rsync -u .htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
-scp oidc-client-preprod-config.json  staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/oidc-client-config.json
+rsync -u oidc-client-preprod-config.json  staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/oidc-client-config.json
-scp -r dist/css/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/dist/
+rsync -zr dist/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
-scp -r src/fonts/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/
+rsync -zr src/fonts/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/
-scp -r src/js/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/
+rsync -zr src/js/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/

router.php

@@ -2,7 +2,9 @@
 
 if (PHP_SAPI == 'cli-server') {
   $url  = parse_url($_SERVER['REQUEST_URI']);
-  $file = __DIR__ . $url['path'];
+  $path = $url['path'];
+  if(strpos($path, '.') !== false) return false;
+  $file = __DIR__ . $path;
   if (is_file($file)) return false;
 }
 

src/js/hd-app.js

@@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
   const searchBar     = document.querySelector("#search-bar");
   const searchView    = document.querySelector("#search-view");
   const searchInput   = searchBar.querySelector("#search-input");
-  const btnToggle     = navBar.querySelector(".btn-toggle");
+  const btnToggle     = document.querySelector(".btn-toggle");
 
 
   // Shortcuts

src/pug/channels.pug

@@ -4,4 +4,4 @@
     data-fields='name, description', 
     search-fields='name, description', 
     next='channel'
-    )
+  )

src/pug/dashboard.pug

@@ -1,18 +1,21 @@
 #dashboard(style='display: none')
-  //-
+  //- form
-    <form>
+    .form-group
-    <div class="form-group">
+      input#search-input.form-control.form-control-sm(
-    <input type="text" class="form-control form-control-sm" id="search-input" placeholder="Recherche" aria-describedby="search-help" autofocus />
+        placeholder='Recherche',
-    <small id="search-help" class="form-text text-muted">* parmi les membres, les projets et les groupes de discussion</small>
+        aria-describedby='search-help',
-    </div>
+        autofocus='',
-    </form>
+        type='text'
+      )
+      small#search-help.form-text.text-muted * parmi les membres, les projets et les groupes de discussion
+
   .list-condensed
     ldp-display#to-user-profile(
-      data-src=`${sdn}/members/1/`, 
+        data-src=`${sdn}/members/1/`, 
-      set-name='firstname, name-separator, lastname', 
+        set-name='firstname, name-separator, lastname', 
-      value-name-separator=' ', 
+        value-name-separator=' ', 
-      data-fields='avatar, name', 
+        data-fields='avatar, name', 
-      widget-avatar='ldp-display-img'
+        widget-avatar='ldp-display-img'
       )
   script.
     document.querySelector("#to-user-profile").addEventListener("click", () => {

src/pug/dependencies-dev.pug

@@ -1,7 +1,7 @@
 // Stylesheets
 //- link(rel='stylesheet', href=`${dn}/node_modules/bootstrap/dist/css/bootstrap.min.css`)
 //- link(rel='stylesheet', href=`${dn}/node_modules/cropper/dist/cropper.min.css`)
-//- link(rel='stylesheet', href=`${dn}/node_modules/font-awesome/css/font-awesome.min.css`)
+link(rel='stylesheet', href=`${dn}/node_modules/font-awesome/css/font-awesome.min.css`)
 link(rel='stylesheet', href=`${dn}/node_modules/normalize.css/normalize.css?v=${v}`)
 link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`)
 // Javascript
@@ -10,8 +10,8 @@ script(src=`${dn}/node_modules/jquery/dist/jquery.min.js`)
 script(src=`${dn}/node_modules/cropper/dist/cropper.min.js`)
 script(src=`${dn}/dist/lib/webcomponentsjs/webcomponents-loader.js`)
 script(src=`${dn}/src/js/hd-app.js?v=${v}`)
-script(src=`${dn}/dist/lib/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`)
+//- script(src=`${dn}/dist/lib/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`)
 // Web components
 link(rel='import', href=`${dn}/dist/lib/sib-core/sib-display.html?v=${v}`)
 link(rel='import', href=`${dn}/dist/lib/sib-router/sib-router.html?v=${v}`)
-link(rel='import', href=`${dn}/dist/lib/sib-chat/sib-chat.html`)
+//- link(rel='import', href=`${dn}/dist/lib/sib-chat/sib-chat.html`)

src/pug/dependencies-prod.pug

@@ -1,5 +1,5 @@
 // Stylesheets
-link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css', integrity='sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4', crossorigin='anonymous')
+//-link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css', integrity='sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4', crossorigin='anonymous')
 link(href='https://cdn.bootcss.com/cropper/4.0.0/cropper.min.css', rel='stylesheet')
 link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
 link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`)
@@ -24,11 +24,11 @@ script(
   integrity='sha256-fUVqCtpScUF69qkFkeuHmcShr2N2UleRQJhRG4etHds=',
   crossorigin='anonymous')
 script(
-  src=`${dn} ?>/src/js/hd-app.js?v=${v}`)
+  src=`${dn}/src/js/hd-app.js?v=${v}`)
 script(
-  src=`${cdn} ?>/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`)
+  src=`${cdn}/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`)
 
 // Web components
-link(rel='import', href=`${cdn} ?>/sib-core/sib-display.html?v=${v}`)
+link(rel='import', href=`${cdn}/sib-core/sib-display.html?v=${v}`)
-link(rel='import', href=`${cdn} ?>/sib-router/sib-router.html?v=${v}`)
+link(rel='import', href=`${cdn}/sib-router/sib-router.html?v=${v}`)
-link(rel='import', href=`${cdn} ?>/sib-chat/sib-chat.html`)
+link(rel='import', href=`${cdn}/sib-chat/sib-chat.html`)

src/pug/header.pug

@@ -1,7 +1,6 @@
 header#header
-  sib-router#logo(default-route='members')
+  div#logo
-    sib-route#menu-title(name='dashboard')
+    | Happy Dev
-      | Happy Dev
 
   #search-bar
     input#search-input(placeholder='ctrl + k', type='search')

src/pug/html.pug

@@ -6,7 +6,7 @@ html(lang='fr')
     meta(http-equiv='X-UA-Compatible', content='ie=edge')
     title Happy Dev App
     //- Prod/Dev setup
-    if (['https://app.happy-dev.fr', 'https://staging-app.happy-dev.fr'].includes(dn))
+    if (['http://app.happy-dev.fr', 'http://staging-app.happy-dev.fr'].includes(dn))
       include dependencies-prod.pug
     else
       include dependencies-dev.pug
@@ -14,18 +14,19 @@ html(lang='fr')
     include header.pug
     div#subContainer
       include menu.pug
-      main#mainContainer.container-fluid
+      main#mainContainer
-        include dashboard.pug
+        //- include dashboard.pug
         include members.pug
         include member.pug
-        include projects.pug
+        include job-offers.pug
+        //- include projects.pug
         include project.pug
-        include client-creation.pug
+        //- include client-creation.pug
-        include channels.pug
+        //- include channels.pug
         include channel.pug
-        include search.pug
+        //- include search.pug
     sib-chat#chat-singleton(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources='')
-    script.
+    //- script.
       // Move the chat singleton to the right view on "page load"
       window.onload = function() {
         if (window.location.pathname.indexOf("-chat") !== -1) {

src/pug/job-offers.pug

@@ -0,0 +1,40 @@
+script.
+  document.addEventListener('WebComponentsReady', function(event) {
+    class HDAppAuthor extends SIBDisplayLookupList {
+      get parentElement() {
+        return 'div';
+      }
+      getTemplate(value, index) {
+        var firstname, lastname;
+        if (typeof value == 'object')
+          if (Object.keys(value).length > 1) {
+            firstname = value.user.first_name;
+            lastname = value.user.last_name;
+          } else {
+            store.get(value).then(resource => {
+              this.value.push(resource);
+              this.render();
+            });
+            if (Array.isArray(this.value))
+              this.value.splice(this.value.indexOf(value), 1);
+            else this.value = [];
+            return '';
+          }
+        return `${firstname} ${lastname}`;
+      }
+    }
+    customElements.define('hdapp-author', HDAppAuthor);
+  });
+
+
+#job-offers(style='display: none')
+  div
+    h1 Job offers
+    sib-display#offers-list(
+      data-src=`${sdn}/job-offers/`,
+      data-fields='author, title, description, skills',
+      set-searchset='title, description',
+      widget-skills='sib-display-lookuplist',
+      widget-author='hdapp-author',
+      search-fields='searchset'
+    )

src/pug/member-profile.pug

@@ -1,6 +1,8 @@
 #member-profile(style='display: none')
   sib-display#member-info(
-    data-fields='avatar, user, before-pseudo, pseudo, bio, cell, number, roles, website, skills',
+    data-fields='header, cell, number, roles, website, skills',
+    set-header='avatar, user, pseudonym, bio'
+    set-pseudonym='before-pseudo, pseudo'
     widget-avatar='sib-display-img',
     widget-user='hdapp-userinfo',
     widget-cell='hdapp-usercell',

src/pug/member.pug

@@ -1,11 +1,11 @@
 #member(style='display: none')
   sib-router#member-router(default-route='member-profile')
     sib-route(name='member-chat')
-      button Chat
+      div Chat
     sib-route(name='member-profile')
-      button Voir
+      div Voir
     sib-route(name='member-edit')
-      button Éditer
+      div Éditer
   #member-views-container
     include member-chat.pug
     include member-profile.pug

src/pug/members.pug

@@ -6,7 +6,7 @@ script.
         var firstname, lastname, email;
 
         if(typeof value == "object")
-          if(value.first_name) {
+          if(Object.keys(value).length > 1) {
             firstname = value.first_name;
             lastname  = value.last_name;
             email     = value.email;
@@ -32,7 +32,7 @@ script.
         var city, country;
 
         if(typeof value == "object")
-          if(value.city) {
+          if(Object.keys(value).length > 1) {
             city      = value.city;
             country   = value.country;
           }
@@ -52,20 +52,22 @@ script.
   });
 
 #members.view(style='display: none')
-  sib-display#profiles-list(
+  div
-    data-src=`${sdn}/members/`,
+    h1 Members
-    data-fields='header, cell, skills',
+    sib-display#profiles-list(
-    set-header='avatar, user, pseudonym, bio'
+      data-src=`${sdn}/members/`,
-    set-pseudonym='before-pseudo, pseudo'
+      data-fields='header, cell, skills',
-    value-before-pseudo='@',
+      set-header='avatar, user, pseudonym, bio'
-    widget-avatar='sib-display-img',
+      set-pseudonym='before-pseudo, pseudo'
-    widget-user='hdapp-userinfo',
+      value-before-pseudo='@',
-    widget-cell='hdapp-usercell',
+      widget-avatar='sib-display-img',
-    widget-skills='sib-display-lookuplist',
+      widget-user='hdapp-userinfo',
-    set-searchset='user.first_name, user.last_name',
+      widget-cell='hdapp-usercell',
-    search-fields='searchset',
+      widget-skills='sib-display-lookuplist',
-    next='member'
+      set-searchset='user.first_name, user.last_name',
-  )
+      search-fields='searchset',
+      next='member'
+    )
 
 
 

src/pug/menu.pug

@@ -1,20 +1,46 @@
-nav#navbar
+.btn-toggle
-  .btn-toggle
+  i.fa.fa-bars
-    i.fa.fa-bars
+div
-  sib-router#navbar-router(default-route='members')
+  nav#navbar
-    #menu-items
+    sib-router#navbar-router(default-route='members')
-      sib-route(name='members')
+      div(hidden)
-        i.fa.fa-users(aria-hidden='true')
+        sib-route(name='member', id-prefix=`${sdn}/members/`)
-        |  Membres
+        sib-route(name='project', id-prefix=`${sdn}/projects/`)
-      sib-route(name='member', id-prefix=`${sdn}/members/`)
+      div#menu-items
-      sib-route(name='projects')
+        sib-route(name='members')
-        i.fa.fa-tasks(aria-hidden='true')
+          div
-        |  Projets
+              i.fa.fa-users
-      sib-route(name='project', id-prefix=`${sdn}/projects/`)
+              |  Membres
-      sib-route(name='client-create')
+        sib-route(name='job-offers')
-        i.fa.fa-plus(aria-hidden='true')
+          div
-        |  New client
+            i.fa.fa-handshake-o
-      sib-route(name='channels')
+            |  Job offers
-        i.fa.fa-comments(aria-hidden='true')
+        div
-        |  Network
+          div
-      sib-route(name='channel', id-prefix=`${sdn}/channels/`)
+            i.fa.fa-tasks
+            |  Projets
+          sib-display(
+            data-src=`${sdn}/projects/`,
+            data-fields='name',
+            next='project'
+          )
+        div
+          div
+            i.fa.fa-tasks
+            |  Channels
+          sib-display(
+            data-src=`${sdn}/channels/`,
+            data-fields='name',
+            next='channel'
+          )
+            
+          //- sib-route(name='projects')
+            i.fa.fa-tasks(aria-hidden='true')
+            |  Projets
+          //- sib-route(name='client-create')
+            i.fa.fa-plus(aria-hidden='true')
+            |  New client
+          //- sib-route(name='channels')
+            i.fa.fa-comments(aria-hidden='true')
+            |  Network
+          //- sib-route(name='channel', id-prefix=`${sdn}/channels/`)

src/pug/project-profile.pug

@@ -1,10 +1,11 @@
 #project-profile(style='display: none')
   sib-display(
-    data-fields='name, number, client',
+    data-fields='title, description, client',
+    set-title='number, name'
     widget-client='hdapp-client',
     bind-resources=''
   )
-  h2 Team
+  h3 Team
   sib-display.members-list-condensed(
     id-suffix='team',
     data-fields='avatar, user',

src/pug/project.pug

@@ -1,13 +1,13 @@
 #project(style='display: none')
   sib-router#project-router(default-route='project-profile')
     sib-route(name='project-chat')
-      button Chat
+      div Chat
     sib-route(name='project-profile')
-      button Voir
+      div Voir
     sib-route(name='project-edit')
-      button Éditer
+      div Éditer
     sib-route(name='project-create')
-      button Nouveau
+      div Nouveau
   #project-views-container
     include project-chat.pug
     include project-profile.pug

src/pug/projects.pug

@@ -2,6 +2,7 @@ script.
   document.addEventListener("WebComponentsReady", function(event) { 
     class HDAppClient extends SIBWidget {
       get template() {
+
         return `<img name="${this.name}" src="${this.value.logo}"/>`;
       }
 
@@ -16,6 +17,7 @@ script.
   });
 
 #projects(style='display: none')
+  h1 Projects
   sib-display(
     data-src=`${sdn}/projects/`,
     data-fields='number, client, name',

src/scss/_chat.scss

@@ -1,17 +1,17 @@
 sib-chat {
-  position:       absolute;
+  // position: absolute;
-  top:            $menu-height;
+  border: 1px dotted red;
-  bottom:         0px;
+  top: $menu-height;
-  left:           0px;
+  bottom: 0px;
-  right:          0px;
+  left: 0px;
-  margin:         auto;
+  right: 0px;
-  display:        none;
+  margin: auto;
+  display: none;
 }
 
 .chat-view {
   sib-chat {
-    display:  block;
+    display: block;
-    top:      $menu-height + 30px;
+    top: $menu-height + 30px;
   }
 }
-

src/scss/_forms.scss

@@ -82,6 +82,7 @@ sib-form {
     }
 
     input {
+      margin-right: .5em;
       padding: .375em .75em;
       font-size: 1rem;
       line-height: 1.5;
@@ -96,6 +97,6 @@ sib-form {
   input[type="submit"], input[type="reset"] {
     @extend %btn;
     @extend %btn-primary;
-    margin-left: .5em;
+    margin-right: .5em;
   }
 }

src/scss/_job-offers.scss

@@ -0,0 +1,14 @@
+#offers-list {
+  > div {
+    > sib-display {
+      display: block;
+      margin: 1em 0;
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+      background-color: #efefef;
+      padding: 0.5em 1em;
+      &:nth-child(odd) {
+        background-color: #e0e0e0;
+      }
+    }
+  }
+}

src/scss/_member.scss

@@ -1,32 +1,33 @@
 %detail-section {
-  font-weight:  bold;
+  font-weight: bold;
-  font-size:    18px;
+  font-size: 18px;
 }
 
 #member-chat {
   #conversejs {
-    margin:   none;
+    margin: none;
   }
 }
 
 #profiles-list,
 #member-info {
   img {
-    display:  block;
+    display: block;
   }
 
-  &, img {
+  &,
-    width:      100%;
+  img {
+    width: 100%;
   }
 
-  div[name="name"] {
+  div[name='name'] {
     @extend %detail-section;
-    padding-top:  10px;
+    padding-top: 10px;
   }
 
-  div[name="name"], 
+  div[name='name'],
-  div[name="location"] {
+  div[name='location'] {
-    display:  flex;
+    display: flex;
   }
 }
 
@@ -34,28 +35,28 @@
   #member-info {
     sib-display-mailto,
     sib-display-tel {
-      display:    block;
+      display: block;
     }
 
-    a[name="email"],
+    a[name='email'],
-    a[name="number"] {
+    a[name='number'] {
       &::before {
-        font-family:      FontAwesome;
+        font-family: FontAwesome;
-        padding-right:    4px;
+        padding-right: 4px;
-        color:            black;
+        color: black;
       }
     }
-    a[name="email"] {
+    a[name='email'] {
       &::before {
-        content:          "\f0e0";
+        content: '\f0e0';
       }
     }
-    a[name="number"] {
+    a[name='number'] {
       &::before {
-        content:          "\f10b";
+        content: '\f10b';
-        font-size:        22px;
+        font-size: 22px;
-        padding-left:     3px;
+        padding-left: 3px;
-        padding-right:    7px;
+        padding-right: 7px;
       }
     }
   }
@@ -65,22 +66,22 @@
 
     h2 {
       @extend %detail-section;
-      margin-top:  40px;
+      margin-top: 40px;
     }
   }
 
   #member-skills {
-    display:      flex;
+    display: flex;
-    flex-wrap:    wrap;
+    flex-wrap: wrap;
 
     sib-display {
-      display:            block;
+      display: block;
-      background-color:   $hd-color; 
+      background-color: $hd-color;
-      color:              white;
+      color: white;
-      border-radius:      100px;
+      border-radius: 100px;
-      padding:            3px 10px;
+      padding: 3px 10px;
-      margin-bottom:      5px;
+      margin-bottom: 5px;
-      margin-right:       5px;
+      margin-right: 5px;
     }
   }
 }
@@ -89,10 +90,34 @@
   #member-detail {
     #member-info {
       sib-display-img {
-        display:  block;
+        display: block;
-        float:    right;
+        float: right;
-        width:    300px;
+        width: 300px;
       }
     }
   }
 }
+
+#member-info {
+  @extend %member;
+}
+
+.members-list-condensed{
+  display: block;
+  img{
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    object-fit: cover;
+    object-position: top;
+  }
+  label{
+    display: none;
+  }
+  >div>sib-display>div{
+    display: flex;
+  }
+  ul{
+    padding-left: 1em;
+  }
+}

src/scss/_members.scss

@@ -1,9 +1,57 @@
+%member {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-gap: 1em;
+  label {
+    display: none;
+  }
+  > sib-display {
+    display: block;
+    position: relative;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+    padding: 0.5em;
+    cursor: pointer;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: scale3d(0, 0, 1);
+      transition: transform 0.3s ease-out 0s;
+      background: #eac1;
+      content: '';
+      pointer-events: none;
+    }
+
+    &::before {
+      transform-origin: left top;
+    }
+
+    &::after {
+      transform-origin: right bottom;
+
+      background: #ace1;
+    }
+
+    &:hover,
+    &:focus {
+      &::before,
+      &::after {
+        transform: scale3d(1, 1, 1);
+      }
+    }
+  }
+}
+
 #profiles-list {
   display: block;
   sib-form {
     display: block;
     margin: 3em 0;
-    input[type=reset]{
+    input[type='reset'] {
       display: none;
     }
   }
@@ -14,52 +62,9 @@
     margin-bottom: 1em;
     text-align: center;
   }
+
   > div {
-    display: grid;
+    @extend %member;
-    grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
-    grid-gap: 1em;
-    label {
-      display: none;
-    }
-    > sib-display {
-      display: block;
-      position: relative;
-      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-      cursor: pointer;
-
-      &::before,
-      &::after {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        transform: scale3d(0, 0, 1);
-        transition: transform 0.3s ease-out 0s;
-        background: #eac1;
-        content: '';
-        pointer-events: none;
-        will-change: transform;
-      }
-
-      &::before {
-        transform-origin: left top;
-      }
-
-      &::after {
-        transform-origin: right bottom;
-
-        background: #ace1;
-      }
-
-      &:hover,
-      &:focus {
-        &::before,
-        &::after {
-          transform: scale3d(1, 1, 1);
-        }
-      }
-    }
   }
   sib-display-img {
     display: block;
@@ -81,7 +86,8 @@
 
   hdapp-userinfo {
     display: block;
-    font-weight: bold;
+    color: $pal-black;
+    font-size: 1.1em;
     margin: 0.5em;
     ul,
     li {
@@ -93,10 +99,29 @@
   }
 
   div[name='pseudonym'] {
-    color: grey;
     font-size: 0.8em;
     div {
       display: inline;
     }
   }
 }
+sib-display-lookuplist[name='skills'] {
+  ul,
+  li {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -0.25em;
+  }
+  li {
+    padding: 0.5em 1em;
+    border: 1px solid;
+    border-radius: 0.25em;
+    margin: 0.25em;
+  }
+}

src/scss/_menu.scss

@@ -1,46 +1,127 @@
 // #navbar{}
 // #navbar-router{}
 
+.btn-toggle {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: $col-alt-bg;
+  color: $col-alt-fg;
+  font-size: 1.5em;
+  padding: 0.5em;
+  cursor: pointer;
+}
+
 #navbar {
   background-color: $col-dark-bg;
   color: $col-dark-fg;
-  position: relative;
   max-width: 16rem;
-  position: relative;
+  position: sticky;
-  &.open{
+  top: 0;
+  height: 100%;
+  max-height: 100vh;
+  &.open {
     transform: translateX(0);
   }
-  .btn-toggle {
+  &:after {
-    display: none;
+    //Shadow
+    $shadow-width: 4px;
+    $shadow-opacity: 0.35;
+    content: '';
+    display: block;
     position: absolute;
     top: 0;
-    right: 0;
+    bottom: 0;
-    background-color: $col-alt-bg;
+    right: -$shadow-width;
-    color: $col-alt-fg;
+    width: $shadow-width;
-    font-size: 1.5em;
+    background-image: linear-gradient(
-    padding: 0.5em;
+      to right,
-    cursor: pointer;
+      rgba(0, 0, 0, $shadow-opacity),
-    transform: translateX(100%);
+      #0000
+    );
   }
-  @media (max-width: 32rem) {
+}
+
+@media (max-width: 32rem) {
+  .btn-toggle {
+    display: block;
+  }
+  #navbar {
     transform: translateX(-100%);
     transition: transform 0.5s ease;
     position: absolute;
+    top: auto;
     z-index: 1;
-    .btn-toggle {
+  }
-      display: block;
+  #header {
-    }
+    padding-left: 3rem;
   }
 }
 
 #menu-items {
-  > sib-route {
+  > * {
     display: block;
-    padding: 2em;
+    border-bottom: 1px solid rgba(white, 0.5);
-    border-top: 1px solid white;
+    sib-route {
-    cursor: pointer;
+      display: block;
+      cursor: pointer;
+    }
+    &[active] {
+      background-color: $col-highlight-bg;
+      color: $col-highlight-fg;
+    }
+    > div {
+      width: max-content;
+      padding: 2em;
+    }
     &[id-prefix] {
       display: none;
     }
+    > sib-display {
+      display: block;
+      font-size: 0.9em;
+      color: #aaa;
+      > div {
+        margin-bottom: 1.5em;
+        > sib-display {
+          cursor: pointer;
+          display: block;
+          padding: 0.5em 2em;
+        }
+      }
+    }
+  }
+}
+
+/* sub menu (right menu) */
+
+#mainContainer > div {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  > sib-router {
+    display: block;
+    background-color: #ccc;
+    sib-route {
+      display: block;
+      > div {
+        position: relative;
+        padding: 1em 2em;
+        border-bottom: 1px solid #888;
+      }
+      &[active] {
+        font-weight: bold;
+        > div:before {
+          content: '<';
+          position: absolute;
+          transform: translateX(-150%);
+        }
+      }
+    }
+  }
+  > div {
+    margin: 0.5em;
+    flex: 1 1 0px;
   }
 }

src/scss/_mixins.scss

@@ -1,3 +1,7 @@
+%title{
+  color: $pal-black;
+}
+
 // Bootstrap classes
 %btn {
   display: inline-block;
@@ -13,7 +17,7 @@
   padding: .375rem .75rem;
   font-size: 1rem;
   line-height: 1.5;
-  border-radius: .25rem;
+  border-radius: 100em;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 
   &:not(:disabled):not(.disabled) {
@@ -22,14 +26,14 @@
 }
 
 %btn-primary {
-  color: #fff;
+  color: $col-highlight-fg;
-  background-color: #007bff;
+  background-color: $col-highlight-bg;
-  border-color: #007bff;
+  border-color: $col-highlight-bg;
 }
 
 %btn-link {
   font-weight: 400;
-  color: #007bff;
+  color: $col-highlight-bg;
   background-color: transparent;
 }
 
@@ -73,3 +77,27 @@
     display: table;
   }
 }
+
+@mixin list-reset($deep:0) {
+  padding: 0;
+  margin: 0;
+  display: block;
+  list-style: none;
+  @if ($deep == 0) {
+    > li {
+      padding: 0;
+      margin: 0;
+      display: block;
+      list-style: none;
+    }
+  } @else {
+    ul,
+    ol,
+    li {
+      padding: 0;
+      margin: 0;
+      display: block;
+      list-style: none;
+    }
+  }
+}

src/scss/_project.scss

@@ -1,35 +1,18 @@
-#project {
+#project-profile {
-  #project-detail {
+  [name='title'] {
-    #project-info {
+    font-size: 1.5em;
-      display:      block;
+    padding: .5em 0;
-      padding-top:  10px;
+    margin-bottom: .5em;
-
+    border-bottom: 1px solid grey;
-      div[name="label"] {
+    color: $pal-black;
-        display:      flex;
+    sib-display-div,
-        font-weight:  bold;
+    div {
-      }
+      display: inline;
-
-      &, img {
-        width:      100%;
-      }
     }
-  }
+    sib-display-div[name='number'] {
-
+      padding-right: 0.5em;
-  .section {
+      &:before {
-    @extend %detail-section;
+        content: '#';
-    margin-top:  40px;
-  }
-}
-
-@media (min-width: $sm-with) {
-  #project {
-    #project-detail {
-      #project-info {
-        ldp-display-client {
-          display:  block;
-          float:    right;
-          width:    300px;
-        }
       }
     }
   }

src/scss/_styles.scss

@@ -3,8 +3,12 @@
 }
 
 html {
-  font-family: helvetica;
+  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans,
+    Tahoma, sans-serif;
   font-size: 16px;
+
+  background-color: $col-main-bg;
+  color: $col-main-fg;
 }
 
 html,
@@ -14,7 +18,7 @@ body {
 }
 
 html,
-body{
+body {
   height: 100%;
 }
 
@@ -25,5 +29,8 @@ body{
 
 #mainContainer {
   flex: 1 1 0px;
-  margin: .5em;
 }
+
+h1,h2,h3,h4,h5,h6{
+    color: $pal-black;
+}

src/scss/_variables.scss

@@ -1,6 +1,7 @@
 // palette
-$pal-white: #fff;
+$pal-white: #e8e8e8;
-$pal-light-grey: #ccc;
+$pal-black: #222;
+$pal-light-grey: #ddd;
 $pal-dark-grey: #4a4a4a;
 $pal-yellow: #fdc815;
 
@@ -14,8 +15,8 @@ $col-alt-bg: $pal-light-grey;
 $col-dark-fg: $pal-white;
 $col-dark-bg: $pal-dark-grey;
 
-$col-highlight-fg: $pal-yellow;
+$col-highlight-fg: $pal-black;
-$col-highlight-bg: $pal-white;
+$col-highlight-bg: $pal-yellow;
 
 // other color
 $hd-color: rgb(253, 200, 21);

src/scss/main.scss

@@ -13,6 +13,7 @@
 @import "dashboard";
 @import "members";
 @import "member";
+@import "job-offers";
 @import "edit-profile";
 @import "projects";
 @import "project";