update: table - some padding added to user-thulb in table + new width for table's columns

src/styles/base/table.scss

@@ -40,6 +40,7 @@
 
           &>* {
             display: table-cell;
+            vertical-align: middle;
           }
         }
       }
@@ -55,6 +56,8 @@
 
             &>* {
               display: table-cell;
+              text-align: center;
+              vertical-align: middle;
             }
           }
         }
@@ -100,24 +103,28 @@
 
   /* Fix. Could disappear when we can add .class on set fields */
   [name^='cell-1'] {
-    @extend .w786;
+    @extend .w280;
     @extend .border;
   }
 
-  .w786 {
-    width: 786px;
+  .w280 {
+    width: 280px;
+  }
+
+  .w70 {
+    width: 70px;
   }
 
   .w262 {
     width: 262px;
   }
 
-  .w349 {
-    width: 349px;
+  .W152 {
+    width: 152px;
   }
 
-  .w698 {
-    width: 698px;
+  .w355 {
+    width: 355px;
   }
 
   .hashtag::before {
@@ -129,7 +136,6 @@
 
 .cell-with-buttons {
   text-align: center;
-  vertical-align: middle;
 
   [name='button'] {
 
@@ -149,14 +155,16 @@
 .cell-with-name {
   color: var(--color-secondary);
   font-weight: 600;
-  text-align: center;
-  vertical-align: middle;
+  padding-left: 2rem;
+  text-align: left;
 }
 
 /* Styles of elements inside cells */
 
 .user-thumb>div,
 [name='user-thumb'] {
+  vertical-align: middle;
+  text-align: left;
   @extend %user-thumb__grid;
   padding: 0 2.2rem;
 
@@ -175,7 +183,6 @@
 
 .table sib-ac-checker {
   text-align: center;
-  vertical-align: middle;
 }
 
 .circle-join {

src/styles/base/user-thumb.scss

@@ -3,7 +3,7 @@
   display: grid;
   grid-column-gap: 1.6rem;
   grid-template-columns: 7vh auto;
-  grid-template-rows: repeat(2, 5.2vh);
+  grid-template-rows: repeat(2, auto);
 }
 
 %user-thumb__grid-sup {
@@ -93,5 +93,5 @@
 /* Add extra spaces to user-thumbs that are inside a table */
 .user-thumb.is-spaced>div,
 [name='user-thumb'] {
-  padding: 0 2.2rem;
+  padding: 0.8rem 2.2rem;
 }

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

@@ -42,9 +42,9 @@
         .table
 
           div.table-header.grey-color
-            div.w349 Nom
-            div.w349 Administrateurs
-            div.w349 Rejoindre
+            div.w280 Nom
+            div.w280 Administrateurs
+            div.w280 Rejoindre
 
           sib-widget(name='hubl-admin-circle-leave-button')
             template
@@ -61,9 +61,9 @@
             nested-field='circles'
             fields='circle.name, circle.owner, leaveButton'
 
-            class-circle.name='w349 border cell-with-name'
-            class-circle.owner='w349 border cell-with-id-card'
-            class-leaveButton='w349 border cell-with-buttons'
+            class-circle.name='w280 border cell-with-name'
+            class-circle.owner='w280 border cell-with-id-card'
+            class-leaveButton='w280 border cell-with-buttons'
 
             action-leaveButton="joinButton"
             widget-leaveButton="hubl-admin-circle-leave-button"
@@ -90,11 +90,11 @@
             data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
             fields='name, owner, members'
 
-            class-name='w349 border cell-with-name'
-            class-owner='w349 border cell-with-id-card'
+            class-name='w280 border cell-with-name'
+            class-owner='w280 border cell-with-id-card'
             widget-owner='hubl-circle-owner'
 
-            class-members='w349 border cell-with-buttons'
+            class-members='w280 border cell-with-buttons'
             widget-members="hubl-admin-circle-join-button"
 
             order-by="name"

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

@@ -31,8 +31,8 @@
       .table-wrapper
         .table
           div.table-header.grey-color
-            div.w786 Nom
-            div.w262
+            div.w280 Nom
+            div.w70
         
           sib-display(
             class='table-body'
@@ -47,7 +47,7 @@
 
             label-actions='Edit'
             action-actions='admin-users-edit'
-            class-actions='w262 border cell-with-buttons'
+            class-actions='w70 border cell-with-buttons'
             widget-actions='hubl-sib-action-custom'
 
             order-by='username'

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

@@ -7,8 +7,8 @@ div.content-box__info
 
   sib-widget(name='hubl-team-template-edit')
     template
-      sib-display.user-thumb(
-        class='w698 cell border cell-with-id-card user-thumb'
+      sib-display.user-thumb.is-spaced(
+        class='w355 cell border cell-with-id-card user-thumb'
         data-src='${await value.user}'
         fields='account.picture, sup(name, groups), sub(profile.city)'
 
@@ -24,7 +24,7 @@ div.content-box__info
       )
 
       sib-ac-checker(
-        class='w349 cell border'
+        class='W152 cell border'
         permission="acl:Delete"
         data-src="${value['@id']}"
       )
@@ -36,7 +36,7 @@ div.content-box__info
 
       //- Only to show the table grid
       sib-ac-checker(
-        class='w349 cell border'
+        class='W152 cell border'
         no-permission="acl:Delete"
         data-src="${value['@id']}"
       )
@@ -91,8 +91,8 @@ div.content-box__info
   .table-wrapper
     .table
       div.table-header.grey-color
-        div.w698 Nom
-        div.w349 Accès
+        div.w355 Nom
+        div.W152 Accès
 
       //-class='table-body'
       sib-display(

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

@@ -56,8 +56,8 @@ div.content-box__info.flex
   .table-wrapper
     .table
       div.table-header.grey-color
-        div.w698 Nom
-        div.w349 Accès
+        div.w355 Nom
+        div.W152 Accès
 
       //-class='table-body'
       sib-display(