update: clear unused and fixes CSS

src/dependencies.pug

@@ -43,7 +43,5 @@ script(data-default-context, type="application/ld+json")
     |     "account": "http://happy-dev.fr/owl/#account",
     |     "jabberID": "foaf:jabberID",
     |     "picture": "foaf:depiction",
-    |     "firstName": "http://happy-dev.fr/owl/#first_name",
-    |     "lastName": "http://happy-dev.fr/owl/#last_name",
     |     "isAdmin": "http://happy-dev.fr/owl/#is_admin"
     | }

src/header.pug

@@ -17,7 +17,7 @@ include templates/hd-user-avatar.pug
 details#user-controls.notLoggedIn
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
-      fields='firstName, account.picture'
+      fields='first_name, account.picture'
       widget-account.picture='hd-user-avatar'
       bind-user
     )

src/page-circle.pug

@@ -10,7 +10,7 @@
           class-description='h1-aside description'
         )
         button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
-    div.content-box__info
+    div
       sib-ac-checker(permission='acl:Read', bind-resources)
         #circle-chat(hidden)
           include views/circle/page-circle-chat.pug

src/page-project.pug

@@ -16,7 +16,7 @@
         .mobile-sidebar-button.jsMobileSidebarOpenButton
           button.icon-arrow-left-circle
             span MENU
-    div.content-box__info
+    div
       sib-ac-checker(permission='acl:Read', bind-resources)
         #project-chat(hidden)
           include views/project/page-project-chat.pug

src/styles/base/form.scss

@@ -1,3 +1,18 @@
+#admin-circle-create,
+#admin-project-create {
+
+  input[type='submit'] {
+    @extend .button,
+    .text-bold,
+    .text-uppercase,
+    .reversed,
+    .button-dark,
+    .bordered;
+    margin-left: auto;
+    margin-top: 3.2rem;
+  }
+}
+
 .content-box {
 
   &.with-form {
@@ -23,16 +38,6 @@
       padding-bottom: 0.8rem;
     }
 
-    p.center {
-      margin: 0;
-      text-align: center;
-    }
-
-    [name$='-text'] {
-      font-size: 1.5rem;
-      margin-bottom: 2rem;
-    }
-
     [name^='block-'] {
       margin-bottom: 2.75rem;
     }
@@ -153,9 +158,7 @@
 		  margin-top: 2.7rem;
     }
     
