feature: admin-circle-list

src/index.pug

@@ -20,16 +20,80 @@ html(lang="en")
       include header.pug
     
     nav#main__menu.segment.bg-color-heading.lg-quarter.float-left
-      p Hi!
+      include menu-left.pug
+
+    main#content.segment.bg-color-third.lg-three-quarter.float-left.notLoggedIn
+      if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
+        #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
+          include page-dashboard.pug
+
+      if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+        #members(hidden, data-view="members").no-sidebar.with-padding
+          include page-directory.pug
+
+      if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+        #job-offers(hidden, data-view="job-offers").no-sidebar.with-padding
+          if (endpoints.post && endpoints.post.joboffers) && (endpoints.get && endpoints.get.joboffers)
+            hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
+            hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
+            hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`)
+          hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+          hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
+          hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+          hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
+          hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+          hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`)
+          include page-job-offers.pug
+
+      if endpoints.projects || (endpoints.get && endpoints.get.projects)
+        #project(hidden, data-view="project").segment.lg-full.with-sidebar
+          if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
+            hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`)
+            hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`)
+            hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`)
+            hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`)
+          hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`)
+          hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`)
+          hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`)
+          include page-project.pug
+
+      if endpoints.circles || (endpoints.get && endpoints.get.circles)
+        #circle(hidden, data-view="circle").with-sidebar
+          if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
+            hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`)
+            hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`)
+            hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`)
+            hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`)
+          hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`)
+          hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`)
+          hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`)
+          include page-circle.pug
+      if endpoints.users || (endpoints.get && endpoints.get.users)
+        #messages(hidden, data-view="messages").with-sidebar
+          include page-messages.pug
+          
+      if endpoints.polls || (endpoints.get && endpoints.get.polls)
+        #polls(hidden, data-view="polls").with-sidebar
+          include page-polls.pug
+
+      if endpoints.events || (endpoints.get && endpoints.get.events)
+        #events(hidden, data-view="events")
+          include page-events.pug
+
+      if endpoints.resources || (endpoints.get && endpoints.get.resources)
+        #resources(hidden, data-view="resources")
+          include page-resources.pug
+
+      #admin(hidden, data-view="admin").segment.lg-full.with-sidebar
+        include page-admin.pug
+
+      #about(data-view="about").no-sidebar.with-padding
+        include page-about.pug
+        
+      if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))
 
-    main#content.segment.bg-color-third.lg-three-quarter.float-left
-      p Hello
 
-    //- header#header.header.is-spaced(role='banner')
-      include header.pug
 
-    //-header#header.segment.bg-color-white.shadow
-      include header.pug
 
     //-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
       include menu-left.pug

src/styles/hubl-framework/buttons/_index.scss

