update: table - responsive ok. Need rework of scroll bar and breakpoints

src/styles/base/table.scss

@@ -1,18 +1,9 @@
-/*#circle-information,
+/* Display and positioning of the table and its elements */
-#circle-edit,
-#admin-circle-create,
-#project-edit,
-#admin-project-create*/
-
-[widget="hubl-team-template-edit"]>div {
-  flex: 1;
-}
 
 .table-wrapper {
   overflow: auto;
   position: relative;
   width: 100%;
-  z-index: 1;
 
   .table {
     border-collapse: collapse;
@@ -46,21 +37,32 @@
         &>div {
           display: contents;
 
-          /*&>* {
+          &>* {
             display: table-cell;
-            see L107
+          }
-          }*/
+        }
+      }
+
+      &>sib-multiple {
+        display: contents;
+
+        &>div {
+          display: contents;
+
+          &>hubl-team-template-edit {
+            display: table-row;
+
+            &>* {
+              display: table-cell;
+            }
+          }
         }
       }
     }
   }
 }
 
-/* Styles of the tables */
+/* Styles of the tables and its elements */
-
-.table-wrapper {
-
-  .table {
 
 .table-header {
   font-size: 1.6rem;
@@ -90,23 +92,15 @@
 .table-body,
 .table-header {
 
-      /*>div:first-of-type>sib-display>div,
-      hubl-team-template-edit[name='members'] {
-        display: flex;
-        border-left: 1px solid var(--color-table-border);
-      }*/
-
   .border {
     border-bottom: 1px solid var(--color-table-border);
     border-right: 1px solid var(--color-table-border);
   }
 
-      .cell,
+  /* Fix. Could disappear when we can add .class on set fields */
-      [name^="cell-"] {
+  [name^='cell-1'] {
-        /*text-align: center;
+    @extend .w786;
-        word-wrap: break-word;
+    @extend .border;
-        white-space: nowrap;*/
-        display: table-cell;
   }
 
   .w786 {
@@ -125,31 +119,13 @@
     width: 698px;
   }
 
-      /*.w25 {
-        width: 25%;
-      }
-
-      .w33 {
-        width: 33.3333%;
-      }
-
-      .w50 {
-        width: 50%;
-      }
-
-      .w66 {
-        width: 66.6666%;
-      }
-
-      .w75 {
-        width: 75%;
-      }*/
-
   .hashtag::before {
     content: '#';
   }
 }
 
+/* Styles of specific cells */
+
 .cell-with-buttons {
   text-align: center;
   vertical-align: middle;
@@ -176,13 +152,9 @@
   vertical-align: middle;
 }
 
-    sib-multiple {
+/* Styles of elements inside cells */
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
 
-    .user-thumb>div/* for the table in circle-edit and captain's cell in project-admin */,
+.user-thumb>div,
 [name='user-thumb'] {
   @extend %user-thumb__grid;
   padding: 0 2.2rem;
@@ -200,42 +172,11 @@
   }
 }
 
-    sib-ac-checker {
+.table sib-ac-checker {
-      align-items: center;
+  text-align: center;
-      /*display: flex;*/
+  vertical-align: middle;
-      justify-content: center;
 }
 
-    /*.w75 {
-      min-width: 250px;
-    }
-
-    .w25 {
-      min-width: 70px;
-    }*/
-
-    /*sib-display[fields="cell-1(user-thumb(account.picture, sup(name), sub(username))), actions"] {
-      &>div {
-        >sib-set-default {
-          min-width: 250px;
-        }
-
-        hubl-sib-action-custom {
-          min-width: 70px;
-        }
-      }
-    }*/
-  }
-}
-
-
-
-
-
-
-
-
-
 .circle-join {
   position: relative;
   width: 181px;
@@ -258,22 +199,21 @@
 
 .circle-leave {
   position: relative;
-  width: 30%;
+  width: 40%;
-  min-width: 30%;
+  min-width: 40%;
-}
 
-.circle-leave>button {
+  &>button {
-  position: absolute;
-  width: 106%;
-  left: 1px;
-  /* background: antiquewhite; */
     height: 29px;
-  top: -1px;
     padding-left: 13px;
+    position: absolute;
+    left: 1px;
+    top: -1px;
+    width: 106%;
   }
 
-.circle-leave.button.with-icon::before {
+  &.button.with-icon::before {
     font-size: 1.6rem;
-  margin-right: 2rem;
+    margin-right: 2rem !important;
     margin-left: -50px;
   }
+}

src/styles/layout/user/_index.scss

@@ -1,2 +1 @@
 @import 'user-profile';
-@import 'admin-users';

src/styles/layout/user/admin-users.scss

@@ -1,6 +0,0 @@
-/* Fix. Could disappear when we can add .class on set fields */
-sib-set-default[name='cell-1'] {
-  @extend .w786;
-  @extend .cell;
-  @extend .border;
-}

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

@@ -61,9 +61,9 @@
             nested-field='circles'
             fields='circle.name, circle.owner, leaveButton'
 
-            class-circle.name='w349 cell border cell-with-name'
+            class-circle.name='w349 border cell-with-name'
-            class-circle.owner='w349 cell border cell-with-id-card'
+            class-circle.owner='w349 border cell-with-id-card'
-            class-leaveButton='w349 cell border cell-with-buttons'
+            class-leaveButton='w349 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 cell border cell-with-name'
+            class-name='w349 border cell-with-name'
-            class-owner='w349 cell border cell-with-id-card'
+            class-owner='w349 border cell-with-id-card'
             widget-owner='hubl-circle-owner'
 
-            class-members='w349 cell border cell-with-buttons'
+            class-members='w349 border cell-with-buttons'
             widget-members="hubl-admin-circle-join-button"
 
             order-by="name"

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

@@ -82,10 +82,10 @@
             data-src=`${endpoints.projects || endpoints.get.projects}`
             fields='name, members, captain, buttons'
 
-            class-name='w262 cell border cell-with-name hashtag'
+            class-name='w262 border cell-with-name hashtag'
-            class-members='w262 cell border'
+            class-members='w262 border'
-            class-captain='w262 cell border cell-with-id-card'
+            class-captain='w262 border cell-with-id-card'
-            class-buttons='w262 cell border cell-with-buttons'
+            class-buttons='w262 border cell-with-buttons'
 
             widget-buttons="admin-project-buttons"
             action-buttons="buttons"

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

@@ -47,7 +47,7 @@
 
             label-actions='Edit'
             action-actions='admin-users-edit'
-            class-actions='w262 cell border cell-with-buttons'
+            class-actions='w262 border cell-with-buttons'
             widget-actions='hubl-sib-action-custom'
 
             order-by='username'