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

-/*.user-profile__container {
-
-  .user-bio {
-    display: grid;
-    grid-gap: 1rem;
-    grid-template-areas: "avatar name"
-      "avatar information";
-    grid-template-columns: minmax(300px, 400px) 2fr;
-
-    .avatar-display {
-      grid-area: avatar;
-      overflow: hidden;
-      position: relative;
-
-      img {
-        border-radius: 50%;
-        height: 300px;
-        object-fit: cover;
-        overflow: hidden;
-        object-position: center;
-        width: 300px;
-      }
-    }
-
-    .name-diplay {
-      grid-area: name;
-
-      [name='user-name-groups'] {
-        align-items: baseline;
-        align-self: end;
-        display: flex;
-
-        sib-multiple {
-          display: flex;
-          padding-left: 1.4rem;
-
-          hubl-groups-name {
-            @extend %tag-role;
-          }
-        }
-      }
-    }
-
-    .info-form {
-      grid-area: information; */
-
-      /* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
-      /*[name="account.picture"] {
-        margin-bottom: 1rem;
-      }
-
-      hubl-instruction {
-        margin-left: 1rem;
-
-        span {
-          color: $color-233-18-29;
-          font-weight: bold;
-        }
-
-        p {
-          margin-left: 1rem;
-        }
-      }*/
-      /* Fin commentaire sur upload photos */
-    /*}
-
-    [name^="inline-"] {
-      display: flex;
-      justify-content: flex-start;
-
-      >*:not(:last-child) {
-        margin-right: 3rem;
-      }
-    }
-  }
-}*/

src/styles/left-nav/_index.scss

