From d94b8ecf7dddb82b84302854c5fb761f90a82e39 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 20 Oct 2021 11:35:09 +0200
Subject: Improve admin tables responsive

---
 client/src/sass/include/_mixins.scss    |  1 +
 client/src/sass/include/_variables.scss |  2 ++
 client/src/sass/primeng-custom.scss     | 39 ++++++++++++++++++++++++++++++++-
 3 files changed, 41 insertions(+), 1 deletion(-)

(limited to 'client/src/sass')

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 2f436d787..4d7a19ddf 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -701,6 +701,7 @@
   span {
     position: absolute;
     color: $grey-foreground-color;
+
     @if $small {
       top: -1px;
     }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index e0a4c7d3f..f973b3257 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -98,6 +98,8 @@ $focus-box-shadow-form: 0 0 0 .2rem;
 $video-watch-player-factor: math.div(16, 9);
 $video-watch-info-margin-left: 44px;
 
+$primeng-breakpoint: 960px;
+
 /*** map theme ***/
 
 // pass variables into a sass map,
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 1f50eea54..7aba69e4a 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -768,7 +768,7 @@ p-table {
     max-width: 100%;
 
     table {
-      min-width: breakpoint(lg);
+      width: 100%;
     }
   }
 
@@ -979,3 +979,40 @@ p-toast {
     font-weight: 600;
   }
 }
+
+@media screen and (max-width: $primeng-breakpoint) {
+  p-table {
+    td {
+      padding: 3px 0;
+
+      &.expand-cell {
+        padding: 5px;
+      }
+    }
+
+    .p-datatable-tbody {
+
+      td:last-child {
+        padding-bottom: 15px;
+        margin-bottom: 15px;
+        border-bottom: 1px solid $separator-border-color !important;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  p-table {
+    .p-datatable-header {
+      .caption {
+        flex-wrap: wrap;
+
+        > div {
+          width: 100%;
+          padding: 0 !important;
+          margin-bottom: 5px;
+        }
+      }
+    }
+  }
+}
-- 
cgit v1.2.3