feature: project-profile (part 1)

src/page-project.pug

@@ -1,25 +1,6 @@
 .views-container.sidebar-is-closed.bg-color-white
-  .content-box.full-width
+  .content-box
     .content-box__height
-      div.segment.padding-xlarge.border-bottom
-        solid-ac-checker(permission='acl:Read', bind-resources)
-          div
-            solid-display.text-xlarge.text-letter-spacing-large(
-              bind-resources
-              fields='const-title1, number, customer.name, dash, name'
-
-              class-const-title1='text-color-heading text-bolder text-uppercase'
-              class-number='text-color-heading text-bolder text-uppercase word-spacing-right'
-              class-customer.name='text-color-heading text-bolder text-uppercase'
-              class-dash='text-color-heading text-bolder text-xlarge'
-              class-name=''
-        
-              value-const-title1='N°'
-              value-dash=' - '
-            )
-          div.segment.lg-hidden
-            button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.menuRight.buttonMobile')
-
       solid-ac-checker(permission='acl:Read', bind-resources)
         #project-chat(hidden, data-view="project-chat")
           include views/project/page-project-chat.pug

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

@@ -5,20 +5,37 @@ solid-router(default-route='project-profile', hidden)
 #project-profile(hidden, data-view="project-profile")
   include ../../templates/hubl-captain.pug
 
+  solid-ac-checker(permission='acl:Read', bind-resources)
+    div.segment.padding-large.border-bottom.border-color-grey.clearfix
+      solid-display.text-xxlarge.text-letter-spacing-large(
+        bind-resources
+        fields='const-title1, number, customer.name, dash, name'
+
+        class-const-title1='text-color-heading text-bold text-uppercase'
+        class-number='text-color-heading text-bold text-uppercase word-spacing-right'
+        class-customer.name='text-color-heading text-bold text-uppercase'
+        class-dash='text-color-heading text-bold text-xlarge'
+        class-name=''
+  
+        value-const-title1='N°'
+        value-dash=' - '
+      )
+      div.segment.lg-hidden
+        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.menuRight.buttonMobile')
+
   solid-widget(name='hubl-project-team-contact')
     template 
       solid-link(data-src='\${value}', next='messages')
 
-  .content-box__info
+  div.segment.padding-large.clearfix
-
     div#loader-project-profile.loader
       div
       div
       div
       div
 
-    .flex.space-between.with-padding.mobile-vertical-align
+    div.segment.clearfix
-      solid-display.mobile-margin__bottom(
+      solid-display.segment.lg-half.float-left(
         bind-resources
         fields='creationDateSet(title, creationDate)'
         loader-id='loader-project-profile'
@@ -30,26 +47,26 @@ solid-router(default-route='project-profile', hidden)
 
         widget-creationDate='solid-display-value-date'
       )
-      solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
+      solid-ac-checker.segment.lg-half.float-left.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 mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonModify')
+          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 mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonAdd')
+          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.flex.desktop-button__end
+    div.segment.lg-auto.float-right.margin-bottom-large
       solid-ac-checker(permission='acl:Delete', bind-resources)
         solid-delete(
-          class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash'
+          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(name='hubl-project-leave-button')
+      solid-widget.segment.lg-auto.float-right.margin-bottom-large(name='hubl-project-leave-button')
         template
           solid-delete(
-            class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+            class='button text-xsmall text-bold text-uppercase color-secondary bordered'
             data-src="${src}"
             data-label=''
             data-trans='data-label=project.profile.buttonQuit'
@@ -85,12 +102,12 @@ solid-router(default-route='project-profile', hidden)
 
     br
 
-    h2(data-trans:'project.profile.subTitle')
+    h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans:'project.profile.subTitle')
 
     solid-widget(name='hubl-project-user-admin')
       template ${value ? "Administrateur" : ""}
 
-    solid-display.block(
+    solid-display.user-thumb(
       bind-resources
       nested-field='members'
       fields='classGroup(user.account.picture, sup(user.name, user, is_admin), sub(user.communities, name))'