feature: admin-projects + project-create

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

@@ -37,7 +37,7 @@ div.segment.lg-full.padding-large
     
     widget-status='solid-form-hidden'
     value-status='Private'
-    widget-description='solid-form-textarea'
+    widget-description='solid-form-textarea-label'
     widget-captain='solid-form-dropdown-autocompletion-label'
     widget-linebreak='solid-form-hidden'
 

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

@@ -8,17 +8,18 @@ solid-router(default-route='admin-project-list', hidden)
 
 #admin-project-list(hidden, data-view="admin-project-list")
 
-  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='project.list.title')
     div.segment.lg-hidden
       button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')
 
-  div.segment.padding-large
-    div.segment.margin-bottom-medium.clearfix
-      div.segment.lg-half.float-left
+  div.segment.lg-full.padding-large.whitespace-normal
+
+    div.segment.lg-full.margin-bottom-xlarge
+      div.segment.lg-half
         h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle')
-      div.segment.lg-half.float-left.text-right.padding-top-xxsmall
+      div.segment.lg-half.text-right
         solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
           solid-link(
             class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
@@ -26,14 +27,14 @@ solid-router(default-route='admin-project-list', hidden)
             data-trans='project.list.buttonCreate'
           )
 
-    .table-wrapper
+    .segment.table-wrapper
       .table
 
         div.table-header.bg-color-third.text-color-heading
-          div.table-cell.w280(data-trans='project.list.tableHeader1')
-          div.table-cell.w280(data-trans='project.list.tableHeader2')
-          div.table-cell.w280(data-trans='project.list.tableHeader3')
-          div.table-cell.w230(data-trans='project.list.tableHeader4')
+          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader1')
+          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader2')
+          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader3')
+          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader4')
 
         solid-widget(name="hubl-admin-project-leave-button")
           template
@@ -52,18 +53,22 @@ solid-router(default-route='admin-project-list', hidden)
 
         solid-widget(name='hubl-project-captain')
           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-segment1='segment'
+              class-account.picture='avatar'
 
-              class-account.picture='user-thumb-avatar'
-              class-content='user-thumb-content'
-              class-name-and-icon='user-thumb-content__name-and-icon'
-              class-name='name'
-              class-sub='user-thumb-content__sub-text username'
+              class-segment2='segment lg-three-quarter margin-left-xsmall'
+              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='@'
             )
 
         solid-widget(name='hubl-project-admins')
@@ -91,13 +96,15 @@ solid-router(default-route='admin-project-list', hidden)
 
           bind-user
           nested-field="projects"
-          fields='project.name, project.members, project.captain, leaveButton'
+          fields='cell1(project.customer.name, project.name), cell2(project.members), cell3(project.captain), cell4(leaveButton)'
           loader-id='loader-admin-projects'
 
-          class-project.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
-          class-project.members='table-cell w280'
-          class-project.captain='table-cell w280'
-          class-leaveButton='table-cell w230'
+          class-cell1='segment table-cell padding-xsmall lg-quarter text-left'
+          class-cell2='segment table-cell padding-xsmall lg-quarter text-left'
+          class-cell3='segment table-cell padding-top-xsmall padding-right-small padding-bottom-xsmall padding-left-small lg-quarter text-left'
+          class-cell4='segment table-cell padding-xsmall lg-quarter text-center'
+
+          class-project.customer.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-project-leave-button"
@@ -133,13 +140,15 @@ solid-router(default-route='admin-project-list', hidden)
           class='table-body'
 
           data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
-          fields='name, members, captain, joinButton'
+          fields='cell1(customer.name, name), cell2(members), cell3(captain), cell4(joinButton)'
           loader-id='loader-admin-projects'
 
-          class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
-          class-members='table-cell w280'
-          class-captain='table-cell w280'
-          class-joinButton='table-cell w230'
+          class-cell1='segment table-cell padding-xsmall lg-quarter text-left'
+          class-cell2='segment table-cell padding-xsmall lg-quarter text-left'
+          class-cell3='segment table-cell padding-top-xsmall padding-right-small padding-bottom-xsmall padding-left-small lg-quarter text-left'
+          class-cell4='segment table-cell padding-xsmall lg-quarter text-center'
+
+          class-customer.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
 
           action-joinButton="joinButton" # Workaround: I need members two times
           widget-joinButton="hubl-admin-project-join-button"