From 59309090a9b1360b92158ef638b798f2d32f79f3 Mon Sep 17 00:00:00 2001
From: Rsl1122 <djrapitops@hotmail.com>
Date: Wed, 14 Aug 2019 17:56:23 +0300
Subject: [PATCH] Improved height limiting of tables

---
 .../plan/data/element/TableContainer.java     |  2 +-
 .../djrapitops/plan/utilities/html/Html.java  |  2 +-
 .../resources/assets/plan/web/css/style.css   |  6 ++
 .../resources/assets/plan/web/player.html     | 44 +++++++-----
 .../resources/assets/plan/web/server.html     | 70 ++++++++++---------
 5 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/Plan/common/src/main/java/com/djrapitops/plan/data/element/TableContainer.java b/Plan/common/src/main/java/com/djrapitops/plan/data/element/TableContainer.java
index 159b17e98..13efc6e18 100644
--- a/Plan/common/src/main/java/com/djrapitops/plan/data/element/TableContainer.java
+++ b/Plan/common/src/main/java/com/djrapitops/plan/data/element/TableContainer.java
@@ -67,7 +67,7 @@ public class TableContainer {
         return getTableHeader() +
                 parseHeader() +
                 parseBody() +
-                "</table>" + (jqueryDatatable != null ? "</div>" : "");
+                "</table></div>";
     }
 
     public final String parseBody() {
diff --git a/Plan/common/src/main/java/com/djrapitops/plan/utilities/html/Html.java b/Plan/common/src/main/java/com/djrapitops/plan/utilities/html/Html.java
index 6a3dae49c..8830ddf8a 100644
--- a/Plan/common/src/main/java/com/djrapitops/plan/utilities/html/Html.java
+++ b/Plan/common/src/main/java/com/djrapitops/plan/utilities/html/Html.java
@@ -80,7 +80,7 @@ public enum Html {
 
     TABLE_END("</tbody></table>"),
     TABLE("<table class=\"table table-striped\">"),
-    TABLE_SCROLL("<table class=\"table table-striped scrollbar\">"),
+    TABLE_SCROLL("<div class=\"scrollbar\"><table class=\"table table-striped\">"),
     TABLE_JQUERY("<table class=\"table table-bordered table-striped table-hover ${0} dataTable\">"),
     TABLE_COLORED("<table class=\"bg-${0} table table-striped\">"),
     TABLE_HEAD("<thead>${0}</thead>"),
diff --git a/Plan/common/src/main/resources/assets/plan/web/css/style.css b/Plan/common/src/main/resources/assets/plan/web/css/style.css
index 1f57fb25a..a8e36bcdf 100644
--- a/Plan/common/src/main/resources/assets/plan/web/css/style.css
+++ b/Plan/common/src/main/resources/assets/plan/web/css/style.css
@@ -47,6 +47,12 @@
     }
 }
 
+div.scrollbar {
+    overflow: hidden;
+    overflow-y: auto;
+    max-height: 60vh;
+}
+
 .clickable {
     cursor: pointer;
 }
diff --git a/Plan/common/src/main/resources/assets/plan/web/player.html b/Plan/common/src/main/resources/assets/plan/web/player.html
index 31d8ddcbb..73a2681f4 100644
--- a/Plan/common/src/main/resources/assets/plan/web/player.html
+++ b/Plan/common/src/main/resources/assets/plan/web/player.html
@@ -356,15 +356,19 @@
                                                 class="far fa-fw fa-hand-pointer"></i>
                                                 <small>Click to expand</small></span></h6>
                                 </div>
-                                <table class="table mb-0" id="tableAccordion">
-                                    <thead>
-                                    <th><i class="fa fa-fw fa-server"></i> Server</th>
-                                    <th><i class="far fa-fw fa-clock"></i> Session Started</th>
-                                    <th><i class="far fa-fw fa-clock"></i> Length</th>
-                                    <th><i class="far fa-fw fa-map"></i> Most played World</th>
-                                    </thead>
-                                    <tbody></tbody>
-                                </table>
+                                <div class="scrollbar">
+                                    <table class="table mb-0" id="tableAccordion">
+                                        <thead>
+                                        <tr>
+                                            <th><i class="fa fa-fw fa-server"></i> Server</th>
+                                            <th><i class="far fa-fw fa-clock"></i> Session Started</th>
+                                            <th><i class="far fa-fw fa-clock"></i> Length</th>
+                                            <th><i class="far fa-fw fa-map"></i> Most played World</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody></tbody>
+                                    </table>
+                                </div>
                             </div>
                         </div> <!-- End of Most recent sessions -->
                         <div class="col-lg-4 mb-4 col-sm-12">
@@ -540,15 +544,19 @@
                                         Servers<span class="float-right"><i class="far fa-fw fa-hand-pointer"></i>
                                                 <small>Click to expand</small></span></h6>
                                 </div>
