From e6d1ddc33cd0375054246744b6af95e940c09614 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Wed, 10 Jun 2020 11:25:36 +0200
Subject: [PATCH] update: table - responsive ok. Need rework of scroll bar and
 breakpoints

---
 src/styles/base/table.scss              | 328 ++++++++++--------------
 src/styles/layout/user/_index.scss      |   1 -
 src/styles/layout/user/admin-users.scss |   6 -
 src/views/admin/page-admin-circles.pug  |  12 +-
 src/views/admin/page-admin-projects.pug |   8 +-
 src/views/admin/page-admin-users.pug    |   2 +-
 6 files changed, 145 insertions(+), 212 deletions(-)
 delete mode 100644 src/styles/layout/user/admin-users.scss

diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss
index 427959e..aac166d 100644
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@@ -1,18 +1,9 @@
-/*#circle-information,
-#circle-edit,
-#admin-circle-create,
-#project-edit,
-#admin-project-create*/
-
-[widget="hubl-team-template-edit"]>div {
-  flex: 1;
-}
+/* Display and positioning of the table and its elements */
 
 .table-wrapper {
   overflow: auto;
   position: relative;
   width: 100%;
-  z-index: 1;
 
   .table {
     border-collapse: collapse;
@@ -46,195 +37,145 @@
         &>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-header {
+  font-size: 1.6rem;
+  font-weight: 600;
 
-  .table {
+  &.grey-color {
+    background: var(--color-table-header-background);
+    color: var(--color-table-header-text);
+  }
 
-    .table-header {
-      font-size: 1.6rem;
-      font-weight: 600;
+  >* {
+    border-right: 1px solid var(--color-table-border);
+    padding: 2.1rem 0;
+    text-align: center;
+  }
 
-      &.grey-color {
-        background: var(--color-table-header-background);
-        color: var(--color-table-header-text);
-      }
-
-      >* {
-        border-right: 1px solid var(--color-table-border);
-        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 {
-
-      /*>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,
-      [name^="cell-"] {
-        /*text-align: center;
-        word-wrap: break-word;
-        white-space: nowrap;*/
-        display: table-cell;
-      }
-
-      .w786 {
-        width: 786px;
-      }
-
-      .w262 {
-        width: 262px;
-      }
-
-      .w349 {
-        width: 349px;
-      }
-
-      .w698 {
-        width: 698px;
-      }
-
-      /*.w25 {
-        width: 25%;
-      }
-
-      .w33 {
-        width: 33.3333%;
-      }
-
-      .w50 {
-        width: 50%;
-      }
-
-      .w66 {
-        width: 66.6666%;
-      }
-
-      .w75 {
-        width: 75%;
-      }*/
-
-      .hashtag::before {
-        content: '#';
-      }
-    }
-
-    .cell-with-buttons {
-      text-align: center;
-      vertical-align: middle;
-
-      [name='button'] {
-
-        input[type='submit'] {
-          @extend
-          .button,
-          .text-bold,
-          .text-uppercase,
-          .reversed,
-          .button-secondary,
-          .bordered,
-          .btn-margin-left;
-        }
-      }
-    }
-
-    .cell-with-name {
-      color: var(--color-secondary);
-      font-weight: 600;
-      text-align: center;
-      vertical-align: middle;
-    }
-
-    sib-multiple {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .user-thumb>div/* for the table in circle-edit and captain's cell in project-admin */,
-    [name='user-thumb'] {
-      @extend %user-thumb__grid;
-      padding: 0 2.2rem;
-
-      >.user-thumb__picture {
-        @extend .user-thumb__picture;
-      }
-
-      >[name='sup'] {
-        @extend %user-thumb__grid-sup;
-      }
-
-      >[name='sub'] {
-        @extend %user-thumb__grid-inf;
-      }
-    }
-
-    sib-ac-checker {
-      align-items: center;
-      /*display: flex;*/
-      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;
-        }
-      }
-    }*/
+  >*: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);
+  }
 
+  /* Fix. Could disappear when we can add .class on set fields */
+  [name^='cell-1'] {
+    @extend .w786;
+    @extend .border;
+  }
 
+  .w786 {
+    width: 786px;
+  }
 
+  .w262 {
+    width: 262px;
+  }
 
+  .w349 {
+    width: 349px;
+  }
 
+  .w698 {
+    width: 698px;
+  }
+
+  .hashtag::before {
+    content: '#';
+  }
+}
+
+/* Styles of specific cells */
+
+.cell-with-buttons {
+  text-align: center;
+  vertical-align: middle;
+
+  [name='button'] {
+
+    input[type='submit'] {
+      @extend
+      .button,
+      .text-bold,
+      .text-uppercase,
+      .reversed,
+      .button-secondary,
+      .bordered,
+      .btn-margin-left;
+    }
+  }
+}
+
+.cell-with-name {
+  color: var(--color-secondary);
+  font-weight: 600;
+  text-align: center;
+  vertical-align: middle;
+}
+
+/* Styles of elements inside cells */
+
+.user-thumb>div,
+[name='user-thumb'] {
+  @extend %user-thumb__grid;
+  padding: 0 2.2rem;
+
+  >.user-thumb__picture {
+    @extend .user-thumb__picture;
+  }
+
+  >[name='sup'] {
+    @extend %user-thumb__grid-sup;
+  }
+
+  >[name='sub'] {
+    @extend %user-thumb__grid-inf;
+  }
+}
+
+.table sib-ac-checker {
+  text-align: center;
+  vertical-align: middle;
+}
 
 .circle-join {
   position: relative;
@@ -258,22 +199,21 @@
 
 .circle-leave {
   position: relative;
-  width: 30%;
-  min-width: 30%;
-}
+  width: 40%;
+  min-width: 40%;
 
-.circle-leave>button {
-  position: absolute;
-  width: 106%;
-  left: 1px;
-  /* background: antiquewhite; */
-  height: 29px;
-  top: -1px;
-  padding-left: 13px;
-}
+  &>button {
+    height: 29px;
+    padding-left: 13px;
+    position: absolute;
+    left: 1px;
+    top: -1px;
+    width: 106%;
+  }
 
-.circle-leave.button.with-icon::before {
-  font-size: 1.6rem;
-  margin-right: 2rem;
-  margin-left: -50px;
+  &.button.with-icon::before {
+    font-size: 1.6rem;
+    margin-right: 2rem !important;
+    margin-left: -50px;
+  }
 }
diff --git a/src/styles/layout/user/_index.scss b/src/styles/layout/user/_index.scss
index f15713e..5158e8e 100644
--- a/src/styles/layout/user/_index.scss
+++ b/src/styles/layout/user/_index.scss
@@ -1,2 +1 @@
 @import 'user-profile';
-@import 'admin-users';
diff --git a/src/styles/layout/user/admin-users.scss b/src/styles/layout/user/admin-users.scss
deleted file mode 100644
index eb9b939..0000000
--- a/src/styles/layout/user/admin-users.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug
index f15e295..7070d45 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/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.owner='w349 cell border cell-with-id-card'
-            class-leaveButton='w349 cell border cell-with-buttons'
+            class-circle.name='w349 border cell-with-name'
+            class-circle.owner='w349 border cell-with-id-card'
+            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-owner='w349 cell border cell-with-id-card'
+            class-name='w349 border cell-with-name'
+            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"
diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug
index e4029db..bce6112 100644
--- a/src/views/admin/page-admin-projects.pug
+++ b/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-members='w262 cell border'
-            class-captain='w262 cell border cell-with-id-card'
-            class-buttons='w262 cell border cell-with-buttons'
+            class-name='w262 border cell-with-name hashtag'
+            class-members='w262 border'
+            class-captain='w262 border cell-with-id-card'
+            class-buttons='w262 border cell-with-buttons'
 
             widget-buttons="admin-project-buttons"
             action-buttons="buttons"
diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug
index 66c0c94..05bb53c 100644
--- a/src/views/admin/page-admin-users.pug
+++ b/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'