-    .form-edit {
+    .form-edit>form {
-
-      >form {
 
       input[type='submit'] {
         @extend .button,
@@ -167,7 +170,6 @@
         margin-left: auto;
         margin-top: 3.2rem;
       }
-      }
     }
 
 		.form-label {

src/styles/base/header.scss

@@ -65,6 +65,7 @@
   
   details {
     margin-right: 2.5rem;
+    position: relative;
 
     @include breakpoint(sm) {
       margin-right: 0;
@@ -82,7 +83,7 @@
     }
   }
   
-  details {
+  .sib-notifications__container {
     position: relative;
   
     .sib-notifications__button {
@@ -169,7 +170,7 @@
           width: 45%;
         }
   
-        sib-display-value[name='firstName'] {
+        sib-display-value[name='first_name'] {
           @include icon('arrow-down');
           align-items: center;
           display: flex;
@@ -241,7 +242,7 @@
   
         div {
   
-          sib-display-value[name='firstName'] {
+          sib-display-value[name='first_name'] {
             @include icon('close');
   
             &::before {

src/styles/base/main.scss

@@ -1,12 +1,3 @@
-$breakpoints: (phone: 480px,
-  tablet: 768px,
-  desktop: 1024px) !default;
-
-[hidden],
-.hidden {
-  display: none !important;
-}
-
 * {
   outline: none;
 }
@@ -95,6 +86,10 @@ nav {
   display: contents;
 }
 
+[hidden],
+.hidden {
+  display: none !important;
+}
 
 img {
   max-height: 100%;
@@ -121,12 +116,6 @@ h6 {
   }*/
 }
 
-.h2-like {
-  display: block;
-  margin: 14.94px 0;
-  width: 100%;
-}
-
 h1, .h1-like {
   color: $color-233-18-29;
   font-size: 2rem;
@@ -143,6 +132,12 @@ h2, .h2-like {
   text-transform: uppercase;
 }
 
+.h2-like {
+  display: block;
+  margin: 14.94px 0;
+  width: 100%;
+}
+
 h3 {
   color: $color-216-4-22;
   font-size: 1.7rem;
@@ -164,21 +159,6 @@ h5 {
   padding: 3.2rem;
 }
 
-#admin-circle-create,
-#admin-project-create {
-  
-  input[type='submit'] {
-    @extend .button,
-    .text-bold,
-    .text-uppercase,
-    .reversed,
-    .button-dark,
-    .bordered;
-    margin-left: auto;
-    margin-top: 3.2rem;
-  }
-}
-
 .content-box {
   @include window-style-modal();
   display: flex;
@@ -199,6 +179,7 @@ h5 {
   }
 }
 
+/* Header inside circle, project view  */
 .content-box__header {
   border-bottom: 1px solid $color-221-51-90;
   padding: 3rem;
@@ -257,6 +238,12 @@ h5 {
   }
 }
 
+.content-box__info {
+  @extend %padding-block;
+  display: flex;
+  flex-direction: column;
+}
+
 .modal {
   color: white;
   margin: 75px;
@@ -280,11 +267,6 @@ h5 {
   }
 }
 
-.drive {
-  width: 100%;
-  border: 0;
-}
-
 .backlink {
   @include icon('arrow-left-circle');
   color: $color-233-18-29;
@@ -297,6 +279,11 @@ h5 {
     margin-right: 1rem;
     text-decoration: none;
   }
+
+  &.right {
+    display: block;
+    text-align: right;
+  }
 }
 
 .name {
@@ -342,6 +329,7 @@ h5 {
 @import 'table';
 @import 'header';
 @import 'menu-left';
+@import 'user-thumb';
 
 // Button global CSS
 sib-delete,

src/styles/base/table.scss

@@ -6,17 +6,6 @@
 #admin-project-list,
 #admin-project-create {
 
-  .content-box__info {
-    @extend %padding-block;
-    display: flex;
-    flex-direction: column;
-
-    .backlink {
-      text-align: right;
-      display: block;
-    }
-  }
-
   .table {
 
     .table-header {
@@ -85,83 +74,35 @@
       padding-top: 2.5rem;
     }
 
-    .cell-with-id-card>div,
+    .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */ {
-    /* for the table in circle-edit */
+      @extend %user-thumb__grid;
-    .cell-with-id-card>sib-display>div,
-    project-captain[name='user']>sib-display>div {
-      /* for the captain's cell in project-admin */
-      display: grid;
-      grid-column-gap: 1.6rem;
-      grid-template-columns: 7vh auto;
-      grid-template-rows: repeat(2, 5.2vh);
       padding: 0 2.2rem;
 
-      >[name$='account.picture'] {
+      >.user-thumb__picture {
-        align-items: center;
+        @extend %user-thumb__picture;
-        align-self: center;
-        background-color: $color-213-20-91;
-        border-radius: 50%;
-        display: flex;
-        grid-column: 1 / span 1;
-        grid-row: 1 / span 2;
-        height: 7vh;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        width: 7vh;
-
-        img {
-          background-color: white;
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
-        }
-
-        object {
-          height: 45%;
-          width: 45%;
-        }
       }
 
       >[name='sup'] {
-        align-self: end;
+        @extend %user-thumb__grid-sup;
-        display: flex;
-        grid-column: 2 / span 1;
-        grid-row: 1 / span 1;
-        margin-bottom: 0.50rem;
 
-        [name$='name'] {
+        .user-thumb__name {
-          color: #7A7F85;
+          @extend %user-thumb__name;
-          font-weight: 600;
-          margin-right: 1rem;
         }
 
-        sib-multiple>div {
+        .user-thumb__groups {
-          display: flex;
+          @extend %user-thumb__groups;
-
-          [name='groups'] {
-            @extend %tag-role;
-          }
         }
       }
 
       >[name='sub'] {
-        align-self: start;
+        @extend %user-thumb__grid-inf;
-        grid-column: 2 / span 1;
-        grid-row: 2 / span 1;
-        margin-top: 0.50rem;
-
-        >[name$='username']:not(:empty) {
-          align-items: center;
-          display: flex;
-
-          &::before {
-            content: '@';
 
+        >.user-thumb__username:not(:empty) {
+          @extend %user-thumb__username;
         }
+
+        >.user-thumb__city:not(:empty) {
+          @extend %user-thumb__city;
         }
       }
     }

src/styles/base/user-thumb.scss

@@ -0,0 +1,108 @@
+%user-thumb__grid {
+  display: grid;
+  grid-column-gap: 1.6rem;
+  grid-template-columns: 7vh auto;
+  grid-template-rows: repeat(2, 5.2vh);
+}
+
+%user-thumb__grid-sup {
+  align-items: center;
+  align-self: end;
+  display: flex;
+  grid-column: 2 / span 1;
+  grid-row: 1 / span 1;
+  margin-bottom: 0.50rem;
+}
+
+%user-thumb__grid-inf {
+  align-self: start;
+  grid-column: 2 / span 1;
+  grid-row: 2 / span 1;
+  margin-top: 0.50rem;
+}
+
+%user-thumb__picture {
+  align-items: center;
+  align-self: center;
+  background-color: $color-213-20-91;
+  border-radius: 50%;
+  display: flex;
+  grid-column: 1 / span 1;
+  grid-row: 1 / span 2;
+  height: 7vh;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 7vh;
+
+  img {
+    background-color: white;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  object {
+    height: 45%;
+    width: 45%;
+  }
+}
+
+%user-thumb__name {
+  color: #7A7F85;
+  font-weight: 600;
+  margin-right: 1rem;
+}
+
+%user-thumb__groups {
+  display: flex;
+  margin-bottom: 1px;
+  margin-left: 0.6rem;
+
+  [name='groups'],
+  [name='user.groups'] {
+    @extend %tag-role;
+  }
+}
+
+%user-thumb__admin {
+  @extend %tag-admin;
+}
+
+%user-thumb__username {
+  align-items: center;
+  display: flex;
+
+  &::before {
+    content: '@';
+  }
+}
+
+%user-thumb__city {
+  @include mdi('atom');
+  align-items: center;
+  display: flex;
+  margin-right: 1.6rem;
+
+  &::before {
+    color: $color-43-100-50;
+    margin-right: 0.50rem;
+  }
+}
+
+%user-thumb__lead {
+  @include icon('eyeglass');
+  align-items: center;
+  display: flex;
+
+  &::before {
+    color: $color-43-100-50;
+    font-size: 1.9rem;
+    font-weight: bold;
+    margin-left: 0;
+    margin-right: 0.50rem;
+  }
+}

src/styles/components/_index.scss

@@ -1,5 +1,5 @@
 @import 'chat';
-@import 'comment.scss';
+@import 'comment';
 @import 'filters';
 @import 'howto';
 @import 'sidebar';

src/styles/components/howto.scss

@@ -12,6 +12,3 @@
     flex-shrink: 0;
   }
 }
-
-
-

src/styles/components/tags.scss

@@ -15,6 +15,5 @@
   font-size: 1.4rem;
   font-weight: 400;
   margin-left: 0.6rem;
-  margin-top: -2px;
+  padding: 0.35rem 0.98rem;
-  padding: 0.3rem 0.98rem;
 }

src/styles/index.scss

@@ -18,7 +18,7 @@ div#viewport {
     @import 'components/index';
     @import 'layout/members/index';
     @import 'layout/job-offers/index';
-    @import 'layout/project-profile/index';
+    @import 'layout/project/index';
     @import 'layout/circle/index';
     @import 'layout/user/index';
     @import 'layout/events/index';

src/styles/layout/circle/_index.scss

@@ -1,3 +1,2 @@
-@import 'circle';
 @import 'circle-profile';
 @import 'circle-admin';

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

@@ -8,62 +8,22 @@
   .block {
 
      /* peut-être à mettre dans main.scss */
-    circle-team-template>sib-display>div {
+    .user-thumb>div {
-      display: grid;
+      @extend %user-thumb__grid;
-      grid-column-gap: 1.6rem;
-      grid-template-columns: 7vh auto;
-      grid-template-rows: repeat(2, 5.2vh);
 
-      >[name='account.picture'] {
+      >.user-thumb__picture {
-        align-items: center;
+        @extend %user-thumb__picture;
-        align-self: center;
-        background-color: $color-213-20-91;
-        border-radius: 50%;
-        display: flex;
-        grid-column: 1 / span 1;
-        grid-row: 1 / span 2;
-        height: 7vh;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        width: 7vh;
-
-        img {
-          background-color: white;
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
-        }
-
-        object {
-          height: 45%;
-          width: 45%;
-        }
       }
 
       >[name='sup'] {
-        align-items: center;
+        @extend %user-thumb__grid-sup;
-        align-self: end;
-        display: flex;
-        grid-column: 2 / span 1;
-        grid-row: 1 / span 1;
-        margin-bottom: 0.50rem;
 
-        .user-name {
+        .user-thumb__name {
-          font-weight: 600;
+          @extend %user-thumb__name;
         }
 
         .tag-group {
-          display: flex;
+          @extend %user-thumb__groups;
-          margin-bottom: 1px;
-          margin-left: 0.6rem;
-
-          [name='groups'] {
-            @extend %tag-role;
-          }
         }
 
         .tag-admin:not(:empty) {
@@ -72,20 +32,10 @@
       }
 
       >[name='sub'] {
-        align-self: start;
+        @extend %user-thumb__grid-inf;
-        grid-column: 2 / span 1;
-        grid-row: 2 / span 1;
-        margin-top: 0.50rem;
 
-        >.city:not(:empty) {
+        >.user-thumb__city:not(:empty) {
-          @include mdi('atom');
+          @extend %user-thumb__city;
-          align-items: center;
-          display: flex;
-
-          &::before {
-            color: $color-43-100-50;
-            margin-right: 0.50rem;
-          }
         }
       }
     }

src/styles/layout/circle/circle.scss

@@ -1,191 +0,0 @@
-#circle-information,
-#circle-edit,
-#admin-circle-list,
-#admin-circle-create,
-#admin-project-list,
-#admin-project-create {
-
-  .content-box__info {
-    @extend %padding-block;
-    display: flex;
-    flex-direction: column;
-
-    .backlink {
-      text-align: right;
-      display: block;
-    }
-  }
-
-  .table {
-
-    .table-header {
-      display: flex;
-      flex: 1;
-      font-size: 1.6rem;
-      font-weight: 600;
-      justify-content: space-around;
-      text-align: center;
-
-      &.grey-color {
-        background: $color-228-25-79;
-        color: white;
-      }
-
-      >* {
-        border-right: 1px solid white;
-        flex: 1;
-        padding: 2.1rem 0;
-        text-align: center;
-      }
-
-      >*:last-of-type {
-        border-right: 1px solid $color-228-25-79;
-      }
-    }
-
-    .table-body {
-
-      >div:first-of-type>sib-display>div,
-      team-template-edit[name='members'] {
-        display: flex;
-        border-left: 1px solid $color-228-25-79;
-      }
-      
-      .border {
-        border-bottom: 1px solid $color-228-25-79;
-        border-right: 1px solid $color-228-25-79;
-      }
-      
-      .cell {
-        text-align: center;
-        word-wrap: break-word;
-      }
-      
-      .w25 {
-        width: 25%;
-      }
-      
-      .w33 {
-        width: 33.3333%;
-      }
-
-      .w50 {
-        width: 50%;
-      }
-
-      .hashtag::before {
-        content: '#';
-      }
-    }
-
-    .cell-with-name {
-      color: $color-233-18-29;
-      font-weight: 600;
-      padding-top: 2.5rem;
-    }
-
-    .cell-with-id-card>div, /* for the table in circle-edit */
-    .cell-with-id-card>sib-display>div,
-    project-captain[name='user']>sib-display>div { /* for the captain's cell in project-admin */
-      display: grid;
-      grid-column-gap: 1.6rem;
-      grid-template-columns: 7vh auto;
-      grid-template-rows: repeat(2, 5.2vh);
-      padding: 0 2.2rem;
-
-      >[name$='account.picture'] {
-        align-items: center;
-        align-self: center;
-        background-color: $color-213-20-91;
-        border-radius: 50%;
-        display: flex;
-        grid-column: 1 / span 1;
-        grid-row: 1 / span 2;
-        height: 7vh;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        width: 7vh;
-
-        img {
-          background-color: white;
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
-        }
-
-        object {
-          height: 45%;
-          width: 45%;
-        }
-      }
-
-      >[name='sup'] {
-        align-self: end;
-        display: flex;
-        grid-column: 2 / span 1;
-        grid-row: 1 / span 1;
-        margin-bottom: 0.50rem;
-
-        [name$='name'] {
-          color: #7A7F85;
-          font-weight: 600;
-          margin-right: 1rem;
-        }
-
-        sib-multiple>div {
-          display: flex;
-
-          [name='groups'] {
-            @extend %tag-role;
-          }
-        }
-      }
-
-      >[name='sub'] {
-        align-self: start;
-        grid-column: 2 / span 1;
-        grid-row: 2 / span 1;
-        margin-top: 0.50rem;
-
-        >[name$='username']:not(:empty) {
-          align-items: center;
-          display: flex;
-
-          &::before {
-            content: '@';
-
-          }
-        }
-      }
-    }
-
-    .cell-with-buttons {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      
-      [name='button'] {
-        
-        input[type='submit'] {
-          @extend .button,
-          .text-bold,
-          .text-uppercase,
-          .reversed,
-          .button-blue,
-          .bordered,
-          .btn-margin-left;
-        }
-      }
-    }
-
-    sib-ac-checker {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-    }
-  }
-}

src/styles/layout/job-offers/job-offers.scss

@@ -75,7 +75,7 @@ sib-job-board {
               margin: 0.25em;
             }
 
-            [name='author.firstName'] {
+            [name='author.first_name'] {
               color: $color-0-0-29;
               font-weight: 600;
             }

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

@@ -1,177 +0,0 @@
-#project-profile {
-
-  .button-question__position {
-    position: relative;
-    bottom: 5px;
-  }
-
-  .button-question__color {
-    color: $color-216-4-22;
-  }
-
-  .customer-box {
-    display: flex;
-    margin: 1.6rem 0;
-
-    >* {
-      border: 1px solid $color-221-51-90;
-      flex: 0 1 50%;
-      padding: 1.7rem 2rem;
-
-      &:first-child {
-
-        li:last-child {
-          margin-top: 3rem;
-
-          p {
-            margin-top: 0.8rem;
-          }
-        }
-      }
-
-      &:last-child {
-        border-left: none;
-
-        li {
-          margin-bottom: 1.5rem;
-        }
-      }
-    }
-  }
-
-  .customer-logo {
-    box-sizing: border-box;
-    display: flex;
-    height: 8.5vh;
-    justify-content: flex-end;
-    margin-top: 20px;
-    text-align: end;
-    width: 15vw;
-  }
-
-  hd-captain>sib-display>div,
-  hd-project-team>sib-display>div { /* Maybe move it in main.scss. /!\ some fields are different */
-    display: grid;
-    grid-column-gap: 1.6rem;
-    grid-template-columns: 7vh auto;
-    grid-template-rows: repeat(2, 5.2vh);
-
-    >[name='user.account.picture'],
-    >[name='account.picture'] {
-      align-items: center;
-      align-self: center;
-      background-color: $color-213-20-91;
-      border-radius: 50%;
-      display: flex;
-      grid-column: 1 / span 1;
-      grid-row: 1 / span 2;
-      height: 7vh;
-      justify-content: center;
-      overflow: hidden;
-      position: relative;
-      width: 7vh;
-
-      img {
-        background-color: white;
-        height: 100%;
-        left: 0;
-        object-fit: cover;
-        position: absolute;
-        top: 0;
-        width: 100%;
-      }
-
-      object {
-        height: 45%;
-        width: 45%;
-      }
-    }
-
-    >[name='sup'] {
-      align-self: end;
-      display: flex;
-      grid-column: 2 / span 1;
-      grid-row: 1 / span 1;
-      margin-bottom: 0.50rem;
-
-      .user-name {
-        font-weight: 600;
-      }
-
-      sib-multiple {
-        display: flex;
-        margin-left: 1rem;
-
-        [name='groups'],
-        [name='user.groups'] {
-          @extend %tag-role;
-        }
-      }
-
-      .tag-admin:not(:empty) {
-        @extend %tag-admin;
-      }
-    }
-
-    >[name='sub'] {
-      align-self: start;
-      grid-column: 2 / span 1;
-      grid-row: 2 / span 1;
-      margin-top: 0.50rem;
-
-      >[name$='profile.city']:not(:empty) {
-        @include mdi('atom');
-        align-items: center;
-        display: flex;
-        margin-right: 1.6rem;
-
-        &::before {
-          color: $color-43-100-50;
-          margin-right: 0.50rem;
-        }
-      }
-
-      >[name$='name']:not(:empty),
-      >[name='is_lead'] {
-        @include icon('eyeglass');
-        align-items: center;
-        display: flex;
-
-        &::before {
-          color: $color-43-100-50;
-          font-size: 1.9rem;
-          font-weight: bold;
-          margin-left: 0;
-          margin-right: 0.50rem;
-        }
-      }
-    }
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-
-    li {
-      margin-bottom: 0.5em;
-
-      span::before {
-        color: $color-43-100-50;
-        font-size: 2.2rem;
-        margin: 0 1rem 0 0;
-      }
-
-      span {
-        font-weight: bold;
-
-        &.link-color {
-          color: $color-244-73-62;
-        }
-
-        &.norm-weight {
-          font-weight: normal;
-        }
-      }
-    }
-  }
-}

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

@@ -1,8 +0,0 @@
-#project-profile {
-
-  .content-box__info {
-    @extend %padding-block;
-    display: flex;
-    flex-direction: column;
-  }
-}

src/styles/layout/project/_index.scss

@@ -1,2 +1 @@
-@import 'project';
 @import 'project-profile';

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

@@ -0,0 +1,115 @@
+#project-profile {
+
+  .button-question__position {
+    position: relative;
+    bottom: 5px;
+  }
+
+  .button-question__color {
+    color: $color-216-4-22;
+  }
+
+  .customer-box {
+    display: flex;
+    margin: 1.6rem 0;
+
+    >* {
+      border: 1px solid $color-221-51-90;
+      flex: 0 1 50%;
+      padding: 1.7rem 2rem;
+
+      &:first-child {
+
+        li:last-child {
+          margin-top: 3rem;
+
+          p {
+            margin-top: 0.8rem;
+          }
+        }
+      }
+
+      &:last-child {
+        border-left: none;
+
+        li {
+          margin-bottom: 1.5rem;
+        }
+      }
+    }
+  }
+
+  .customer-logo {
+    box-sizing: border-box;
+    display: flex;
+    height: 8.5vh;
+    justify-content: flex-end;
+    margin-top: 20px;
+    text-align: end;
+    width: 15vw;
+  }
+
+  .user-thumb>div {
+    /* Maybe move it in main.scss. /!\ some fields are different */
+    @extend %user-thumb__grid;
+
+    >.user-thumb__picture {
+      @extend %user-thumb__picture;
+    }
+
+    >[name='sup'] {
+      @extend %user-thumb__grid-sup;
+
+      .user-thumb__name {
+        @extend %user-thumb__name;
+      }
+
+      sib-multiple {
+        @extend %user-thumb__groups;
+      }
+
+      .tag-admin:not(:empty) {
+        @extend %tag-admin;
+      }
+    }
+
+    >[name='sub'] {
+      @extend %user-thumb__grid-inf;
+
+      >.user-thumb__city:not(:empty) {
+        @extend %user-thumb__city;
+      }
+
+      >.user-thumb__lead:not(:empty) {
+        @extend %user-thumb__lead;
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      margin-bottom: 0.5em;
+
+      span::before {
+        color: $color-43-100-50;
+        font-size: 2.2rem;
+        margin: 0 1rem 0 0;
+      }
+
+      span {
+        font-weight: bold;
+
+        &.link-color {
+          color: $color-244-73-62;
+        }
+
+        &.norm-weight {
+          font-weight: normal;
+        }
+      }
+    }
+  }
+}

src/templates/hd-captain.pug

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

src/templates/hd-circle-team.pug

@@ -2,15 +2,16 @@ include hd-user-avatar.pug
 
 sib-widget(name='circle-team-template')
   template
-    sib-display(
+    sib-display.user-thumb(
       data-src='${await value.user}'
       fields='account.picture, sup(name, isadmin, groups), sub(profile.city)'
       value-isadmin='${await value.is_admin}'
 
-      class-name='user-name'
+      class-account.picture='user-thumb__picture'
+      class-name='user-thumb__name'
       class-isadmin='tag-admin'
       class-groups='tag-group'
-      class-profile.city='city'
+      class-profile.city='user-thumb__city'
 
       widget-account.picture='hd-user-avatar'
       widget-isadmin='hd-circle-user-admin'

src/templates/hd-customer.pug

@@ -10,7 +10,7 @@ sib-widget(name='hd-customer')
       div
         h3 Contact:
         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-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}

src/templates/hd-project-team.pug

@@ -2,15 +2,18 @@ include hd-user-avatar.pug
 
 sib-widget(name='hd-project-team')
   template
-    sib-display(
+    sib-display.user-thumb(
       data-src='${await value}'
       fields='user.account.picture, sup(user.name, isadmin, user.groups), sub(user.profile.city, name)'
       value-isadmin='${await value.is_admin}'
 
-      class-user.name='user-name'
+      class-user.account.picture='user-thumb__picture'
+
+      class-user.name='user-thumb__name'
       class-isadmin='tag-admin'
       class-user.groups='tag-group'
-      class-user.profile.city='city'
+      class-user.profile.city='user-thumb__city'
+      class-name='user-thumb__lead'
 
       widget-user.account.picture='hd-user-avatar'
       widget-isadmin='hd-project-user-admin'

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

@@ -1,11 +1,9 @@
 div.content-box__info
-  sib-link(class="backlink", next='admin-circle-list') Back
+  sib-link(class="backlink right", next='admin-circle-list') Back
 
   h1.centered New circle
 
-  p.center Here you can create a new circle according to your interests, what you want to share, etc.
+  sib-form(
-
-  sib-form.block(
     data-src=`${endpoints.circles || endpoints.post.circles}`
 
     fields='name, description'

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

@@ -4,8 +4,8 @@
     sib-route(name='admin-circle-create')
     sib-route(name='circle-left')
 
-  div.content-box__header.with-description
+  div.content-box__header
-    h1.title-left.without-margin Administration
+    h1.without-margin Administration
 
 
   #circle-left(hidden)
@@ -17,10 +17,14 @@
 
     sib-widget(name='circle-owner')
       template
-        sib-display(
+        sib-display.user-thumb(
           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='hd-user-avatar'
         )
 

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

@@ -3,7 +3,7 @@ sib-widget(name='hd-template-project-title')
     p ${value}
 
 div.content-box__info
-  sib-link(class="backlink" next='admin-project-list') Back
+  sib-link(class="backlink right" next='admin-project-list') Back
 
   sib-widget(name="admin-project-add-user")
     template
@@ -18,7 +18,7 @@ div.content-box__info
 
   h1.centered New project
 
-  sib-form.block(
+  sib-form(
     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)'

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

@@ -4,8 +4,8 @@
     sib-route(name='admin-project-create')
     sib-route(name='project-left')
 
-  div.content-box__header.with-description
+  div.content-box__header
-    h1.title-left.without-margin Administration
+    h1.without-margin Administration
 
   #project-left(hidden)
     include ../project/page-project-left.pug
@@ -38,10 +38,14 @@
 
         sib-widget(name='project-captain')
           template
-            sib-display(
+            sib-display.user-thumb(
               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='hd-user-avatar'
             )
 

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

@@ -8,7 +8,7 @@
 
   #admin-users-list(hidden)
     div.content-box__info
-      sib-display.block(
+      sib-display(
         data-src=`${endpoints.users || endpoints.get.users}`
         fields="account.picture, name, username, email, groups"
         multiple-groups=""

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

@@ -7,11 +7,16 @@ div.content-box__info
 
   sib-widget(name='team-template-edit')
     template
-      sib-display(
+      sib-display.user-thumb(
-        class='w50 cell border cell-with-id-card'
+        class='w50 cell border cell-with-id-card user-thumb'
         data-src='${await value.user}'
         fields='account.picture, sup(name, groups), sub(profile.city)'
 
+        class-account.picture='user-thumb__picture'
+        class-name='user-thumb__name'
+        class-groups='user-thumb__groups'
+        class-profile.city='user-thumb__city'
+
         widget-account.picture='hd-user-avatar'
 
         multiple-groups=''
@@ -36,12 +41,12 @@ div.content-box__info
         data-src="${value['@id']}"
       )
 
-  sib-link(class="backlink", bind-resources, next='circle-profile') Back
+  sib-link(class="backlink right", bind-resources, next='circle-profile') Back
 
   sib-ac-checker(permission='acl:Write', bind-resources)
     h1 Edit your circle
 
-    sib-form.block.form-edit(
+    sib-form.form-edit(
       bind-resources
 
       fields='block-circle__info(name, owner), description'

src/views/job-offer/page-job-offer-create.pug

@@ -1,32 +1,19 @@
 .content-box.with-padding.with-form
   h1 Post a new job offer
-  p.center This form allows you to share an offer to all members of the network.
   
-  sib-widget(name='title-text')
+  sib-form(
-    template
-      p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".
-
-  sib-widget(name='description-text')
-    template
-      p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
-  
-  sib-form.block(
     data-src=`${endpoints.joboffers || endpoints.post.joboffers}`
     range-skills=`${endpoints.skills || endpoints.get.skills}`
 
-    fields='title, title-text, description, description-text, skills, closingDate'
+    fields='title, description, skills, closingDate'
 
     class-title='field form-label is-light is-expanded'
     label-title='Title*'
     
-    widget-title-text='title-text'
-    
     class-description='field form-label is-light is-expanded'
     label-description='Description*'
     widget-description='sib-form-textarea'
     
-    widget-description-text='description-text'
-    
     class-skills='form-label is-dark'
     label-skills='The required skills for this mission:*'
     multiple-skills='sib-multiple-select'

src/views/job-offer/page-job-offer-edit.pug

@@ -1,7 +1,7 @@
 .content-box.with-padding.with-form
   h1 Edit your job offer
   
-  sib-form.block(
+  sib-form(
     bind-resources
     range-skills=`${endpoints.skills || endpoints.get.skills}`
 

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

@@ -6,11 +6,11 @@ div.content-box__info
     template
       label ${label}
 			
-  sib-link(class='backlink', bind-resources, next='project-profile') Back
+  sib-link(class='backlink right', bind-resources, next='project-profile') Back
 
   h1 Edit your project
 
-  sib-form.block.form-edit(
+  sib-form.form-edit(
 	  bind-resources
 	
 	  fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)'

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

@@ -55,7 +55,7 @@ sib-router(default-route='project-profile', hidden)
 
     h2 Customer informations:
 
-    sib-display.block(
+    sib-display(
       bind-resources
       fields='customer'