+nav#main__menu {
+
+  @media (min-width: 768.01px) {
+    height: 100vh;
+  }
+
+  &.searching {
+    background-image: url('/images/magnify-white.svg');
+    background-color: var(--color-heading);
+    background-repeat: no-repeat;
+    background-position-x: right -20px;
+    background-position-y: 150px;
+    background-size: 80%;
+
+    @media (max-width: 768px) {
+      background-size: 60%;
+    }
+  }
+
+  .transparent-background {
+    background-color: transparent;
+
+    &.active[active] {
+      background-color: var(--color-third);
+    }
+
+    &.hover:hover:not([active]) {
+      background-color: #202B3C;
+    }
+
+    &.reverse {
+      background-color: var(--color-third);
+    }
+  }
+
+  .unread {
+    font-weight: bolder;
+  }
+
+  .badge {
+    float: right;
+    margin-right: 2px;
+  }
+
+  .icon {
+    padding: 3px;
+  }
+
+  .menu-search {
+    padding: 0;
+
+    form::before,
+    solid-form-placeholder-text::before {
+      display: none;
+    }
+
+    form {
+      display: flex;
+
+      solid-form-placeholder-text {
+        display: contents;
+      }
+    }
+
+    input {
+      background: transparent;
+      color: #D0D4DA;
+      margin-top: 0;
+      padding: 12px 13px;
+      height: 50px;
+
+      /* https://css-tricks.com/almanac/selectors/p/placeholder/ */
+      &::-webkit-input-placeholder {
+        /* Chrome/Opera/Safari */
+        color: #D0D4DA;
+      }
+
+      &::-moz-placeholder {
+        /* Firefox 19+ */
+        color: #D0D4DA;
+      }
+
+      &:focus {
+        /*background: #202B3C;*/
+        color: white;
+      }
+    }
+
+    div>button {
+      background: transparent;
+      border: none;
+      color: #D0D4DA;
+      margin-top: 0 !important;
+      height: 100%;
+
+      @media (max-width: 768px) {
+        width: 20%;
+      }
+
+      &:hover::before {
+        color: white;
+      }
+    }
+  }
+
+  .menu-header {
+
+    /* Chevron animation */
+    .transform-up {
+      transform: rotateX(180deg);
+    }
+
+    .badge {
+      padding-top: 2px;
+      margin-right: 5px;
+    }
+
+    @media (min-width: 768.01px) {
+
+      &:not(:hover) .menu-options,
+      &:not(:hover) .menu-admin {
+        display: none;
+      }
+    }
+
+    .menu-options {
+      float: right;
+    }
+
+    .menu-admin {
+      position: absolute;
+      z-index: 3016;
+      left: 15%;
+      top: 36px;
+      text-align: end;
+      width: 80%;
+
+      @media (max-width: 768px) {
+        width: 100%;
+        left: 0;
+        height: 9vh;
+        top: 0;
+        text-align: center;
+        position: fixed;
+        top: 50px;
+        height: calc(100% - 50px);
+      }
+    }
+  }
+
+  .sub-menu {
+
+    /* Styles for the small icon */
+    .sub-menu-icon {
+      margin-left: 3px;
+      opacity: 0.8;
+      width: 12px;
+
+      >div {
+        line-height: 19px;
+      }
+    }
+
+    .sub-menu-name {
+      margin-right: 15px;
+      margin-left: 3px;
+      vertical-align: middle;
+      width: calc(75% - 15px);
+    }
+  }
+
+  /* Ellipsis */
+  .ellipsis {
+
+    orbit-menu-fix-url-circle,
+    orbit-menu-fix-url-project {
+      display: block;
+    }
+
+    .ellipsis-content,
+    .ellipsis-content>div {
+      display: block;
+      line-height: 19px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+
+      @media (max-width: 768px) {
+        display: block;
+      }
+    }
+  }
+
+  .empty {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 13px;
+    width: 87%;
+  }
+
+  .divider {
+    height: 1px;
+    background-color: #D7DBE0;
+    opacity: 0.2;
+  }
+
+
+  /* Header's general counter appear or disappear on click (JS animation) */
+  .menu-header>div:not(.transform-up)~.badge {
+    display: none;
+  }
+
+  .menu-header>div.transform-up~.badge {
+    display: block;
+  }
+
+  /* End */
+
+  /* The little cross icon on contacts' name appears or disapear + hover + styles */
+  .sub-menu__contacts>div>solid-display {
+    height: 28px;
+    display: block;
+
+    orbit-menu-contact-removed {
+      display: none;
+    }
+
+    &:hover {
+
+      orbit-menu-fix-url-contact {
+        display: inline-block;
+        width: 100%;
+      }
+
+      orbit-counter {
+        padding-right: 25px;
+      }
+
+      solid-set-default[name="message"] {
+        margin-right: 5px;
+        width: 75%;
+      }
+
+      orbit-menu-contact-removed {
+        width: 38px;
+        height: 27.75px;
+        text-align: right;
+        position: relative;
+        top: -28px;
+        display: block;
+        left: calc(100% - 44px);
+        padding-top: 5px;
+
+        solid-delete > button {
+          visibility: hidden;
+
+          &::before {
+            font-size: 18px;
+            color: white;
+            visibility: visible;
+            position: relative;
+            bottom: 1px;
+            margin-left: 6px;
+          }
+        }
+      }
+    }
+  }
+
+  /* End */
+
+  /* Modal to keep/remove a contact */
+  orbit-menu-contact-removed dialog {
+    background: white !important;
+    border: none;
+    padding: 60px 30px;
+    text-align: center;
+
+    @media (max-width: 768px) {
+      width: 100vw;
+    }
+
+    p {
+      margin-bottom: 30px;
+      font-size: 16px;
+    }
+
+    div,
+    p {
+      background: white !important;
+    }
+
+    &::before,
+    p::before,
+    div::before,
+    button::before {
+      display: none;
+    }
+  }
+
+  /* End */
+
+  &.jsLeftMenu {
+    display: inline-flex;
+    flex-direction: column;
+
+    @media(max-width: 768px) {
+      display: none;
+    }
+  }
+
+  &.jsLeftMenu[open] {
+    display: none;
+
+    @media (max-width: 768px) {
+      display: flex;
+      bottom: 0;
+      box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
+      width: 100%;
+      position: fixed;
+      right: 0;
+      top: 50px;
+      z-index: 3000;
+    }
+  }
+
+  /* Bottom image */
+  .navbar-bottom-image-container {
+    margin-top: auto;
+    padding: 4px;
+
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  }
+}

