From c303a866b657aa7f302662463065f8217a370970 Mon Sep 17 00:00:00 2001
From: Randy Carranza <badrockr.email@gmail.com>
Date: Sun, 20 Mar 2022 06:04:06 -0400
Subject: [PATCH 1/2] Added code to disabled sorting when the user is a mobile
 user

---
 app/frontend/templates/panel/dashboard.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/frontend/templates/panel/dashboard.html b/app/frontend/templates/panel/dashboard.html
index 4c357f01..2b3ab52a 100644
--- a/app/frontend/templates/panel/dashboard.html
+++ b/app/frontend/templates/panel/dashboard.html
@@ -265,6 +265,7 @@
 
 </div>
 <!-- content-wrapper ends -->
+<div id="mobile"></div>
 <style>
   .popover-body {
     color: white !important;
@@ -586,6 +587,11 @@
 <script src="/static/assets/js/jquery-ui.js"></script>
 <link rel="stylesheet" href="/static/assets/css/jquery-ui.css">
 <link rel="stylesheet" href="/static/assets/css/jquery-ui.structure.css">
+<style>
+  @media only screen and (max-width: 760px) {
+    #mobile { display: none; }
+  }
+</style>
 <script>
 
   /* Search Bar */
@@ -601,8 +607,9 @@
 
   $(document).on("mousedown keyup click", function(event) {
     const value = $('.dataTables_filter input').val();
+    const is_mobile = $('#some-element').css('display')=='none';
 
-    if ($("table#servers_table tbody").sortable("toArray").length > 1 && value === '') {
+    if ($("table#servers_table tbody").sortable("toArray").length > 1 && value === '' && !is_mobile) {
       $("table#servers_table tbody").sortable("enable");
     } else {
       $("table#servers_table tbody").sortable("disable");

From 6d6699638a9f391074e96f18bebfbe57ed4b62b7 Mon Sep 17 00:00:00 2001
From: Randy Carranza <badrockr.email@gmail.com>
Date: Sun, 20 Mar 2022 08:03:56 -0400
Subject: [PATCH 2/2] Resolves an issue on mobile where the table cant be
 scrolled to the side

---
 app/frontend/templates/panel/dashboard.html | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/frontend/templates/panel/dashboard.html b/app/frontend/templates/panel/dashboard.html
index 2b3ab52a..d58b43fb 100644
--- a/app/frontend/templates/panel/dashboard.html
+++ b/app/frontend/templates/panel/dashboard.html
@@ -591,6 +591,14 @@
   @media only screen and (max-width: 760px) {
     #mobile { display: none; }
   }
+  .ui-sortable-handle {
+    cursor: default;
+    padding:2px;
+  }
+  .ui-sortable-handle:hover {
+    cursor: grab !important;
+    padding:2px;
+  }
 </style>
 <script>
 
@@ -607,7 +615,7 @@
 
   $(document).on("mousedown keyup click", function(event) {
     const value = $('.dataTables_filter input').val();
-    const is_mobile = $('#some-element').css('display')=='none';
+    const is_mobile = $('#mobile').css('display')=='none';
 
     if ($("table#servers_table tbody").sortable("toArray").length > 1 && value === '' && !is_mobile) {
       $("table#servers_table tbody").sortable("enable");
@@ -638,9 +646,10 @@ $(document).ready(function() {
   $("table#servers_table tbody")
     .sortable({
       items: '> tr',
-      cursor: "move",
+      cursor: "grabbing",
       axis: "y",
       revert: true,
+      handle:"i.fas.fa-server,a",
       forcePlaceholderSize: true,
       placeholder:'table-placeholder',
       deactivate: function(event, ui) {
@@ -664,7 +673,10 @@ $(document).ready(function() {
   });
 
   // Fixes the appearance of a scrollbar when a user tries to drag an item too low
-  $("div#servers_table_wrapper").css({ overflow: "hidden" });
+  // Disabled on mobile since sorting is disabled on mobile
+  if($('#mobile').css('display') != 'none'){
+    $("div#servers_table_wrapper").css({ overflow: "hidden" });
+  }
 });
 
 </script>