@@ -8,10 +8,13 @@ a {
   display: inline-block;
   padding: 0;
 
+  form {
+    display: inline-block;
+  }
+
   &.button {
-    padding: 8px 20px;
+    padding: 7.5px 20px;
     border-radius: 16.5px;
-    height: 33px;
 
     &.rounded {
       border-radius: 50%;
@@ -25,7 +28,7 @@ a {
     }
     &.icon::before {
       font-size: 15px;
-      margin-right: 10px;
+      margin-right: 6px;
     }
     &.color-primary {
       background-color: white;

src/styles/hubl-framework/commons/_index.scss

@@ -1,4 +1,5 @@
 @import 'colors';
+@import 'loaders';
 @import 'texts';
 @import 'borders';
 @import 'shadows';

src/styles/hubl-framework/commons/loaders.scss

@@ -0,0 +1,72 @@
+.loader {
+  margin: 0 auto;
+  position: relative;
+  width: 80px;
+  height: 20px;
+
+  &.loader-top {
+    top: 30px;
+  }
+
+  div {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: var(--color-menu-background);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+
+  &.loader-menu div {
+    width: 8px;
+    height: 8px;
+    background: var(--color-menu-text);
+  }
+
+  div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+
+  div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+
+  div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+
+  div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}

src/styles/hubl-framework/commons/texts.scss

@@ -19,16 +19,28 @@
     font-size: 18px;
   }
   &-normal {
-    font-weight: 400;
+    *,
+    & {
+      font-weight: 400;
+    }
   }
   &-semibold {
-    font-weight: 600;
+    *,
+    & {
+      font-weight: 600;
+    }
   }
   &-bold {
-    font-weight: 700;
+    *,
+    & {
+      font-weight: 700;
+    }
   }
   &-uppercase {
-    text-transform: uppercase;
+    *,
+    & {
+      text-transform: uppercase;
+    }
   }
   &-underline {
     text-decoration: underline;

src/styles/hubl-framework/commons/user-thumb.scss

@@ -15,7 +15,7 @@
       flex: 0 0 auto;
       height: 50px;
       width: 50px;
-      margin-right: 16px;
+      margin-right: 15px;
       border-radius: 50%;
       overflow: hidden;
 
@@ -34,6 +34,7 @@
         position: absolute;
         top: 0;
         left: 0;
+        border-radius: 50%;
       }
       >object {
         max-height: 40%;
@@ -65,8 +66,13 @@
         }
       }
 
-      .user-thumb__sub-text {
+      .user-thumb-content__sub-text {
-        color: red;
+        display: flex;
+        font-size: 12px;
+
+        &::before {
+          content: "@";
+        }
       }
     }
   }

src/styles/hubl-framework/tables/tables.scss

@@ -1,7 +1,28 @@
 .table-wrapper {
-  overflow: auto;
   position: relative;
   width: 100%;
+  
+  /* Bottom scrollbar */
+  overflow: auto;
+  height: auto;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-heading) var(--color-grey);
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-grey);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-heading);
+    border-radius: 10px;
+  }
 
   .table {
     border-collapse: collapse;

src/styles/index.scss

@@ -5,6 +5,7 @@
 
 
 :root {
+  color: #636363;
   font-size: 14px;
 }
 @import 'hubl-framework/_index';

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

@@ -11,38 +11,41 @@
 
     solid-widget(name='hubl-circle-owner')
       template
-        solid-display.user-thumb.block.is-spaced(
+        solid-display.segment.margin-left-xlarge.user-thumb(
           data-src='${await value}'
-          fields='account.picture, sup(name), sub(username)'
+          fields='account.picture, content(name-and-icon(name), sub(username))'
 
-          class-account.picture='avatar user-thumb__picture'
+          class-account.picture='user-thumb-avatar'
-          class-name='user-thumb__name'
+          class-content='user-thumb-content'
-          class-username='user-thumb__username'
+          class-name-and-icon='user-thumb-content__name-and-icon'
+          class-name='name'
+          class-sub='user-thumb-content__sub-text'
+          class-username=''
 
           widget-account.picture='hubl-user-avatar'
         )
 
-    div.segment.padding-xlarge.border-bottom
+    div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading
       div
         h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
       div.segment.lg-hidden
         button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')
 
-    div.segment.padding-xlarge
+    div.segment.padding-large
-      div.segment.padding-y-small.margin-bottom.clearfix
+      div.segment.margin-bottom-medium.clearfix
         div.segment.lg-half.float-left
-          h3.text-large.text-bold.text-letter-spacing-large(data-trans='circle.list.subTitle')
+          h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
-        div.segment.lg-half.float-left.text-right
+        div.segment.lg-half.float-left.text-right.padding-top-xxsmall
           solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
             solid-link(
-              class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-plus'
+              class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
               next='admin-circle-create' data-trans='circle.list.buttonCreate'
             )
 
       .table-wrapper
-        .table.segment.margin-bottom
+        .table
 
-          div.table-header
+          div.table-header.bg-color-third.text-color-heading
             div.table-cell.w280(data-trans='circle.list.tableHeader1')
             div.table-cell.w280(data-trans='circle.list.tableHeader2')
             div.table-cell.w280(data-trans='circle.list.tableHeader3')
@@ -50,7 +53,7 @@
           solid-widget(name='hubl-admin-circle-leave-button')
             template
               solid-delete(
-                class='button text-bolder text-uppercase button-secondary bordered icon icon-close'
+                class='button text-xsmall text-bold text-uppercase color-secondary bordered'
                 data-src="${src}"
                 data-label=''
                 data-trans='data-label=circle.list.buttonQuit'
@@ -70,8 +73,8 @@
             fields='circle.name, circle.owner, leaveButton'
             loader-id='loader-admin-circles'
 
-            class-circle.name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
+            class-circle.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
-            class-circle.owner='table-cell w280 cell-with-id-card'
+            class-circle.owner='table-cell w280'
             class-leaveButton='table-cell w280'
 
             action-leaveButton="joinButton"
@@ -84,7 +87,7 @@
           solid-widget(name='hubl-admin-circle-join-button')
             template
               solid-form(
-                class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-arrow-right-circle'
+                class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
                 data-src='${value}'
 
                 fields='user.username'
@@ -108,8 +111,8 @@
             fields='name, owner, members'
             loader-id='loader-admin-circles'
 
-            class-name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
+            class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
-            class-owner='table-cell w280 border cell-with-id-card'
+            class-owner='table-cell w280'
             widget-owner='hubl-circle-owner'
 
             class-members='table-cell w280'