src/styles/members/_index.scss

+#members>div:first-of-type {
+  min-height: calc(100vh - 50px);
+}

src/styles/projects/_index.scss

+#admin-projects-create .form solid-multiple-form {
+    height: 100%;
+    button {
+        border: 1px solid var(--color-secondary);
+        text-transform: uppercase;
+        color: var(--color-secondary);
+        background-color: white;
+        font-weight: 700;
+        padding: 9px 20px;
+        font-size: 12px;
+        line-height: 14px;
+        border-radius: 16.5px;
+
+        @media (max-width: 768px) {
+            width: 100%;
+        }
+    }
+    button:hover {
+        background-color: var(--color-secondary);
+        color: white;
+    }
+}
+#projects-edit .edit-businessprovider form {
+    display: table-row;    
+    border-bottom: 1px solid #C9C8C8;
+    border-right: 1px solid #C9C8C8;
+    text-align: center;
+    .segment.table-cell {
+        border-bottom: 1px solid #C9C8C8;
+        border-right: 1px solid #C9C8C8;
+        height: 60px;
+        padding: 10px;
+    }
+    [type="submit"] {
+        margin: 19px auto;
+    }
+}
+#projects-information .display-businessprovider {
+    [name="name"]::after {
+        content: " - ";
+        margin-left: 5px;
+    }
+    [name="fee"]:after {
+        content: " %";
+    }
+    > div > solid-display:not(:first-child) [name="titlebusinessprovider"] {
+        display: none;
+    }
+}

src/styles/registering/_index.scss

