feature: admin-circles

src/index.pug

@@ -51,8 +51,6 @@ html(lang="en")
         include views/partials/menu-left.pug
 
       main#content.segment.lg-three-quarter.text-top.notLoggedIn
-        #about(data-view="about", no-render)
-          include views/page-about.pug
 
         if endpoints.get.projects
           #project(hidden, data-view="project", no-render).with-sidebar.whitespace-normal
@@ -107,11 +105,11 @@ html(lang="en")
         //-     #resources(hidden, data-view="resources", no-render)
         //-       include views/page-resources.pug
 
-        //-   #admin(hidden, data-view="admin").segment.lg-full.with-sidebar
+        #admin(hidden, data-view="admin", no-render).with-sidebar.whitespace-normal
-        //-     include views/page-admin.pug
+          include views/page-admin.pug
 
-        //-   #about(data-view="about")
+        #about(data-view="about", no-render)
-        //-     include views/page-about.pug
+          include views/page-about.pug
           
         //-   if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users
         //-     #profile(hidden, data-view="profile", no-render).no-sidebar

src/views/page-admin.pug

@@ -17,15 +17,15 @@ nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
       if (endpoints.users || (endpoints.get && endpoints.get.users))
         solid-route.segment.lg-full(name='admin-communities')
           li.segment.lg-full.padding-medium
-            span.icon.ci-networking.icon-xlarge.margin-right-small
+            span.icon.ci-networking.icon-xlarge.margin-right-medium
             a(data-trans='admin.menuRight.community')
       if endpoints.circles || (endpoints.get && endpoints.get.circles)
         solid-route.segment.lg-full(name='admin-circles')
           li.segment.lg-full.padding-medium
-            span.icon.ci-bubble-add.icon-xlarge.margin-right-small
+            span.icon.ci-bubble-add.icon-xlarge.margin-right-medium
             a(data-trans='admin.menuRight.circles')
       if endpoints.projects || (endpoints.get && endpoints.get.projects)
         solid-route.segment.lg-full(name='admin-projects')
           li.segment.lg-full.padding-medium
-            span.icon.ci-add.icon-xlarge.margin-right-small
+            span.icon.ci-add.icon-xlarge.margin-right-medium
             a(data-trans='admin.menuRight.projects')

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

@@ -10,31 +10,42 @@ solid-router(default-route='admin-circle-list', hidden)
 
   solid-widget(name='hubl-circle-owner')
     template
