From 5441686d8e6770955b87877b16dc9901f41917d3 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Tue, 9 Jun 2020 15:15:34 +0200
Subject: [PATCH] update: table - wip

---
 src/styles/base/table.scss              |  18 ++++
 src/views/admin/page-admin-projects.pug | 119 ++++++++++++------------
 2 files changed, 78 insertions(+), 59 deletions(-)

diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss
index c5d2e66..ce50b6f 100644
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@@ -11,7 +11,25 @@
     flex: 1;
   }
 
+  .table-body>div:first-of-type,
+  .table-body>div:first-of-type>sib-display>div {
+    display: contents;
+  }
+
+  .gridjs-wrapper {
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    overflow: auto;
+    display: block;
+  }
+
   .table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+    overflow: auto;
+    table-layout: fixed;
 
     .table-header {
       display: flex;
diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug
index 27ced85..c201176 100644
--- a/src/views/admin/page-admin-projects.pug
+++ b/src/views/admin/page-admin-projects.pug
@@ -22,76 +22,77 @@
           next='admin-project-create'
         ) Créer un projet
 
-      .table
-        div.table-header.grey-color
-          div.w25 Nom
-          div.w25 Administrateurs
-          div.w25 Capitaines
-          div.w25 Accès
+      .gridjs-wrapper
+        .table
+          div.table-header.grey-color
+            div.w25 Nom
+            div.w25 Administrateurs
+            div.w25 Capitaines
+            div.w25 Accès
 
-        sib-widget(name="hubl-admin-project-leave-button")
-          template
-            sib-delete(
-              class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
-              data-src="${src}"
-              data-label='Quitter'
-            )
+          sib-widget(name="hubl-admin-project-leave-button")
+            template
+              sib-delete(
+                class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+                data-src="${src}"
+                data-label='Quitter'
+              )
 
-        sib-widget(name='hubl-project-captain')
-          template
-            sib-display.user-thumb.is-spaced(
-              data-src='${await value}'
-              fields='account.picture, sup(name), sub(username)'
+          sib-widget(name='hubl-project-captain')
+            template
+              sib-display.user-thumb.is-spaced(
+                data-src='${await value}'
+                fields='account.picture, sup(name), sub(username)'
 
-              class-account.picture='avatar user-thumb__picture'
-              class-name='user-thumb__name'
-              class-username='user-thumb__username'
+                class-account.picture='avatar user-thumb__picture'
+                class-name='user-thumb__name'
+                class-username='user-thumb__username'
 
-              widget-account.picture='hubl-user-avatar'
-            )
+                widget-account.picture='hubl-user-avatar'
+              )
 
-        sib-widget(name='hubl-project-admins')
-          template
-            sib-display(
-              data-src='${value}'
-              fields='user'
-              search-fields='is_admin'
-              search-value-is_admin='true'
-              search-widget-is_admin='sib-form-hidden'
-              widget-user='hubl-project-captain'
-            )
+          sib-widget(name='hubl-project-admins')
+            template
+              sib-display(
+                data-src='${value}'
+                fields='user'
+                search-fields='is_admin'
+                search-value-is_admin='true'
+                search-widget-is_admin='sib-form-hidden'
+                widget-user='hubl-project-captain'
+              )
 
-        sib-widget(name="hubl-admin-project-buttons")
-          template
-            sib-display(
-              data-src='${src}'
-              nested-field='members'
-              fields='relation'
-              action-relation='relation'
-              widget-relation='hubl-admin-project-leave-button'
-              search-fields='user'
-              search-widget-user='sib-form-hidden'
-              search-value-user="-"
-              hubl-inherit-user-id="search-value-user"
-            )
+          sib-widget(name="hubl-admin-project-buttons")
+            template
+              sib-display(
+                data-src='${src}'
+                nested-field='members'
+                fields='relation'
+                action-relation='relation'
+                widget-relation='hubl-admin-project-leave-button'
+                search-fields='user'
+                search-widget-user='sib-form-hidden'
+                search-value-user="-"
+                hubl-inherit-user-id="search-value-user"
+              )
 
-        sib-display(
-          class='table-body'
+          sib-display(
+            class='table-body'
 
-          data-src=`${endpoints.projects || endpoints.get.projects}`
-          fields='name, members, captain, buttons'
+            data-src=`${endpoints.projects || endpoints.get.projects}`
+            fields='name, members, captain, buttons'
 
-          class-name='w25 cell border cell-with-name hashtag'
-          class-members='w25 cell border'
-          class-captain='w25 cell border cell-with-id-card'
-          class-buttons='w25 cell border cell-with-buttons'
+            class-name='w25 cell border cell-with-name hashtag'
+            class-members='w25 cell border'
+            class-captain='w25 cell border cell-with-id-card'
+            class-buttons='w25 cell border cell-with-buttons'
 
-          widget-buttons="admin-project-buttons"
-          action-buttons="buttons"
+            widget-buttons="admin-project-buttons"
+            action-buttons="buttons"
 
-          widget-captain='hubl-project-captain'
-          widget-members='hubl-project-admins'
-        )
+            widget-captain='hubl-project-captain'
+            widget-members='hubl-project-admins'
+          )
 
   #admin-project-create(hidden)
     include page-admin-projects-create.pug
\ No newline at end of file