+.index-community {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+
+  > div {
+    min-height: 75%;
+    margin-top: 100px;
+    padding-bottom: 70px;
+
+    @media (max-width: 768px) {
+      margin: 0;
+      min-height: 100%;
+    }
+
+    .community-logo {
+      max-width: 100%;
+      height: 100px;
+      margin-top: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .community-button {
+      height: 80px;
+      border-radius: 5px;
+    }
+
+    .community-button-flexed {
+      flex-basis: 33%;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+
+    .community-button-flexed-large {
+      flex-basis: 66%;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+
+    .community-flex-container {
+      display: flex;
+      flex-wrap: wrap;
+      text-align: center;
+      justify-content: center;
+      > div > solid-display {
+        display: contents;
+        > div > orbit-index-select-community {
+          display: contents;
+        }
+      }
+    }
+
+    .community-button-flex-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      > solid-display,
+      orbit-index-community-logo,
+      orbit-index-community-text {
+        display: contents;
+      }
+    }
+  }
+
+  solid-form-text-label,
+  solid-form-password-label,
+  orbit-index-input-type-email {
+    color: #5d7393;
+  }
+
+  label {
+    text-align: left;
+  }
+
+  [type="submit"] {
+    float: initial !important;
+  }
+}

src/templates/hubl-captain.pug

-include hubl-user-avatar.pug
-
-sib-widget(name='hubl-captain')
-  template
-    sib-display.user-thumb(
-      data-src="${await value}"
-      fields='account.picture, sup(name), sub(profile.city, is_lead)'
-
-      class-account.picture='user-thumb__picture'
-      class-name='user-thumb__name'
-      class-profile.city='user-thumb__city'
-      class-is_lead='user-thumb__lead'
-
-      widget-account.picture='hubl-user-avatar'
-      value-is_lead='Project lead'
-    )

src/templates/hubl-circle-team.pug

-include hubl-user-avatar.pug
-
-sib-widget(name='hubl-circle-team-template')
-  template
-    sib-display.user-thumb(
-      data-src='${await value.user}'
-      fields='account.picture, sup(name, isadmin), sub(profile.city)'
-      value-isadmin='${await value.is_admin}'
-
-      class-account.picture='user-thumb__picture'
-      class-name='user-thumb__name'
-      class-isadmin='user-thumb__admin'
-      class-profile.city='user-thumb__city'
-
-      widget-account.picture='hubl-user-avatar'
-      widget-isadmin='hubl-circle-user-admin'
-    )
-
-sib-widget(name='hubl-circle-user-admin')
-  template ${(await value) != "false" ? "Administrateur" : ""}

src/templates/hubl-customer.pug

-sib-widget(name='hubl-customer')
-  template
-    div.customer-box
-      div
-        h3 Client :
-        ul
-          li #[span Nom de l'entreprise : ]${await value.name}
-          li ${await value.companyRegister ? `<span>Immatriculation de l'entreprise : </span> ${await value.companyRegister}` : ``}
-          li ${await value.address ? `<span>Adresse : </span><br/><p>${await value.address}</p>`: ``}
-      div
-        h3 Contact :
-        ul
-          li #[span(class='mdi-account-outline') ${await value.first_name} ${await value.last_name ? await value.last_name : ""}]${await value.role ? `, ${await value.role}` : ""}
-          li
-            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='norm-weight mdi-cellphone-iphone'>${await value.phone}</span></li>` : ``}

src/templates/hubl-groups.pug

-//- to be deleted when correcting user-profile
-sib-widget(name='hubl-groups-name')
-  template ${value.name}
-

src/templates/hubl-project-team.pug

-include hubl-user-avatar.pug
-
-sib-widget(name='hubl-project-team')
-  template
-    sib-display.user-thumb(
-      data-src='${await value}'
-      fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)'
-      value-isadmin='${await value.is_admin}'
-
-      class-user.account.picture='user-thumb__picture'
-
-      class-user.name='user-thumb__name'
-      class-isadmin='user-thumb__admin'
-      class-user.profile.city='user-thumb__city'
-      class-name='user-thumb__lead'
-
-      widget-user.account.picture='hubl-user-avatar'
-      widget-isadmin='hubl-project-user-admin'
-    )
-
-sib-widget(name='hubl-project-user-admin')
-  template ${(await value) == "false" ? "" : "Administrateur"}

src/templates/hubl-user-avatar.pug

-sib-widget(name='hubl-user-avatar')
-  template ${await value ? `<img src="${await value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}

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

-div.content-box__info
-  sib-link(class="backlink right", next='admin-circle-list') Retour
-
-  h1.centered Créer un canal
-
-  sib-form.button-register(
-    data-src=`${endpoints.circles || endpoints.post.circles}`
-
-    fields='status, name, description'
-
-    label-status='Statut du canal'
-    widget-status='hubl-status'
-
-    class-name='form-label is-light is-full-width'
-    class-description='form-label is-light is-full-width'
-      class-status='form-label is-light is-full-width member-select color'
-
-    label-name='Nom du canal *'
-    label-description='Sous-titre du canal *'
-
-    next='admin-circle-list'
-
-    submit-button='Enregistrer'
-  )

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

-.content-box.full-width.with-form
-  sib-router(default-route='admin-circle-list', hidden)
-    sib-route(name='admin-circle-list')
-    sib-route(name='admin-circle-create')
-    sib-route(name='circle-left')
-
-  div.content-box__header
-    h1.without-margin Administration
-
-  include ../circle/page-circle-left.pug
-
-  #admin-circle-list(hidden)
-    include ../../templates/hubl-user-avatar.pug
-
-    sib-widget(name='hubl-circle-owner')
-      template
-        sib-display.user-thumb.is-spaced(
-          data-src='${await value}'
-          fields='account.picture, sup(name), sub(username)'
-
-          class-account.picture='user-thumb__picture'
-          class-name='user-thumb__name'
-          class-username='user-thumb__username'
-
-          widget-account.picture='hubl-user-avatar'
-        )
-
-
-    div.content-box__info
-
-      div.admin-header
-
-        div.admin-header__title Canaux
-
-        sib-link(
-          class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
-          next='admin-circle-create'
-        ) Créer un canal
-
-      .table
-
-        div.table-header.grey-color
-          div.w33 Nom
-          div.w33 Administrateurs
-          div.w33 Rejoindre
-
-        sib-widget(name='hubl-admin-circle-leave-button')
-          template
-            sib-delete(
-              class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
-              data-src="${src}"
-              data-label='Quitter'
-            )
-
-        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="hubl-admin-circle-leave-button"
-          widget-circle.owner='hubl-circle-owner'
-
-          order-by="circle.name"
-        )
-
-        sib-widget(name='hubl-admin-circle-join-button')
-          template
-            sib-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
-              data-src='${value}'
-
-              fields='user.username'
-              value-user.username='hubl-workaround-493'
-              widget-user.username='sib-form-hidden'
-
-              submit-button='Rejoindre'
-            )
-
-        sib-display(
-          class='table-body'
-
-          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'
-          widget-owner='hubl-circle-owner'
-
-          class-members='w33 cell border cell-with-buttons'
-          widget-members="hubl-admin-circle-join-button"
-
-          order-by="name"
-        )
-
-
-  #admin-circle-create(hidden)
-    include page-admin-circles-create.pug

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

