bugfix: multiple fixes

src/dependencies.pug

@@ -32,8 +32,8 @@ if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
     //- script(type="module" src="/lib/sib-dashboard/sib-dashboard.js" defer)
 
 if endpoints.users || (endpoints.get && endpoints.get.users)
-    script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.6" defer)
+    //-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.6" defer)
-    //- script(type="module" src="/lib/sib-chat/sib-chat.js" defer)
+    script(type="module" src="/lib/sib-chat/sib-chat.js" defer)
 
 script(src="/scripts/index.js" defer)
 

src/header.pug

@@ -1,6 +1,6 @@
 .logo
-  sib-link(next='members')
+  sib-link(next='dashboard')
-    img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`)
+    img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
 
 sib-notifications.notLoggedIn(
   nested-field="inbox"

src/index.pug

@@ -30,7 +30,7 @@ html(lang="en")
             include page-dashboard.pug
 
         if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
-          #members(hidden).no-sidebar
+          #members(hidden).no-sidebar.with-padding
             include page-directory.pug
 
         if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)

src/page-circle.pug

@@ -14,7 +14,7 @@
       sib-ac-checker(permission='acl:Read', bind-resources)
         #circle-chat(hidden)
           include views/circle/page-circle-chat.pug
-        #circle-information(hidden)
+        #circle-information.content-box__height(hidden)
           include views/circle/page-circle-profile.pug
 
 nav.jsRightMenu(role='navigation')

src/page-dashboard.pug

@@ -1,5 +1,5 @@
 .views-container
-  h2 Tableau de bord
+  h1 Tableau de bord
   sib-dashboard(
     data-src=`${endpoints.dashboards || endpoints.get.dashboards}`
   )

src/page-project.pug

@@ -18,7 +18,7 @@
       sib-ac-checker(permission='acl:Read', bind-resources)
         #project-chat(hidden)
           include views/project/page-project-chat.pug
-        #project-information(hidden)
+        #project-information.content-box__height(hidden)
           include views/project/page-project-profile.pug
 
 nav.jsRightMenu(role='navigation')

src/styles/base/form.scss

@@ -1,8 +1,14 @@
 .form form {
+  display: block;
+  height: fit-content;
+  margin-bottom: 75px;
+  transition: all .3s ease;
+
+  @include breakpoint(lg) {
     display: flex;
     flex-direction: column;
-  margin-left: -3.4rem;
     transition: all .3s ease;
+  }
 }
 
 .button-register>form>input[type=submit] {
@@ -16,17 +22,6 @@
   margin-top: 3.2rem;
 }
 
-.fieldset {
-  border-bottom: 1px solid var(--color-fieldset-border);
-  color: var(--color-title);
-  display: flex;
-  flex: 1 0 100%;
-  font-size: 1.8rem;
-  font-weight: 600;
-  margin: 2.6rem 0 1.8rem 3.4rem;
-  padding-bottom: 0.8rem;
-}
-
 .form-label {
   /*flex: 1 1 auto;*/
   
@@ -44,16 +39,22 @@
   }
 }
 
+[name^='line-'] {
+  
+  @include breakpoint(lg) {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
 .is-full-width {
   box-sizing: border-box;
   flex: 1 1 100%;
-  padding-left: 3.4rem;
 }
 
 .is-half-width {
   box-sizing: border-box;
-  flex: 0 0 50%;
+  flex: 0 1 calc(50% - 2.5rem);
-  padding-left: 3.4rem;
 }
 
 .input-text-like input:not([type='file']):not([type='search']):not([type='submit']),
@@ -155,9 +156,13 @@ hubl-status {
 
 /* Additional styles for the select to add a member in circle-edit */
 .block.select-add>form {
+  display: block;
+
+  @include breakpoint(lg) {
     display: flex;
     flex-direction: row;
     margin-bottom: 2.6rem;
+  }
 
   label {
     margin-top: 0;
@@ -169,13 +174,17 @@ hubl-status {
 
   input[type='submit'] {
     @extend .button,
-    .btn-margin-left,
     .text-bold,
     .text-uppercase,
     .button-complementary,
     .bordered;
-    margin-top: auto;
+    margin: 10px 0;
-    margin-bottom: auto;
+    width: 100%;
+
+    @include breakpoint(lg) {
+      margin: auto 0 auto 2.2rem;
+      width: auto;
+    }
   }
 }
 /* End */

src/styles/base/header.scss

@@ -103,9 +103,19 @@ sib-notifications {
     }
   
     .sib-notifications__list {
+      overflow-x: hidden;
+      position: fixed;
+      left: 0;
+      top: 4.5rem;
+      width: 100vw;
+
+      @include breakpoint(lg) {
         position: absolute;
+        left: auto;
         right: 0;
         top: 5.6rem;
+        width: 300px;
+      }
     }
   }
 }

src/styles/base/main.scss

@@ -9,6 +9,7 @@
 
   body {
     background-color: var(--color-main-background);
+    box-sizing: border-box;
     color: var(--color-main-text);
     font-size: 1.6rem;
     /* Fix for viewport height bug in webkit for mobile */
@@ -21,6 +22,27 @@
   }
 }
 
+/* Fix for sib-dashboard fixture */
+sib-dashboard section {
+  padding: 1rem !important;
+
+  @include breakpoint(lg) {
+    padding: 4.2rem !important;
+  }
+
+  .icon {
+    display: inline-block;
+  }
+}
+
+/*@media (max-width: 767.98px) {
+  
+  #conversejs .converse-chatboxes .chatbox .box-flyout {
+    height: 100% !important;
+    height: 100vh !important;
+  }
+}*/
+
 .wrapper {
   display: grid;
   grid-template-areas: 
@@ -62,11 +84,11 @@
     display: block;
     bottom: 0;
     box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
-    min-width: 80%;
+    max-width: 86%;
     position: fixed;
     right: 0;
     top: 0;
-    z-index: 1;
+    z-index: 1000;
 
     @include breakpoint(lg) {
       display: none;
@@ -349,10 +371,10 @@ h5 {
 }
 
 .content-box__height {
-  height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
+  min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
 
   @include breakpoint(lg) {
-    height: calc(100vh - 83px - 84px);
+    min-height: calc(100vh - 83px - 84px);
   }
 }
 
@@ -389,9 +411,37 @@ h5 {
 }*/
 
 .admin-header {
+  /* Quick fix for alignment on mobile before admin content rework */
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  /*end */
+
+  @include breakpoint(lg) {
+    flex-direction: row;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 5rem;
+  }
+
+  h3 {
+    /* Quick fix for alignment on mobile before admin content rework */
+    margin-bottom: 20px;
+    /* end */
+
+    @include breakpoint(lg) {
+      margin-top: 0;
+    }
+  }
+
+  sib-ac-checker,
+  sib-link {
+    width: 100%;
+
+    @include breakpoint(lg) {
+      width: auto;
+    }
+  }
 }
 
 .backlink {
@@ -433,9 +483,13 @@ h5 {
   }
 }
 
-.section {
+.mobile-vertical-align {
-  border-bottom: 1px solid var(--color-grey-10);
+  flex-direction: column;
-  padding: 4.5rem;
+  align-items: center;
+
+  @include breakpoint(lg) {
+    flex-direction: row;
+  }
 }
 
 .word-spacing-left {
@@ -446,6 +500,14 @@ h5 {
   margin-right: 0.60rem;
 }
 
+.mobile-margin__bottom {
+  margin-bottom: 1rem;
+
+  @include breakpoint(lg) {
+    margin-bottom: 0;
+  }
+}
+
 // Other base components
 @import 'form';
 @import 'table';

src/styles/base/table.scss

@@ -39,6 +39,7 @@
           display: contents;
 
           &>* {
+            border-bottom: 1px solid var(--color-table-border);
             display: table-cell;
             vertical-align: middle;
           }
@@ -55,6 +56,7 @@
             display: table-row;
 
             &>* {
+              border-bottom: 1px solid var(--color-table-border);
               display: table-cell;
               text-align: center;
               vertical-align: middle;
@@ -66,7 +68,13 @@
   }
 }
 
-/* Styles of the tables and its elements */
+/* Styles of the table and its elements */
+
+.table {
+  border-bottom: 1px solid var(--color-table-border);
+  border-left: 1px solid var(--color-table-border);
+  border-right: 1px solid var(--color-table-border);
+}
 
 .table-header {
   font-size: 1.6rem;
@@ -82,22 +90,12 @@
     padding: 2.1rem 0;
     text-align: center;
   }
-
-  >*:last-of-type {
-    border-right: 1px solid --color-table-header-background;
-  }
-}
-
-.table-body {
-  border-left: 1px solid var(--color-table-border);
-  border-right: 1px solid var(--color-table-border);
 }
 
 .table-body,
 .table-header {
 
   .border {
-    border-bottom: 1px solid var(--color-table-border);
     border-right: 1px solid var(--color-table-border);
   }
 

src/templates/hubl-captain.pug

@@ -4,11 +4,10 @@ sib-widget(name='hubl-captain')
   template
     sib-display.user-thumb(
       data-src="${await value}"
-      fields='account.picture, sup(name), sub(profile.city, is_lead)'
+      fields='account.picture, sup(name), sub(is_lead)'
 
       class-account.picture='avatar user-thumb__picture'
       class-name='user-thumb__name'
-      class-profile.city='user-thumb__city'
       class-is_lead='user-thumb__lead'
 
       widget-account.picture='hubl-user-avatar'

src/templates/hubl-circle-team.pug

@@ -2,7 +2,7 @@ include hubl-user-avatar.pug
 
 sib-widget(name='hubl-circle-team-template')
   template
-    sib-display.user-thumb(
+    sib-display.user-thumb.is-spaced(
       data-src='${await value.user}'
       fields='account.picture, sup(name, isadmin), sub(profile.city)'
       value-isadmin='${await value.is_admin}'

src/templates/hubl-project-team.pug

@@ -2,7 +2,7 @@ include hubl-user-avatar.pug
 
 sib-widget(name='hubl-project-team')
   template
-    sib-display.user-thumb(
+    sib-display.user-thumb.is-spaced(
       data-src='${await value}'
       fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)'
       value-isadmin='${await value.is_admin}'

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

@@ -101,5 +101,5 @@
           )
 
 
-  #admin-circle-create(hidden)
+  #admin-circle-create.content-box__height(hidden)
     include page-admin-circles-create.pug

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

@@ -1,7 +1,3 @@
-sib-widget(name='hubl-template-project-title')
-  template
-    p ${value}
-
 div.content-box__info.flex
   sib-link(class="backlink right" next='admin-project-list') Retour
 
@@ -21,15 +17,7 @@ div.content-box__info.flex
   sib-form.form.button-register(
     data-src=`${endpoints.projects || endpoints.post.projects}`
     
-    fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)'
+    fields='line-1(customer, name), line-2(project.description), line-3(businessProvider.name, businessProvider.fee), line-4(captain)'
-
-    class-fieldset-fee='fieldset'
-    value-fieldset-fee='Contributions'
-    widget-fieldset-fee='hubl-template-project-title'
-    
-    class-fieldset-captain='fieldset'
-    value-fieldset-captain='Capitaine'
-    widget-fieldset-captain='hubl-template-project-title'
 
 		label-customer='Nom du client*'
     class-customer='form-label is-light is-half-width'

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

@@ -94,5 +94,5 @@
             widget-members='hubl-project-admins'
           )
 
-  #admin-project-create(hidden)
+  #admin-project-create.content-box__height(hidden)
     include page-admin-projects-create.pug

src/views/admin/page-admin-users.pug

@@ -54,8 +54,8 @@
           )
 
 
-  #admin-users-create(hidden)
+  #admin-users-create.content-box__height(hidden)
     include page-admin-users-create.pug
 
-  #admin-users-edit(hidden)
+  #admin-users-edit.content-box__height(hidden)
     include page-admin-users-edit.pug

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

@@ -49,7 +49,7 @@ div.content-box__info
     sib-form.form.button-register(
       bind-resources
 
-      fields='status, block-circle__info(name, owner), description'
+      fields='status, line-1(name, owner), description'
       range-owner=`${endpoints.users || endpoints.get.users}`
 
       label-status='Statut du canal'

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

@@ -6,8 +6,8 @@ sib-router(default-route='circle-profile', hidden)
   include ../../templates/hubl-circle-team.pug
   .content-box__info
 
-    .flex.space-between.with-padding
+    .flex.space-between.with-padding.mobile-vertical-align
-      sib-display(
+      sib-display.mobile-margin__bottom(
         bind-resources
         fields='creationDateSet(title, creationDate)'
 
@@ -80,5 +80,5 @@ sib-router(default-route='circle-profile', hidden)
 
 
 
-#circle-edit(hidden)
+#circle-edit.content-box__height(hidden)
   include page-circle-edit.pug

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

@@ -2,10 +2,6 @@ div.content-box__info
 
   include ../../templates/hubl-user-avatar.pug
 			
-  sib-widget(name='hubl-fieldset-title')
-    template
-      label ${label}
-			
   sib-link(class='backlink right', bind-resources, next='project-profile') Retour
 
   h1 Modifie ton projet
@@ -13,27 +9,22 @@ div.content-box__info
   sib-form.form.button-register(
 	  bind-resources
 	
-	  fields='fieldset-info, customer, name, description, fieldset-fee, businessProvider, businessProviderFee'
+	  fields='line-1(customer, name), description, line-2(businessProvider, businessProviderFee)'
 
     class-customer='form-label is-light is-half-width'
     widget-customer='sib-form-auto-completion'
     class-name='form-label is-light is-half-width input-text-like'
     class-description='form-label is-light is-full-width input-text-like'
-    label-fieldset-info=''
     label-customer='Client*'
     range-customer=`${endpoints.customers || endpoints.get.customers}`
     label-name='Nom du projet*'
     label-description='Description du projet'
-    widget-fieldset-info='hubl-fieldset-title'
     widget-description='sib-form-textarea'
 
-    class-fieldset-fee='fieldset'
     class-businessprovider='form-label is-light is-half-width input-text-like'
     class-businessproviderfee='form-label is-light is-half-width input-text-like'
-    label-fieldset-fee='Contributions'
     label-businessprovider='Apporteur d\'affaire'
     label-businessproviderfee='Montant de la contribution'
-    widget-fieldset-fee='hubl-fieldset-title'
 
     submit-button='Enregistrer'
   )

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

@@ -9,8 +9,8 @@ sib-router(default-route='project-profile', hidden)
 
   .content-box__info.flex
 
-    .flex.space-between.with-padding
+    .flex.space-between.with-padding.mobile-vertical-align
-      sib-display(
+      sib-display.mobile-margin__bottom(
         bind-resources
         fields='creationDateSet(title, creationDate)'
 
@@ -76,5 +76,5 @@ sib-router(default-route='project-profile', hidden)
     )
 
 
-#project-edit(hidden)
+#project-edit.content-box__height(hidden)
   include page-project-edit.pug