feature: project-information - wip

src/styles/index.scss

@@ -10,6 +10,14 @@ main {
   white-space: normal;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.segment {
+  white-space: normal !important;
+}
+
 @import 'header/_index';
 @import 'left-nav/_index';
 @import 'content/_index';
\ No newline at end of file

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

@@ -3,9 +3,8 @@ solid-router(default-route='project-profile', hidden)
   solid-route(name='project-edit')
 
 #project-profile(hidden, data-view="project-profile")
-//-
-  solid-ac-checker(permission='acl:Read', bind-resources)
-    div.segment.padding-large.border-bottom.border-color-grey.clearfix
+  solid-ac-checker.block(permission='acl:Read', bind-resources)
+    div.segment.lg-full.padding-large.border-bottom.border-color-grey
       solid-display.text-xxlarge.text-letter-spacing-large(
         bind-resources
         fields='const-title1, number, customer.name, dash, name'
@@ -26,15 +25,15 @@ solid-router(default-route='project-profile', hidden)
     template 
       solid-link(data-src='\${value}', next='messages')
 
-  div.segment.padding-large.clearfix
+  div.segment.lg-full.padding-large
     div#loader-project-profile.loader
       div
       div
       div
       div
-
-    div.segment.clearfix
-      solid-display.segment.lg-half.float-left(
+  
+    div.whitespace-normal
+      solid-display.segment.lg-half(
         bind-resources
         fields='creationDateSet(title, creationDate)'
         loader-id='loader-project-profile'
@@ -46,23 +45,23 @@ solid-router(default-route='project-profile', hidden)
 
         widget-creationDate='solid-display-value-date'
       )
-      solid-ac-checker.segment.lg-half.float-left.text-right.margin-bottom-large(permission='acl:Append', bind-resources, nested-field='members')
+      
+      solid-ac-checker.segment.lg-half.text-right.margin-bottom-large(permission='acl:Append', bind-resources, nested-field='members')
         solid-ac-checker(permission='acl:Delete', bind-resources)
           solid-link(class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonModify')
         solid-ac-checker(no-permission='acl:Delete', bind-resources)
           solid-link(class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonAdd')
       
-      div.segment.lg-auto.float-right.margin-bottom-large
-        solid-ac-checker(permission='acl:Delete', bind-resources)
-          solid-delete(
-            class='button text-xsmall text-bold text-uppercase color-secondary bordered'
-            bind-resources
-            data-label=''
-            data-trans='data-label=project.profile.buttonDelete'
-            next='admin-projects'
-          )
+      solid-ac-checker.segment.lg-full.text-right.margin-bottom-large(permission='acl:Delete', bind-resources)
+        solid-delete(
+          class='button text-xsmall text-bold text-uppercase color-secondary bordered'
+          bind-resources
+          data-label=''
+          data-trans='data-label=project.profile.buttonDelete'
+          next='admin-projects'
+        )
 
-      solid-widget.segment.lg-auto.float-right.margin-bottom-large(name='hubl-project-leave-button')
+      solid-widget(name='hubl-project-leave-button')
         template
           solid-delete(
             class='button text-xsmall text-bold text-uppercase color-secondary bordered'
@@ -72,29 +71,29 @@ solid-router(default-route='project-profile', hidden)
             next='project-left'
           )
 
-      solid-ac-checker(no-permission='acl:Delete', bind-resources)
+      solid-ac-checker.segment.lg-full.text-right.margin-bottom-large(no-permission='acl:Delete', bind-resources)
         solid-display(
-            bind-resources
-            nested-field='members'
-            fields='relation'
+          bind-resources
+          nested-field='members'
+          fields='relation'
 
-            action-relation='relation'
-            widget-relation='hubl-project-leave-button'
+          action-relation='relation'
+          widget-relation='hubl-project-leave-button'
 
-            search-fields='user'
-            search-widget-user='solid-form-hidden'
-            search-value-user=""
+          search-fields='user'
+          search-widget-user='solid-form-hidden'
+          search-value-user=""
 
-            hubl-inherit-user-id="search-value-user"
+          hubl-inherit-user-id="search-value-user"
         )
-
-    h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans:'project.profile.subTitle')
+  
+    h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans:'project.profile.captain')
     solid-display(
       bind-resources
       fields='captain'
       widget-captain='hubl-captain'
     )
-
+  //-
     br
 
     h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans:'project.profile.subTitle')

src/views/partials/widgets/hubl-captain.pug

 solid-widget(name='hubl-captain')
   template
-    solid-display.user-thumb(
+    solid-display.labelled-avatar(
       data-src="${value}"
-      fields='account.picture, content(name-and-icon(name, user, is_lead), sub(atom, communities))'
+      fields='segment1(account.picture), segment2(name, user, is_lead), segment3(atom, communities)'
+
+      class-segment1='segment'
+      class-segment2='segment margin-left-small'
+      class-segment3='segment margin-left-small'
+
+      class-account.picture='avatar'
+      class-name='text-semibold text-color-heading'
 
-      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-user='icon top-align icon-secondary hover icon-speech'
-      class-sub='user-thumb-content__sub-text community'
-      class-atom='icon icon-third mdi-atom'
+
+      class-atom='icon top-align icon-third mdi-atom'
 
       multiple-communities
       multiple-communities-fields='community.name'