-sib-widget(name='hubl-template-project-title')
-  template
-    p ${value}
-
-div.content-box__info
-  sib-link(class="backlink right" next='admin-project-list') Retour
-
-  sib-widget(name="hubl-admin-project-add-user")
-    template
-      sib-form(
-        data-holder
-        fields='user, project'
-        range-user=`${endpoints.users || endpoints.get.users}`
-        value-project='${src}'
-        widget-project='sib-form-hidden'
-        naked
-      )
-
-  h1.centered Créer un projet
-
-  sib-form.button-register(
-    data-src=`${endpoints.projects || endpoints.post.projects}`
-    
-    fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)'
-
-    class-fieldset-fee='fieldset'
-    value-fieldset-fee='Contributions'
-    widget-fieldset-fee='hubl-template-project-title'
-    
-    class-fieldset-captain='fieldset'
-    value-fieldset-captain='Capitaine'
-    widget-fieldset-captain='hubl-template-project-title'
-
-		label-customer='Nom du client*'
-    class-customer='member-select form-label is-light is-half-width'
-    range-customer=`${endpoints.customers || endpoints.get.customers}`
-    widget-customer='sib-form-auto-completion'
-
-		label-name='Nom du projet*'
-    class-name='form-label is-light is-half-width'
-
-		label-project.description='Description du projet'
-    class-project.description='form-label is-light is-full-width'
-    widget-project.description='sib-form-textarea'
-
-		label-businessProvider.name='Apporteur d\'affaire*'
-    class-businessProvider.name='form-label is-light is-half-width'
-
-		label-businessProvider.fee='Contribution'
-    class-businessProvider.fee='form-label is-light is-half-width'
-
-    label-captain='Capitaine du projet'
-    range-captain=`${endpoints.users || endpoints.get.users}`
-    class-captain='member-select form-label is-light is-half-width'
-    widget-captain='sib-form-auto-completion'
-
-    next='admin-project-list'
-
-    submit-button='Enregistrer'
-  )

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