-                                <table class="table mb-0" id="tableServerAccordion">
-                                    <thead>
-                                    <th><i class="fa fa-fw fa-server"></i> Server</th>
-                                    <th><i class="far fa-fw fa-clock"></i> Playtime</th>
-                                    <th><i class="far fa-fw fa-calendar-plus"></i> Registered</th>
-                                    <th><i class="far fa-fw fa-calendar-check"></i> Last Seen</th>
-                                    </thead>
-                                    <tbody></tbody>
-                                </table>
+                                <div class="scrollbar">
+                                    <table class="table mb-0" id="tableServerAccordion">
+                                        <thead>
+                                        <tr>
+                                            <th><i class="fa fa-fw fa-server"></i> Server</th>
+                                            <th><i class="far fa-fw fa-clock"></i> Playtime</th>
+                                            <th><i class="far fa-fw fa-calendar-plus"></i> Registered</th>
+                                            <th><i class="far fa-fw fa-calendar-check"></i> Last Seen</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody></tbody>
+                                    </table>
+                                </div>
                             </div>
                         </div> <!-- End of Most recent sessions -->
                         <div class="col-lg-4 mb-4 col-sm-12">
diff --git a/Plan/common/src/main/resources/assets/plan/web/server.html b/Plan/common/src/main/resources/assets/plan/web/server.html
index 9f75d1d33..8c9c1f040 100644
--- a/Plan/common/src/main/resources/assets/plan/web/server.html
+++ b/Plan/common/src/main/resources/assets/plan/web/server.html
@@ -535,18 +535,20 @@
                                                 class="far fa-fw fa-hand-pointer"></i>
                                                 <small>Click to expand</small></span></h6>
                                 </div>
-                                <table class="table mb-0" id="tableAccordion">
-                                    <thead>
-                                    <tr>
-                                        <th><i class="fa fa-fw fa-user"></i> Player</th>
-                                        <th><i class="far fa-fw fa-clock"></i> Session Started</th>
-                                        <th><i class="far fa-fw fa-clock"></i> Length</th>
-                                        <th><i class="far fa-fw fa-map"></i> Most played World</th>
-                                    </tr>
-                                    </thead>
-                                    <tbody>
-                                    </tbody>
-                                </table>
+                                <div class="scrollbar" style="height: 80vh">
+                                    <table class="table mb-0" id="tableAccordion">
+                                        <thead>
+                                        <tr>
+                                            <th><i class="fa fa-fw fa-user"></i> Player</th>
+                                            <th><i class="far fa-fw fa-clock"></i> Session Started</th>
+                                            <th><i class="far fa-fw fa-clock"></i> Length</th>
+                                            <th><i class="far fa-fw fa-map"></i> Most played World</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        </tbody>
+                                    </table>
+                                </div>
                             </div>
                         </div> <!-- End of Most recent sessions -->
                         <div class="col-lg-4 mb-4 col-sm-12">
@@ -699,8 +701,10 @@
                                             class="fas fa-fw fa-crosshairs col-red"></i>
                                         Recent Kills</h6>
                                 </div>
-                                <table class="table" id="playerKillTable">
-                                </table>
+                                <div class="scrollbar">
+                                    <table class="table" id="playerKillTable">
+                                    </table>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -940,24 +944,26 @@
                                             class="fas fa-fw fa-wifi col-green"></i>
                                         Connection Information</h6>
                                 </div>
-                                <table class="table mb-0">
-                                    <thead class="bg-amber">
-                                    <tr>
-                                        <th><i class=" fa fa-fw fa-globe"></i> Country</th>
-                                        <th><i class=" fa fa-fw fa-signal"></i> Average Ping</th>
-                                        <th><i class=" fa fa-fw fa-signal"></i> Worst Ping</th>
-                                        <th><i class=" fa fa-fw fa-signal"></i> Best Ping</th>
-                                    </tr>
-                                    </thead>
-                                    <tbody>
-                                    <tr>
-                                        <td>Local Machine</td>
-                                        <td>-</td>
-                                        <td>-</td>
-                                        <td>-</td>
-                                    </tr>
-                                    </tbody>
-                                </table>
+                                <div class="scrollbar">
+                                    <table class="table mb-0">
+                                        <thead class="bg-amber">
+                                        <tr>
+                                            <th><i class=" fa fa-fw fa-globe"></i> Country</th>
+                                            <th><i class=" fa fa-fw fa-signal"></i> Average Ping</th>
+                                            <th><i class=" fa fa-fw fa-signal"></i> Worst Ping</th>
+                                            <th><i class=" fa fa-fw fa-signal"></i> Best Ping</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        <tr>
+                                            <td>Local Machine</td>
+                                            <td>-</td>
+                                            <td>-</td>
+                                            <td>-</td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
                             </div>
                         </div>
                     </div>