Merge branch 'cleanup-optimise-perfs' into 'staging'

Cleanup & optimise perfs

Closes #292 and #388

See merge request startinblox/applications/sib-app!115

config.sample.federated.json

@@ -6,6 +6,7 @@
   "clientLogoHeight": "32px",
   "clientCSS": "/path/to/custom.css",
   "authorityName": "djangoldp-server-name",
+  "publicDirectory": false,
   "endpoints": {
     "get": {
       "circles": "http://localhost:8000/circles/",

config.sample.json

@@ -6,6 +6,7 @@
   "clientLogoHeight": "32px",
   "clientCSS": "/path/to/custom.css",
   "authorityName": "djangoldp-server-name",
+  "publicDirectory": false,
   "endpoints": {
     "circles": "http://localhost:8000/circles/",
     "projects": "http://localhost:8000/projects/",

src/dependencies.pug

@@ -1,24 +1,33 @@
-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8")
 script(src="/scripts/index.js")
 
-//- local
-//- script(type="module" src="/lib/sib-router/src/index.js")
-//- script(type="module" src="/lib/sib-chat/sib-chat.js")
-//- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
-//- script(type="module" src="/lib/sib-event/sib-event.js")
-//- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
-//- script(type="module" src="/lib/sib-directory/sib-directory.js")
-//- script(type="module" src="/lib/sib-job-board/sib-job-board.js")
-
-//- CDN
+//- Scripts - use add `"libLocal" = true` on config.json to use your local `lib` folder
+if libLocal
+    script(type="module" src="/lib/sib-oidc/index.js")
+    script(type="module" src="/lib/sib-router/src/index.js")
+    script(type="module" src="/lib/sib-notifications/index.js")
+    if endpoints.users || (endpoints.get && endpoints.get.users)
+        script(type="module" src="/lib/sib-chat/sib-chat.js")
+    if endpoints.events || (endpoints.get && endpoints.get.events)
+        script(type="module" src="/lib/sib-event/sib-event.js")
+    if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+        script(type="module" src="/lib/sib-job-board/sib-job-board.js")
+        script(type="module" src="/lib/sib-conversation/sib-conversation.js")
+    if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+        script(type="module" src="/lib/sib-directory/sib-directory.js")
+else
+    script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8")
     script(type="module" src="https://unpkg.com/@startinblox/core@0.9")
     script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.4")
     script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.3")
+    if endpoints.users || (endpoints.get && endpoints.get.users)
+        script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.4")
+    if endpoints.events || (endpoints.get && endpoints.get.events)
         script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3")
+    if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+        script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3")
+        script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
+    if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+        script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3")
 
 //- Stylesheets
 link(rel='stylesheet', href='/styles/index.css')

src/header.pug

@@ -7,7 +7,7 @@
 //-   i#search-icon.icon-magnifier(aria-hidden='true')
 //-   i#close-search-icon.icon-close(aria-hidden='true')
 
-sib-notifications(
+sib-notifications.notLoggedIn(
   nested-field="inbox"
   bind-user
 )
@@ -22,13 +22,22 @@ details#user-controls.notLoggedIn
       bind-user
     )
   #user-controls__panel
-    include page-user-panel.pug
+    nav(role="user's functionalities menu")
+      ul
+        if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+          li
+            sib-link(next='my-profile') My profile
+        //-li
+          sib-link(next='user-settings') Settings
+        li
+          sib-link(next='admin') Admin
+      button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
 
-button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
+button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();") Login
 
 button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
 
-sib-auth
+sib-auth(style='display:none!important')
   sib-auth-provider(
     data-authority=`${authority}`
     data-id=`${authorityName || "authority"}`

src/index.pug

@@ -13,23 +13,18 @@ html(lang="en")
   body
     header#header(role='banner')
       include header.pug
-    main
+
+    main.notLoggedIn
       include menu-left.pug
       div#viewport
 
-        //- #members(hidden).no-sidebar
-        //-   include page-members-directory.pug
+        if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+          #members(hidden).no-sidebar
+            include page-directory.pug
 
-        //- #job-offers(hidden).no-sidebar
-        //-   include page-job-offers.pug
-
-        //- #job-offer-create(hidden).no-sidebar
-        //-   sib-link(class="backlink", next="job-offers") Back
-        //-   include page-job-offer-create.pug
-
-        //- #job-offer-edit(hidden).no-sidebar
-        //-   sib-link(class="backlink", next="job-offers") Back
-        //-   include page-job-offer-edit.pug
+        if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+          #job-offers(hidden).no-sidebar
+            include page-job-offers.pug
 
         if endpoints.projects || (endpoints.get && endpoints.get.projects)
           #project(hidden).with-sidebar
@@ -49,6 +44,3 @@ html(lang="en")
 
         #admin(hidden).with-sidebar
           include page-admin.pug
-        
-        //- #my-profile(hidden).no-sidebar
-        //-   include page-user-profile.pug

src/menu-left.pug

@@ -7,18 +7,40 @@ sib-widget(name='hd-create')
     p.create You are not part of any ${value} yet. To create a new one, you can go to the 
       sib-link(next='admin') administration panel
 
+sib-widget(name='menu-fix-url-circle')
+  template
+    sib-display(
+      data-src='${value}'
+      fields='name, badge'
+      value-badge='${value}'
+      widget-badge='hd-counter'
+      widget-name='sib-display-div'
+    )
+
+sib-widget(name='menu-fix-url-project')
+  template
+    sib-display(
+      data-src='${value}'
+      fields='project(customer.name, name), badge'
+      class-name='project-name'
+      class-customer.name='project-customer'
+      value-badge='${value}'
+      widget-badge='hd-counter'
+      widget-name='sib-display-div'
+    )
+
 nav#main__menu.jsLeftMenu
   sib-router#navbar-router(default-route='members')
-    //- sib-route.menu(name='members')
-    //-   div.menu-label Members
-    //-   div.menu-icon.icon-people
-    //- div.divider
-    //- sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
-    //-   div.menu-label Job offers
-    //-   div.menu-icon.icon-briefcase
-    //- sib-route(name='job-offer-create', hidden)
-    //- sib-route(name='job-offer-edit', use-id, hidden)
-    //- div.divider
+    if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+      sib-route.menu(name='members')
+        div.menu-label Members
+        div.menu-icon.icon-people
+      div.divider
+    if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+      sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
+        div.menu-label Job offers
+        div.menu-icon.icon-briefcase
+      div.divider
     if endpoints.events || (endpoints.get && endpoints.get.events)
       sib-route.menu(name='events')
         div.menu-label Events
@@ -35,20 +57,13 @@ nav#main__menu.jsLeftMenu
         sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
         div.sub-menu.menu-notification
           sib-display.project-tab(
-            data-src=`${endpoints.projects || (endpoints.get && endpoints.get.projects)}`
-            fields='project(customer.name, name), badge'
-            class-customer.name='project-customer'
-            class-name='project-name'
+            bind-user
+            nested-field='projects'
+            fields='project'
             empty-widget='hd-create'
             empty-value='project'
-            search-fields='team'
-            search-widget-team='sib-form-hidden'
-            search-value-team='-'
-            hd-inherit-user-id='search-value-team'
-            hd-inherit-widgets
-            widget-badge='hd-counter'
-            action-badge='badge'
-            order-by='customer.name'
+            widget-project='menu-fix-url-project'
+            order-by='project.customer.name'
             next='project'
           )
       div.divider
@@ -62,22 +77,13 @@ nav#main__menu.jsLeftMenu
           div.menu-icon.icon-folder-alt
         sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
         div.sub-menu.menu-notification
-          sib-widget(name='menu-circle-fix-url')
-            template
-              sib-display(
-                data-src='${value}'
-                fields='name, badge'
-                value-badge='${value}'
-                widget-badge='hd-counter'
-                widget-name='sib-display-div'
-              )
           sib-display(
             bind-user
             nested-field='circles'
             fields='circle'
             empty-widget='hd-create'
             empty-value='circle'
-            widget-circle='menu-circle-fix-url'
+            widget-circle='menu-fix-url-circle'
             order-by='circle.name'
             next='circle'
           )

src/page-admin.pug

@@ -1,18 +1,20 @@
 .views-container.sidebar-is-closed
   if endpoints.circles || (endpoints.get && endpoints.get.circles)
     #admin-circles(hidden)
-      include page-admin-circles.pug
+      include views/admin/page-admin-circles.pug
   if endpoints.projects || (endpoints.get && endpoints.get.projects)
     #admin-projects(hidden)
-      include page-admin-projects.pug
-  //- #admin-users(hidden)
-    include page-admin-users.pug
+      include views/admin/page-admin-projects.pug
+  if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+    #admin-users(hidden)
+      include views/admin/page-admin-users.pug
 nav.jsRightMenu(role='navigation')
   sib-router(default-route='admin-circles')
     ul
       li.jsOffsiteToggle
         a Fold menu
-      //- sib-route(name='admin-users')
+      if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+        sib-route(name='admin-users')
           li
             a Users
       if endpoints.circles || (endpoints.get && endpoints.get.circles)

src/page-circle.pug

@@ -13,9 +13,9 @@
     div.content-box__info
       sib-ac-checker(permission='acl:Read', bind-resources)
         #circle-chat(hidden)
-          include page-circle-chat.pug
+          include views/circle/page-circle-chat.pug
         #circle-information(hidden)
-          include page-circle-profile.pug
+          include views/circle/page-circle-profile.pug
 
 nav.jsRightMenu(role='navigation')
   sib-router(default-route='circle-chat')

src/page-directory.pug

@@ -3,4 +3,3 @@ sib-directory(
   range-groups=`${endpoints.groups || endpoints.get.groups}`,
   range-skills=`${endpoints.skills || endpoints.get.skills}`
 )
-

src/page-job-offers.pug

@@ -1,3 +1,5 @@
+.content-box.full-width
+  #job-offer-board
     .job-offers__container
     sib-job-board(
       data-src=`${endpoints.joboffers || endpoints.get.joboffers}`,
@@ -8,3 +10,16 @@
       sib-link(next="job-offer-create").plus-button
         div.icon-plus
         div Post a new offer
+
+  #job-offer-create(hidden)
+    sib-link(class="backlink", next="job-offers") Back
+    include views/job-offer/page-job-offer-create.pug
+
+  #job-offer-edit(hidden)
+    sib-link(class="backlink", next="job-offers") Back
+    include views/job-offer/page-job-offer-edit.pug
+
+sib-router(default-route='job-offer-board')
+  sib-route(name='job-offer-board')
+  sib-route(name='job-offer-create')
+  sib-route(name='job-offer-edit')

src/page-project.pug

@@ -19,9 +19,9 @@
     div.content-box__info
       sib-ac-checker(permission='acl:Read', bind-resources)
         #project-chat(hidden)
-          include page-project-chat.pug
+          include views/project/page-project-chat.pug
         #project-information(hidden)
-          include page-project-profile.pug
+          include views/project/page-project-profile.pug
 
 dialog(id='project-contributions-help').modal
   sib-link(next='project-profile')

src/page-user-panel.pug

@@ -1,9 +0,0 @@
-nav(role="user's functionalities menu")
-  ul
-    //- li
-    //-   sib-link(next='my-profile') My profile
-    //-li
-      sib-link(next='user-settings') Settings
-    li
-      sib-link(next='admin') Admin
-  button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out

src/scripts/index.js

@@ -1,52 +1,47 @@
-function recursiveAdaptWidgets(prefix, element, user) {
-  //- This function is a workaround for the currently unworking populate
-  //- Feel free to see examples on page-circles-
+function applyAdapt(prefix, sibDisplay, user) {
   
-  element.querySelectorAll("[" + prefix + "-user-id]").forEach(el => {
-    el.setAttribute(el.getAttribute(prefix + "-user-id"), user["@id"]);
-  });
-
-  if (element != document) {
   //- Allow to bind-user on selected attribute
-    if (element.getAttribute(prefix + "-user-id")) {
-      element.setAttribute(
-        element.getAttribute(prefix + "-user-id"),
+  if (sibDisplay.getAttribute(prefix + "-user-id")) {
+    sibDisplay.setAttribute(
+      sibDisplay.getAttribute(prefix + "-user-id"),
       user["@id"]
     );
   }
 
   //- Allow to set data-src to a children sib-form
-    if (element.getAttribute(prefix + "-bind-resources")) {
-      let form = element.querySelector(
-        element.getAttribute(prefix + "-bind-resources") + " sib-form"
+  if (sibDisplay.getAttribute(prefix + "-bind-resources")) {
+    let form = sibDisplay.querySelector(
+      sibDisplay.getAttribute(prefix + "-bind-resources") + " sib-form"
     );
     if (form) {
       form.setAttribute(
         "data-src",
-          element.component.resourceId.replace("members/", "")
+        sibDisplay.component.resourceId.replace("members/", "")
       );
     }
   }
 
   //- Allow to put user on a targetted search field
-    if (element.getAttribute(prefix + "-bind-user2input")) {
-      element.querySelector(
-        element.getAttribute(prefix + "-bind-user2input")
+  if (sibDisplay.getAttribute(prefix + "-bind-user2input")) {
+    sibDisplay.querySelector(
+      sibDisplay.getAttribute(prefix + "-bind-user2input")
     ).value = user["@id"];
   }
+}
 
-    //- In case your sib-display use a multiple, you have to target sub-sib-display auto-generated
-    if (element.getAttribute(prefix + "-widgets-multiple") !== null) {
-      element.querySelectorAll("div > sib-display").forEach(el => {
-        el.setAttribute(prefix + "-widgets", "");
+function recursiveAdaptWidgets(prefix, element, user) {
+  
+  element.addEventListener("populate", () => {
+    
+    //- This function is a workaround for the currently unworking populate
+    //- Feel free to see examples on page-circles-
+    element.querySelectorAll("[" + prefix + "-user-id]").forEach(el => {
+      el.setAttribute(el.getAttribute(prefix + "-user-id"), user["@id"]);
     });
-    }
-  }
+    applyAdapt(prefix, element, user);
 
-  //- This function is hooked every time a sib-something with prefix+"-widgets" is populated
-  element.querySelectorAll("[" + prefix + "-widgets]").forEach(elementChild => {
-    elementChild.addEventListener("populate", () => {
-      recursiveAdaptWidgets(prefix, elementChild, user);
+    document.querySelectorAll('sib-display, sib-form').forEach(sibDisplay => {
+      applyAdapt(prefix, sibDisplay, user);
     });
   });
 }
@@ -125,6 +120,7 @@ async function refreshResource(event) {
   if(resourceId.includes('circle') && user != null) {
     let userId = user['@id'];
     refreshSibDisplays(userId + "circles/");
+    refreshSibDisplays(resourceId.split('/').slice(0,4).join('/')+'/joinable/');
   }
 
   //clear cache on this resource
@@ -218,10 +214,12 @@ document.addEventListener("DOMContentLoaded", function(event) {
           .forEach(el => (el.style.visibility = "visible"));
         // Hide login button if already logged
         document
-          .querySelector('button[role="log in"]')
+          .querySelector('.loggedIn')
           .setAttribute("style", "display:none !important");
+        document.querySelectorAll('sib-display, sib-form').forEach(element => {
           // Set current user id on set-user-id of sib-display
-        recursiveAdaptWidgets("hd-inherit", document, user);
+          recursiveAdaptWidgets("hd-inherit", element, user);
+        });
         for (leaveBtn of document.querySelectorAll(
           "admin-circle-leave > sib-ac-checker:not([hidden])"
         )) {
@@ -230,6 +228,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
             "display:none !important"
           ); // Hide Join button
         }
+      } else {
+        document.querySelector('sib-auth').login();
       }
     })
     .catch(error => console.log(error));

src/styles/base/header.scss

@@ -56,10 +56,6 @@
     }
   }
 
-  .notLoggedIn {
-    visibility: hidden;
-  }
-
   sib-notifications {
 
     @include breakpoint(sm) {

src/styles/base/main.scss

@@ -35,6 +35,10 @@ $breakpoints: (phone: 480px,
     backface-visibility: hidden;
     /*will-change: overflow;*/
   }
+
+  .notLoggedIn {
+    visibility: hidden;
+  }
 }
 
 /* Add scrollbar to the left and right menu, and to the content */
@@ -471,7 +475,7 @@ a,
       }
     }
 
-    &.test {
+    &.flex {
       display: flex;
     }
 

src/styles/base/menu-left.scss

@@ -29,7 +29,7 @@
       display: flex;
       flex-direction: row-reverse;
       font-weight: bold;
-      padding: 1.6rem;
+      padding: 1.2rem;
   
       &[active] {
         background-color: $color-46-100-67;
@@ -97,10 +97,9 @@
       .project-tab>div>sib-display>div:nth-child(1) {
 
         sib-set-default[name='project'] {
-          padding: 1rem 1rem 1rem 3.2rem;
 
           .project-customer,
-          .project-name {
+          .project-name>div {
             display: block;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -113,6 +112,7 @@
           }
 
           .project-name {
+            display: block;
             padding-left: 14px;
             width: calc(150px - 10px);
             /* 10px = padding of the sib-set-default = better alignment */
@@ -126,7 +126,7 @@
       /* End of specific styles of "Projects" tab */
 
       >sib-display.nosub>div>sib-display>div {
-        padding: 1rem 1rem 1rem 3.2rem;
+        padding: 1rem 1rem 1rem 3rem;
       }
 
       sib-display>div {
@@ -145,8 +145,9 @@
           >div {
             color: $color-244-10-70;
             cursor: pointer;
-            >menu-circle-fix-url>sib-display>div {
-              padding: 1rem 1rem 1rem 3.2rem;
+            >menu-fix-url-circle>sib-display>div,
+            >menu-fix-url-project>sib-display>div {
+              padding: 1rem 1rem 1rem 3rem;
             }
           }
 
@@ -156,7 +157,8 @@
         }
 
         &>sib-display[active]>div,
-        &>sib-display>div>menu-circle-fix-url>sib-display[active]>div {
+        &>sib-display>div>menu-fix-url-circle>sib-display[active]>div,
+        &>sib-display>div>menu-fix-url-project>sib-display[active]>div {
           background-color: $color-46-100-67;
           color: $color-233-18-29;
           font-weight: bold;
@@ -164,11 +166,13 @@
       }
 
       &.menu-notification {
-        > sib-display > div > sib-display > div > menu-circle-fix-url {
+        > sib-display > div > sib-display > div > menu-fix-url-circle,
+        > sib-display > div > sib-display > div > menu-fix-url-project {
           flex: 1;
         }
         > sib-display > div > sib-display > div,
-        > sib-display > div > sib-display > div > menu-circle-fix-url  > sib-display > div {
+        > sib-display > div > sib-display > div > menu-fix-url-circle  > sib-display > div,
+        > sib-display > div > sib-display > div > menu-fix-url-project  > sib-display > div {
             display: flex;
             sib-display-div {
               flex: 3;

src/styles/layout/events/_index.scss

@@ -1 +1 @@
-@import 'events';
+@import 'events.scss';

src/styles/layout/events/events.scss

@@ -1,7 +1,3 @@
-$color-203-87-19: hsl(203, 87.8%, 19.2%);
-$color-357-67-45: hsl(357,67.5%,45.9%);
-$color-212-4-50: hsl(212.7,4.3%,50%);
-$color-0-0-22: hsl(0,0%,22.7%);
 #events {
     width: 100%;
     font-family: "Facit";

src/styles/layout/project-profile/project-profile.scss

@@ -163,6 +163,14 @@
 
       span {
         font-weight: bold;
+
+        &.link-color {
+          color: $color-244-73-62;
+        }
+
+        &.norm-weight {
+          font-weight: normal;
+        }
       }
     }
   }

src/templates/hd-customer.pug

@@ -12,6 +12,6 @@ sib-widget(name='hd-customer')
         ul
           li #[span(class='mdi-account-outline') ${await value.firstName} ${await value.lastName ? await value.lastName : ""}]${await value.role ? `, ${await value.role}` : ""}
           li
-            span(class='mdi-email-outline')
+            span(class='link-color norm-weight mdi-email-outline')
               a(href='mailto:${await value.email}') ${await value.email}
-          span ${await value.phone ? `<li><span class='mdi-cellphone-iphone'>${await value.phone}</span></li>` : ``}
+          span ${await value.phone ? `<li><span class='norm-weight mdi-cellphone-iphone'>${await value.phone}</span></li>` : ``}

src/views/admin/page-admin-circles.pug

@@ -9,12 +9,11 @@
 
 
   #circle-left(hidden)
-    include page-circle-left.pug
+    include ../circle/page-circle-left.pug
 
 
   #admin-circle-list(hidden)
-
-    include templates/hd-user-avatar.pug
+    include ../../templates/hd-user-avatar.pug
 
     sib-widget(name='circle-owner')
       template
@@ -52,57 +51,49 @@
               data-label='Leave circle'
             )
 
+        sib-display(
+          class='table-body'
+
+          bind-user
+          nested-field='circles'
+          fields='circle.name, circle.owner, leaveButton'
+
+          class-circle.name='w33 cell border cell-with-name'
+          class-circle.owner='w33 cell border cell-with-id-card'
+          class-leaveButton='w33 cell border cell-with-buttons'
+
+          action-leaveButton="joinButton"
+          widget-leaveButton="admin-circle-leave-button"
+          widget-circle.owner='circle-owner'
+        )
+
         sib-widget(name='admin-circle-join-button')
           template
-            button.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-arrow-right-circle.test
-              sib-form(
-                data-src=''
-                nested-field='members'
+            sib-form.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-arrow-right-circle.flex(
+              data-src='${value}'
 
               fields='user.@id'
               label-user.@id=''
-                value-user.@id=''
+              value-user.@id='self'
               widget-user.@id='sib-form-hidden'
 
               hd-inherit-bind-user2input="input[name='user.@id']"
-                hd-inherit-widgets
 
               submit-button='Join Circle'
             )
 
-        sib-widget(name="admin-circle-buttons")
-          template
-            sib-display(
-              data-src='${src}'
-              nested-field='members'
-              fields='relation'
-              action-relation='relation'
-              widget-relation='admin-circle-leave-button'
-              search-fields='user'
-              search-widget-user='sib-form-hidden'
-              search-value-user="-"
-              empty-widget='admin-circle-join-button'
-              hd-inherit-bind-resources='admin-circle-join-button'
-              hd-inherit-user-id="search-value-user"
-              hd-inherit-widgets
-            )
-
         sib-display(
           class='table-body'
 
-          data-src=`${endpoints.circles || endpoints.get.circles}`
-          fields='name, owner, buttons'
+          data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
+          fields='name, owner, members'
 
           class-name='w33 cell border cell-with-name'
           class-owner='w33 cell border cell-with-id-card'
-          class-buttons='w33 cell border cell-with-buttons'
-
-          widget-buttons="admin-circle-buttons"
-          action-buttons="buttons"
-          hd-inherit-widgets
-          hd-inherit-widgets-multiple
-
           widget-owner='circle-owner'
+
+          class-members='w33 cell border cell-with-buttons'
+          widget-members="admin-circle-join-button"
         )
 
 

src/views/admin/page-admin-projects.pug

@@ -8,10 +8,10 @@
     h1.title-left.without-margin Administration
 
   #project-left(hidden)
-    include page-project-left.pug
+    include ../project/page-project-left.pug
 
   #admin-project-list(hidden)
-    include templates/hd-user-avatar.pug
+    include ../../templates/hd-user-avatar.pug
 
     div.content-box__info
       div.admin-header
@@ -68,7 +68,6 @@
               search-widget-user='sib-form-hidden'
               search-value-user="-"
               hd-inherit-user-id="search-value-user"
-              hd-inherit-widgets
             )
 
         sib-display(
@@ -84,8 +83,6 @@
 
           widget-buttons="admin-project-buttons"
           action-buttons="buttons"
-          hd-inherit-widgets
-          hd-inherit-widgets-multiple
 
           widget-captain='project-captain'
           widget-members='project-admins'

src/views/circle/page-circle-edit.pug

@@ -1,6 +1,6 @@
 div.content-box__info
 
-  include templates/hd-user-avatar.pug
+  include ../../templates/hd-user-avatar.pug
 
   sib-widget(name='hd-user-groups')
     template ${await value.name}

src/views/circle/page-circle-profile.pug

@@ -3,7 +3,7 @@ sib-router(default-route='circle-profile', hidden)
   sib-route(name='circle-edit')
 
 #circle-profile(hidden)
-  include templates/hd-circle-team.pug
+  include ../../templates/hd-circle-team.pug
   .content-box__info
 
     .space-between
@@ -49,7 +49,7 @@ sib-router(default-route='circle-profile', hidden)
 
       sib-widget(name='circle-join-button')
         template
-          button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
+          button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.flex
             sib-form(
               data-src=''
               nested-field='members'
@@ -60,7 +60,6 @@ sib-router(default-route='circle-profile', hidden)
               widget-user.@id='sib-form-hidden'
 
               hd-inherit-bind-user2input="input[name='user.@id']"
-              hd-inherit-widgets
 
               submit-button='Join Circle'
             )
@@ -77,7 +76,6 @@ sib-router(default-route='circle-profile', hidden)
         empty-widget='circle-join-button'
         hd-inherit-bind-resources='circle-join-button'
         hd-inherit-user-id="search-value-user"
-        hd-inherit-widgets
       )
 
 

src/views/project/page-project-edit.pug

@@ -1,6 +1,6 @@
 div.content-box__info
 
-  include templates/hd-user-avatar.pug
+  include ../../templates/hd-user-avatar.pug
 
   sib-widget(name='hd-fieldset-title')
     template

src/views/project/page-project-profile.pug

@@ -3,11 +3,11 @@ sib-router(default-route='project-profile', hidden)
   sib-route(name='project-edit')
 
 #project-profile(hidden)
-  include templates/hd-business-provider.pug
-  include templates/hd-captain.pug
-  include templates/hd-circle-team.pug
-  include templates/hd-customer.pug
-  include templates/hd-project-team.pug
+  include ../../templates/hd-business-provider.pug
+  include ../../templates/hd-captain.pug
+  include ../../templates/hd-circle-team.pug
+  include ../../templates/hd-customer.pug
+  include ../../templates/hd-project-team.pug
 
   .content-box__info
 
@@ -94,7 +94,6 @@ sib-router(default-route='project-profile', hidden)
       search-value-user=""
 
       hd-inherit-user-id="search-value-user"
-      hd-inherit-widgets
     )