-.content-box.full-width.with-form
-  sib-router(default-route='admin-project-list', hidden)
-    sib-route(name='admin-project-list')
-    sib-route(name='admin-project-create')
-    sib-route(name='project-left')
-
-  div.content-box__header
-    h1.without-margin Administration
-
-  #project-left(hidden)
-    include ../project/page-project-left.pug
-
-  #admin-project-list(hidden)
-    include ../../templates/hubl-user-avatar.pug
-
-    div.content-box__info
-      div.admin-header
-        div.admin-header__title Projets
-        sib-link(
-          class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
-          next='admin-project-create'
-        ) Créer un projet
-
-      .table
-        div.table-header.grey-color
-          div Nom
-          div Administrateurs
-          div Capitaines
-          div Accès
-
-        sib-widget(name="hubl-admin-project-leave-button")
-          template
-            sib-delete(
-              class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
-              data-src="${src}"
-              data-label='Quitter'
-            )
-
-        sib-widget(name='hubl-project-captain')
-          template
-            sib-display.user-thumb.is-spaced(
-              data-src='${await value}'
-              fields='account.picture, sup(name), sub(username)'
-
-              class-account.picture='user-thumb__picture'
-              class-name='user-thumb__name'
-              class-username='user-thumb__username'
-
-              widget-account.picture='hubl-user-avatar'
-            )
-
-        sib-widget(name='hubl-project-admins')
-          template
-            sib-display(
-              data-src='${value}'
-              fields='user'
-              search-fields='is_admin'
-              search-value-is_admin='true'
-              search-widget-is_admin='sib-form-hidden'
-              widget-user='hubl-project-captain'
-            )
-
-        sib-widget(name="hubl-admin-project-buttons")
-          template
-            sib-display(
-              data-src='${src}'
-              nested-field='members'
-              fields='relation'
-              action-relation='relation'
-              widget-relation='hubl-admin-project-leave-button'
-              search-fields='user'
-              search-widget-user='sib-form-hidden'
-              search-value-user="-"
-              hubl-inherit-user-id="search-value-user"
-            )
-
-        sib-display(
-          class='table-body'
-
-          data-src=`${endpoints.projects || endpoints.get.projects}`
-          fields='name, members, captain, buttons'
-
-          class-name='w25 cell border cell-with-name hashtag'
-          class-members='w25 cell border'
-          class-captain='w25 cell border cell-with-id-card'
-          class-buttons='w25 cell border cell-with-buttons'
-
-          widget-buttons="admin-project-buttons"
-          action-buttons="buttons"
-
-          widget-captain='hubl-project-captain'
-          widget-members='hubl-project-admins'
-        )
-
-  #admin-project-create(hidden)
-    include page-admin-projects-create.pug
\ No newline at end of file

src/views/admin/page-admin-users-create.pug

-div.content-box__info
-  sib-link(class='backlink right', next='admin-users-list') Retour
-
-  h1.centered Ajouter un utilisateur à la plateforme
-
-  sib-form.button-register(
-    data-src=`${endpoints.users || endpoints.post.users}`
-
-    fields='line-1(first_name, last_name), line-2(username, email), line-3(password)'
-
-    class-first_name='form-label is-light is-half-width'
-    class-last_name='form-label is-light is-half-width'
-    class-username='form-label is-light is-half-width'
-    class-email='form-label is-light is-half-width'
-
-    label-first_name='Prénom *'
-    label-last_name='Nom *'
-    label-username='Nom d\'utilisateur *'
-    label-email='E-mail *'
-
-    value-password=''
-    widget-password='sib-form-hidden'
-
-    next='admin-users-list'
-
-    submit-button='Enregistrer'
-  )

src/views/admin/page-admin-users-edit.pug

-div.content-box__info
-  sib-link(class='backlink right', next='admin-users-list') Retour
-
-  h1.centered 
-    span Modifier un utilisateur
-    sib-display(
-      bind-resources=''
-      fields='name'
-    )  
-
-  sib-form.button-register(
-    bind-resources=''
-
-    fields='line-1(first_name, last_name), line-2(username, email)'
-
-    class-first_name='form-label is-light is-half-width'
-    class-last_name='form-label is-light is-half-width'
-    class-username='form-label is-light is-half-width'
-    class-email='form-label is-light is-half-width'
-
-    label-first_name='Prénom *'
-    label-last_name='Nom *'
-    label-username='Nom d\'utilisateur *'
-    label-email='E-mail *'
-
-    next='admin-user-list'
-
-    submit-button='Enregistrer'
-  )

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

