update: table - responsive for admin-user and admin-circle

src/styles/base/form.scss

@@ -83,7 +83,7 @@ textarea {
   
   &.with-form {
 
-    sib-set-default:not([name='user-thumb']) {
+    /*sib-set-default:not([name='user-thumb']) {
       clear: both;
 	    display: flex!important;
 			flex-wrap: wrap;
@@ -93,7 +93,7 @@ textarea {
 				float: left;
 				width: 50%;
 			}
-    }
+    }*/
   }
 }
 

src/styles/base/main.scss

@@ -331,6 +331,10 @@ h5 {
 .content-box__info {
   flex-direction: column;
   padding: 3.2rem;
+
+  * {
+    box-sizing: border-box;
+  }
 }
 
 /*.modal {

src/styles/base/table.scss

@@ -1,44 +1,73 @@
-#circle-information,
+/*#circle-information,
 #circle-edit,
 #admin-circle-list,
 #admin-circle-create,
 #project-edit,
 #admin-project-list,
 #admin-project-create,
-#admin-users-list {
+#admin-users-list*/
 
-  [widget="hubl-team-template-edit"]>div {
+[widget="hubl-team-template-edit"]>div {
   flex: 1;
-  }
+}
 
-  .table-body>div:first-of-type,
+.table-wrapper {
-  .table-body>div:first-of-type>sib-display,
-  .table-body>div:first-of-type>sib-display>div {
-    display: contents;
-  }
-
-  .gridjs-wrapper {
-    width: 100%;
-    position: relative;
-    z-index: 1;
   overflow: auto;
-    display: block;
+  position: relative;
-  }
+  width: 100%;
+  z-index: 1;
 
   .table {
-    width: 100%;
-    max-width: 100%;
     border-collapse: collapse;
+    display: table;
     overflow: auto;
     table-layout: fixed;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .table-header {
+    display: table-header-group;
+    text-align: center;
+    vertical-align: middle;
+
+    &>div {
+      display: table-cell;
+      white-space: nowrap;
+    }
+  }
+
+  .table-body {
+    display: table-row-group;
+
+    &>div {
+      display: contents;
+
+      &>sib-display {
+        display: table-row;
+
+        &>div {
+          display: contents;
+
+          /*&>* {
+            display: table-cell;
+            see L107
+          }*/
+        }
+      }
+    }
+  }
+}
+
+/* Styles of the tables */
+
+.table-wrapper {
+
+  .table {
 
     .table-header {
-      display: flex;
-      flex: 1;
       font-size: 1.6rem;
       font-weight: 600;
-      justify-content: space-around;
-      text-align: center;
 
       &.grey-color {
         background: var(--color-table-header-background);
@@ -56,27 +85,46 @@
       }
     }
 
+    .table-body {
+      border-left: 1px solid var(--color-table-border);
+      border-right: 1px solid var(--color-table-border);
+    }
+
     .table-body,
     .table-header {
 
-      >div:first-of-type>sib-display>div,
+      /*>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 {
+      .cell,
-        text-align: center;
+      [name^="cell-"] {
+        /*text-align: center;
         word-wrap: break-word;
-        white-space: nowrap;
+        white-space: nowrap;*/
+        display: table-cell;
+      }
+
+      .w75 {
+        width: 280px;
       }
 
       .w25 {
+        width: 70px;
+      }
+
+      .w33 {
+        width: 256px;
+      }
+
+      /*.w25 {
         width: 25%;
       }
 
@@ -94,7 +142,7 @@
 
       .w75 {
         width: 75%;
-      }
+      }*/
 
       .hashtag::before {
         content: '#';
@@ -102,9 +150,8 @@
     }
 
     .cell-with-buttons {
-      align-items: center;
+      text-align: center;
-      display: flex;
+      vertical-align: middle;
-      justify-content: center;
 
       [name='button'] {
 
@@ -124,7 +171,8 @@
     .cell-with-name {
       color: var(--color-secondary);
       font-weight: 600;
-      padding-top: 2.5rem;
+      text-align: center;
+      vertical-align: middle;
     }
 
     sib-multiple {
@@ -133,10 +181,7 @@
       justify-content: center;
     }
 
-    .user-thumb>div
+    .user-thumb>div/* for the table in circle-edit and captain's cell in project-admin */,
-
-    /* for the table in circle-edit and captain's cell in project-admin */
-    ,
     [name='user-thumb'] {
       @extend %user-thumb__grid;
       padding: 0 2.2rem;
@@ -156,37 +201,67 @@
 
     sib-ac-checker {
       align-items: center;
-      display: flex;
+      /*display: flex;*/
       justify-content: center;
     }
+
+    /*.w75 {
+      min-width: 250px;
     }
 
-  .circle-join {
+    .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: 40%;
+  width: 181px;
-    min-width: 40%;
+  margin: 0 auto;
+  min-width: 181px;
 
   input {
     height: 29px;
     left: -1px;
     position: absolute;
     top: -1px;
-      width: 105%;
+    width: 102%;
-      padding-left: 16px;
+    padding-left: 14px !important;
   }
 
   &.button.with-icon::before {
-      margin-left: 12px;
+    margin-left: 6px;
-    }
   }
+}
 
-  .circle-leave {
+.circle-leave {
   position: relative;
   width: 30%;
   min-width: 30%;
-  }
+}
 
-  .circle-leave>button {
+.circle-leave>button {
   position: absolute;
   width: 106%;
   left: 1px;
@@ -194,11 +269,10 @@
   height: 29px;
   top: -1px;
   padding-left: 13px;
-  }
+}
 
-  .circle-leave.button.with-icon::before {
+.circle-leave.button.with-icon::before {
   font-size: 1.6rem;
   margin-right: 2rem;
   margin-left: -50px;
-  }
 }

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

@@ -38,6 +38,7 @@
           next='admin-circle-create'
         ) Créer un canal
 
+      .table-wrapper
         .table
 
           div.table-header.grey-color

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

@@ -28,6 +28,7 @@
             next='admin-users-create'
           ) Ajouter un utilisateur
 
+      .table-wrapper
         .table
           div.table-header.grey-color
             div.w75 Nom