-      solid-display.segment.margin-left-xlarge.user-thumb(
+      solid-display.labelled-avatar.two-lines(
         data-src='${await value}'
-        fields='account.picture, content(name-and-icon(name), sub(username))'
+        fields='segment1(account.picture), segment2(line1(name), line2(at, username))'
 
-        class-account.picture='user-thumb-avatar'
+        class-segment1='segment'
-        class-content='user-thumb-content'
+        class-account.picture='avatar'
-        class-name-and-icon='user-thumb-content__name-and-icon'
+
-        class-name='name'
+        class-segment2='segment lg-three-quarter margin-left-xsmall'
-        class-sub='user-thumb-content__sub-text username'
+        class-line1='block'
+        class-name='text-semibold text-color-heading text-sub'
+        class-line2='block'
         class-username=''
 
         widget-account.picture='hubl-user-avatar'
+
+        value-at='@'
       )
 
-  div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading
+  div.segment.lg-full.padding-large.border-bottom.border-color-grey
     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-large
+  div.segment.lg-full.padding-large.whitespace-normal
-    div.segment.margin-bottom-medium.clearfix
+
-      div.segment.lg-half.float-left
+    div#loader-admin-circles.loader.loader-top
+      div
+      div
+      div
+      div
+
+    div.segment.lg-full.margin-bottom-xlarge
+      div.segment.lg-half
         h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
-      div.segment.lg-half.float-left.text-right.padding-top-xxxsmall.padding-bottom-xxxsmall
+      div.segment.lg-half.text-right
         solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
           solid-link(
             class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
@@ -42,13 +53,13 @@ solid-router(default-route='admin-circle-list', hidden)
             data-trans='circle.list.buttonCreate'
           )
 
-    .table-wrapper
+    .segment.table-wrapper
       .table
 
         div.table-header.bg-color-third.text-color-heading
-          div.table-cell.w280(data-trans='circle.list.tableHeader1')
+          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader1')
-          div.table-cell.w280(data-trans='circle.list.tableHeader2')
+          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader2')
-          div.table-cell.w280(data-trans='circle.list.tableHeader3')
+          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader3')
 
         solid-widget(name='hubl-admin-circle-leave-button')
           template
@@ -67,15 +78,16 @@ solid-router(default-route='admin-circle-list', hidden)
 
         solid-display(
           class='table-body'
-
           bind-user
           nested-field='circles'
-          fields='circle.name, circle.owner, leaveButton'
+          fields='cell1(circle.name, circle.description), cell2(circle.owner), cell3(leaveButton)'
           loader-id='loader-admin-circles'
 
-          class-circle.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
+          class-cell1='segment table-cell padding-xsmall lg-third text-left text-top'
-          class-circle.owner='table-cell w280'
+          class-cell2='segment table-cell padding-top-xsmall padding-right-xlarge padding-bottom-xsmall padding-left-xlarge lg-third text-center text-left'
-          class-leaveButton='table-cell w280'
+          class-cell3='segment table-cell padding-xsmall lg-third text-center'
+
+          class-circle.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
 
           action-leaveButton="joinButton"
           widget-leaveButton="hubl-admin-circle-leave-button"
@@ -108,24 +120,20 @@ solid-router(default-route='admin-circle-list', hidden)
           class='table-body'
 
           data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
-          fields='name, owner, members'
+          fields='cell1(name, description), cell2(owner), cell3(members)'
           loader-id='loader-admin-circles'
 
-          class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
+          class-cell1='segment table-cell padding-xsmall lg-third text-left text-top'
-          class-owner='table-cell w280'
+          class-cell2='segment table-cell padding-top-xsmall padding-right-xlarge padding-bottom-xsmall padding-left-xlarge lg-third text-center text-left'
-          widget-owner='hubl-circle-owner'
+          class-cell3='segment table-cell padding-xsmall lg-third text-center'
 
-          class-members='table-cell w280'
+          class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
+
+          widget-owner='hubl-circle-owner'
           widget-members="hubl-admin-circle-join-button"
 
           order-by="name"
         )
 
-    div#loader-admin-circles.loader.loader-top
-      div
-      div
-      div
-      div
-
 #admin-circle-create(hidden, data-view="admin-circle-create")
   include page-admin-circles-create.pug

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

@@ -95,8 +95,8 @@ div.segment.lg-full.padding-large.whitespace-normal
         fields='cell(segment1(user.account.picture), segment2(line1(user.name, is_admin), line2(atom, user.communities))), self'
         loader-id='loader-circle-edit'
 
-        class-cell='segment table-cell padding-top-xsmall padding-right-medium padding-bottom-xsmall padding-left-medium table-cell lg-two-third labelled-avatar two-lines text-left'
+        class-cell='segment table-cell padding-top-xsmall padding-right-medium padding-bottom-xsmall padding-left-medium lg-two-third labelled-avatar two-lines text-left'
-        class-self='segment table-cell padding-top-xsmall padding-right-medium padding-bottom-xsmall padding-left-medium table-cell lg-third text-center'
+        class-self='segment table-cell padding-top-xsmall padding-right-medium padding-bottom-xsmall padding-left-medium lg-third text-center'
 
         class-segment1='segment'
         class-user.account.picture='avatar'

src/views/partials/menu-left.pug

@@ -221,6 +221,6 @@ solid-router#navbar-router(default-route='dashboard')
   //-    )
   //-div.divider
   //-
-  //-solid-route(name='admin', hidden)
+  solid-route(name='admin', hidden)
   //-solid-route.menu(name='profile', hidden)
   solid-route(name='about', hidden)