-.content-box.full-width.with-form
-  sib-router(default-route='admin-users-list', hidden)
-    sib-route(name='admin-users-list')
-    sib-route(name='admin-users-create')
-    sib-route(name='admin-users-edit')
-
-  div.content-box__header
-    h1.without-margin Administration
-  
-  sib-widget(name='hubl-sib-action-custom')
-    template
-      sib-ac-checker(data-src="${src}", permission='acl:Write')
-        sib-link(
-          class='button rounded reversed button-primary bordered icon-pencil'
-          data-src="${src}"
-          next="${value}"
-        )
-
-
-  #admin-users-list(hidden)
-    div.content-box__info
-      div.admin-header
-        div.admin-header__title Utilisateurs
-        sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
-          sib-link(
-            class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
-            next='admin-users-create'
-          ) Ajouter un utilisateur
-
-      .table
-        div.table-header.grey-color
-          div.w75 Nom
-          div.w25
-      
-        sib-display(
-          class='table-body'
-          data-src=`${endpoints.users || endpoints.get.users}`
-          fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
-
-          class-account.picture='user-thumb__picture'
-          class-name='user-thumb__name'
-          class-username='user-thumb__username'
-          class-profile.city='user-thumb__city'
-          widget-account.picture='hubl-user-avatar'
-
-          label-actions='Edit'
-          action-actions='admin-users-edit'
-          class-actions='w25 cell border cell-with-buttons'
-          widget-actions='hubl-sib-action-custom'
-
-          order-by='username'
-        )
-
-
-  #admin-users-create(hidden)
-    include page-admin-users-create.pug
-
-  #admin-users-edit(hidden)
-    include page-admin-users-edit.pug

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

-.chat-view
-  sib-chat(
-    data-authentication='login',
-    data-auto-login='true',
-    data-bosh-service-url=`${xmpp}`,
-    data-i18n='en',
-    bind-resources
-  )
\ No newline at end of file

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

-div.content-box__info
-
-  include ../../templates/hubl-user-avatar.pug
-
-  sib-widget(name='hubl-team-template-edit')
-    template
-      sib-display.user-thumb(
-        class='w66 cell border cell-with-id-card user-thumb'
-        data-src='${await value.user}'
-        fields='account.picture, sup(name), sub(profile.city)'
-
-        class-account.picture='user-thumb__picture'
-        class-name='user-thumb__name'
-        class-profile.city='user-thumb__city'
-
-        widget-account.picture='hubl-user-avatar'
-      )
-
-      sib-ac-checker(
-        class='w33 cell border'
-        permission="acl:Delete"
-        data-src="${value['@id']}"
-      )
-        sib-delete(
-          class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
-          data-src="${value['@id']}"
-          data-label='Retirer'
-        )
-
-      //- Only to show the table grid
-      sib-ac-checker(
-        class='w33 cell border'
-        no-permission="acl:Delete"
-        data-src="${value['@id']}"
-      )
-
-  sib-link(class="backlink right", bind-resources, next='circle-profile') Retour
-
-  sib-ac-checker(permission='acl:Write', bind-resources)
-    h1 Modifie ton canal
-
-    sib-form.button-register(
-      bind-resources
-
-      fields='status, block-circle__info(name, owner), description'
-      range-owner=`${endpoints.users || endpoints.get.users}`
-
-      label-status='Statut du canal'
-      widget-status='hubl-status'
-
-      label-name='Nom du canal'
-      label-owner='Administrateur ou administratrice'
-      label-description='Sous-titre du canal *'
-
-      class-name='form-label is-light is-half-width'
-      class-owner='form-label is-light is-half-width member-select color'
-      class-description='form-label is-light is-full-width'
-      class-status='form-label is-light is-full-width member-select color'
-
-      widget-owner='sib-form-auto-completion'
-
-      partial=''
-
-      submit-button='Enregistrer'
-      next='circle-information'
-    )
-
-  h2 Liste des membres:
-
-  sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-    sib-form.block.select-add.button-add(
-      bind-resources 
-      nested-field='members'
-      fields='user'
-      range-user=`${endpoints.users || endpoints.get.users}`
-
-      class-user='team form-label is-dark'
-      label-user=''
-      widget-user='sib-form-auto-completion'
-
-      submit-button='Ajouter un membre'
-    )
-
-  .table
-
-    div.table-header.grey-color
-      div.w66 Nom
-      div.w33 Accès
-
-    //-class='table-body'
-    sib-display(
-      class='table-body'
-      bind-resources
-      fields='members'
-
-      multiple-members=''
-      widget-members='hubl-team-template-edit'
-    )
-