feature: project-profile - labelled elements on members and captain

package-lock.json

@@ -8,7 +8,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "@startinblox/hubl-styling-framework": "^1.0.14",
+        "@startinblox/hubl-styling-framework": "^1.0.18",
         "fs-extra": "^9.0.1",
         "normalize.css": "^8.0.1",
         "parcel-bundler": "^1.12.4",
@@ -1442,9 +1442,9 @@
       }
     },
     "node_modules/@startinblox/hubl-styling-framework": {
-      "version": "1.0.14",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.14.tgz",
-      "integrity": "sha512-ikNXqwPK/Y7ZyinpY2xH31Bp+A0in0qyy8EnjuwqCxipd5qv7Glp0HxuHRi/k60kNKonSS06wmalysYMIPG9WA=="
+      "version": "1.0.18",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.18.tgz",
+      "integrity": "sha512-ZMm7M8DPyqq+oyapcS1N3Zzp+Kz86RuTGljVe3cxm2DrYDs8bweQmv/QjUGFUJ1b5U3vEnWO7BYL46u+wo/K4A=="
     },
     "node_modules/@types/q": {
       "version": "1.5.4",
@@ -10603,9 +10603,9 @@
       }
     },
     "@startinblox/hubl-styling-framework": {
-      "version": "1.0.14",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.14.tgz",
-      "integrity": "sha512-ikNXqwPK/Y7ZyinpY2xH31Bp+A0in0qyy8EnjuwqCxipd5qv7Glp0HxuHRi/k60kNKonSS06wmalysYMIPG9WA=="
+      "version": "1.0.18",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.18.tgz",
+      "integrity": "sha512-ZMm7M8DPyqq+oyapcS1N3Zzp+Kz86RuTGljVe3cxm2DrYDs8bweQmv/QjUGFUJ1b5U3vEnWO7BYL46u+wo/K4A=="
     },
     "@types/q": {
       "version": "1.5.4",

package.json

@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@startinblox/hubl-styling-framework": "^1.0.14",
+    "@startinblox/hubl-styling-framework": "^1.0.18",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",
     "parcel-bundler": "^1.12.4",

src/styles/index.scss

@@ -14,6 +14,10 @@ main {
   display: block;
 }
 
+solid-display>div {
+  display: contents !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

@@ -23,7 +23,7 @@ solid-router(default-route='project-profile', hidden)
 
   solid-widget(name='hubl-project-team-contact')
     template 
-      solid-link(data-src='\${value}', next='messages')
+      solid-link.icon.icon-secondary.hover.icon-speech(data-src='\${value}', next='messages')
 
   div.segment.lg-full.padding-large
     div#loader-project-profile.loader
@@ -87,37 +87,36 @@ solid-router(default-route='project-profile', hidden)
           hubl-inherit-user-id="search-value-user"
         )
   
-    h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans:'project.profile.captain')
+    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')
+    h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans='project.profile.subTitle')
 
-    solid-display.user-thumb(
+    solid-display.segment.lg-full.labelled-avatar.two-lines.whitespace-normal.children.lg-children-full.children-margin-bottom-medium(
       bind-resources
       nested-field='members'
-      fields='user.account.picture, content(name-and-icon(user.name, user), sub(atom, user.communities, name))'
+      fields='segment1(user.account.picture), segment2(line1(user.name, user), line2(atom, user.communities))'
 
-      widget-user='hubl-project-team-contact'
+      class-segment1='segment'
+      class-user.account.picture='avatar'
 
-      class-user.account.picture='user-thumb-avatar'
-      class-content='user-thumb-content'
-      class-name-and-icon='user-thumb-content__name-and-icon'
-      class-user.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-segment2='segment lg-three-quarter margin-left-xsmall'
+      class-line1='block'
+      class-user.name='text-semibold text-color-heading text-sub word-spacing-right'
+      class-line2='block'
+      class-atom='icon icon-large icon-third mdi-atom'
+      class-user.communities='lg-full word-spacing-left'
 
       multiple-user.communities
       multiple-user.communities-fields="community.name"
 
-      widget-classGroup='solid-set-div'
       widget-user.account.picture='hubl-user-avatar'
+      widget-user='hubl-project-team-contact'
     )
 
 #project-edit(hidden, data-view="project-edit")

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

+solid-widget(name='hubl-captain-contact')
+    template 
+      solid-link.icon.icon-secondary.hover.icon-speech(data-src='\${value}', next='messages')
+
 solid-widget(name='hubl-captain')
   template
-    solid-display.labelled-avatar.two-lines(
+    solid-display.segment.lg-full.margin-bottom-large.labelled-avatar.two-lines(
       data-src="${value}"
-      fields='segment1(account.picture), segment2(block1(name, user), block2(atom, communities))'
-
+      fields='segment1(account.picture), segment2(line1(name, user), line2(atom, communities))'
 
       class-segment1='segment'
       class-account.picture='avatar'
       
-      class-segment2='segment margin-left-xsmall'
-      class-block1='block'
+      class-segment2='segment lg-three-quarter margin-left-xsmall'
+      class-line1='block'
       class-name='text-semibold text-color-heading text-sub word-spacing-right'
-      class-user='icon icon-secondary hover icon-speech sup-icon'
-      class-block2='block'
-      class-atom='icon icon-large icon-third mdi-atom sub-icon'
-      class-communities='text-top-align word-spacing-left'
+      class-line2='block'
+      class-atom='icon icon-large icon-third mdi-atom'
+      class-communities='lg-full word-spacing-left'
+
+      value-user='${value}'
 
       multiple-communities
       multiple-communities-fields='community.name'
 
       widget-account.picture='hubl-user-avatar'
+      widget-user='hubl-captain-contact'
     )
     
     //- To remove from translate file :