Merge branch 'darthleo-jqueryui-integration' into 'dev'

Better dashboard re-ordering

See merge request crafty-controller/crafty-commander!214

app/classes/web/public_handler.py

@@ -42,7 +42,7 @@ class PublicHandler(BaseHandler):
             'lang_page': helper.getLangPage(helper.get_setting('language')),
             'query': ""
         }
-        if (self.request.query):
+        if self.request.query:
             page_data['query'] = self.request.query
 
         # sensible defaults
@@ -66,7 +66,7 @@ class PublicHandler(BaseHandler):
 
         # if we have no page, let's go to login
         else:
-            if (self.request.query):
+            if self.request.query:
                 self.redirect('/public/login?'+self.request.query)
             else:
                 self.redirect('/public/login')
@@ -90,13 +90,13 @@ class PublicHandler(BaseHandler):
             'lang_page': helper.getLangPage(helper.get_setting('language')),
             'query': ""
         }
-        if (self.request.query):
+        if self.request.query:
             page_data['query'] = self.request.query
 
         if page == 'login':
 
             next_page = "/public/login"
-            if (self.request.query):
+            if self.request.query:
                 next_page = '/public/login?'+self.request.query
 
             entered_username = bleach.clean(self.get_argument('username'))
@@ -112,7 +112,7 @@ class PublicHandler(BaseHandler):
                 #self.clear_cookie("user")
                 #self.clear_cookie("user_data")
                 self.clear_cookie("token")
-                if (self.request.query):
+                if self.request.query:
                     self.redirect(f'/public/login?error_msg={error_msg}&{self.request.query}')
                 else:
                     self.redirect(f'/public/login?error_msg={error_msg}')
@@ -124,7 +124,7 @@ class PublicHandler(BaseHandler):
                 #self.clear_cookie("user")
                 #self.clear_cookie("user_data")
                 self.clear_cookie("token")
-                if (self.request.query):
+                if self.request.query:
                     self.redirect(f'/public/login?error_msg={error_msg}&{self.request.query}')
                 else:
                     self.redirect(f'/public/login?error_msg={error_msg}')
@@ -147,7 +147,7 @@ class PublicHandler(BaseHandler):
                 self.controller.management.add_to_audit_log(user_data.user_id, "Logged in", 0, self.get_remote_ip())
 
 
-                if (self.request.query_arguments.get('next')):
+                if self.request.query_arguments.get('next'):
                     next_page = self.request.query_arguments.get('next')[0].decode()
                 else:
                     next_page = "/panel/dashboard"
@@ -160,12 +160,12 @@ class PublicHandler(BaseHandler):
                 error_msg = "Inncorrect username or password. Please try again."
                 # log this failed login attempt
                 self.controller.management.add_to_audit_log(user_data.user_id, "Tried to log in", 0, self.get_remote_ip())
-                if (self.request.query):
+                if self.request.query:
                     self.redirect(f'/public/login?error_msg={error_msg}&{self.request.query}')
                 else:
                     self.redirect(f'/public/login?error_msg={error_msg}')
         else:
-            if (self.request.query):
+            if self.request.query:
                 self.redirect('/public/login?'+self.request.query)
             else:
                 self.redirect('/public/login')

app/frontend/static/assets/css/jquery-ui.css

@@ -0,0 +1,178 @@
+/*! jQuery UI - v1.13.1 - 2022-03-14
+* http://jqueryui.com
+* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css
+* Copyright jQuery Foundation and other contributors; Licensed MIT */
+
+.ui-draggable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+	pointer-events: none;
+}
+
+
+/* Icons
+----------------------------------*/
+.ui-icon {
+	display: inline-block;
+	vertical-align: middle;
+	margin-top: -.25em;
+	position: relative;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+.ui-widget-icon-block {
+	left: 50%;
+	margin-left: -8px;
+	display: block;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-resizable {
+	position: relative;
+}
+.ui-resizable-handle {
+	position: absolute;
+	font-size: 0.1px;
+	display: block;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-resizable-disabled .ui-resizable-handle,
+.ui-resizable-autohide .ui-resizable-handle {
+	display: none;
+}
+.ui-resizable-n {
+	cursor: n-resize;
+	height: 7px;
+	width: 100%;
+	top: -5px;
+	left: 0;
+}
+.ui-resizable-s {
+	cursor: s-resize;
+	height: 7px;
+	width: 100%;
+	bottom: -5px;
+	left: 0;
+}
+.ui-resizable-e {
+	cursor: e-resize;
+	width: 7px;
+	right: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-w {
+	cursor: w-resize;
+	width: 7px;
+	left: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-se {
+	cursor: se-resize;
+	width: 12px;
+	height: 12px;
+	right: 1px;
+	bottom: 1px;
+}
+.ui-resizable-sw {
+	cursor: sw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	bottom: -5px;
+}
+.ui-resizable-nw {
+	cursor: nw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	top: -5px;
+}
+.ui-resizable-ne {
+	cursor: ne-resize;
+	width: 9px;
+	height: 9px;
+	right: -5px;
+	top: -5px;
+}
+.ui-selectable {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-selectable-helper {
+	position: absolute;
+	z-index: 100;
+	border: 1px dotted black;
+}
+.ui-sortable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}

app/frontend/static/assets/css/jquery-ui.structure.css

@@ -0,0 +1,173 @@
+.ui-draggable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+	pointer-events: none;
+}
+
+
+/* Icons
+----------------------------------*/
+.ui-icon {
+	display: inline-block;
+	vertical-align: middle;
+	margin-top: -.25em;
+	position: relative;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+.ui-widget-icon-block {
+	left: 50%;
+	margin-left: -8px;
+	display: block;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-resizable {
+	position: relative;
+}
+.ui-resizable-handle {
+	position: absolute;
+	font-size: 0.1px;
+	display: block;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-resizable-disabled .ui-resizable-handle,
+.ui-resizable-autohide .ui-resizable-handle {
+	display: none;
+}
+.ui-resizable-n {
+	cursor: n-resize;
+	height: 7px;
+	width: 100%;
+	top: -5px;
+	left: 0;
+}
+.ui-resizable-s {
+	cursor: s-resize;
+	height: 7px;
+	width: 100%;
+	bottom: -5px;
+	left: 0;
+}
+.ui-resizable-e {
+	cursor: e-resize;
+	width: 7px;
+	right: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-w {
+	cursor: w-resize;
+	width: 7px;
+	left: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-se {
+	cursor: se-resize;
+	width: 12px;
+	height: 12px;
+	right: 1px;
+	bottom: 1px;
+}
+.ui-resizable-sw {
+	cursor: sw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	bottom: -5px;
+}
+.ui-resizable-nw {
+	cursor: nw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	top: -5px;
+}
+.ui-resizable-ne {
+	cursor: ne-resize;
+	width: 9px;
+	height: 9px;
+	right: -5px;
+	top: -5px;
+}
+.ui-selectable {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-selectable-helper {
+	position: absolute;
+	z-index: 100;
+	border: 1px dotted black;
+}
+.ui-sortable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}

app/frontend/templates/panel/dashboard.html

@@ -125,7 +125,7 @@
               </thead>
               <tbody>
                 {% for server in data['servers'] %}
-                <tr id="{{server['server_data']['server_id']}}" draggable="true" ondragstart="start()"  ondragover="dragover()" ondragend="dragend()">
+                <tr id="{{server['server_data']['server_id']}}" draggable="true">
                   <td draggable="false">
                     <i class="fas fa-server"></i>
                     <a draggable="false" href="/panel/server_detail?id={{server['server_data']['server_id']}}">
@@ -289,25 +289,26 @@
 <script src="/static/assets/js/motd.js"></script>
 <script>
   function display_motd() {
-    var all_motds = Array.from(document.getElementsByClassName('input_motd'));
+    let all_motds = Array.from(document.getElementsByClassName('input_motd'));
     for (element of all_motds) {
       initParser(element.id, element.id);
     };
   }
 
-  $(document).ready(function () {
+  $(document).ready(function() {
     $('[data-toggle="popover"]').popover();
     if ($(window).width() < 1000) {
       $('.too_small').popover("show");
     }
-
   });
-  $(window).ready(function () {
+
-    $('body').click(function () {
+  $(window).ready(function() {
+    $('body').click(function() {
       $('.too_small').popover("hide");
     });
   });
-  $(window).resize(function () {
+
+  $(window).resize(function() {
     // This will execute whenever the window is resized
     if ($(window).width() < 1000) {
       $('.too_small').popover("show");
@@ -321,7 +322,7 @@
 
   function send_command(server_id, command) {
     /* this getCookie function is in base.html */
-    var token = getCookie("_xsrf");
+    const token = getCookie("_xsrf");
 
     $.ajax({
       type: "POST",
@@ -341,7 +342,7 @@
 
   function send_kill(server_id) {
     /* this getCookie function is in base.html */
-    var token = getCookie("_xsrf");
+    const token = getCookie("_xsrf");
 
     $.ajax({
       type: "POST",
@@ -370,43 +371,27 @@
     /* TODO Update each element */
 
     /* Update CPU */
-    cpu_status = "";
+    cpu_status = "bg-danger";
-    if (server.cpu <= 33)
+    if (server.cpu <= 33) {
-    {
       cpu_status = "bg-success";
-    }
+    } else if (server.cpu > 33 && server.cpu <= 66) {
-    else if (server.cpu > 33 && server.cpu <= 66)
-    {
       cpu_status = "bg-warning";
     }
-    else
+
-    {
-      cpu_status = "bg-danger";
-    }
     server_cpu.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="`+ server.cpu +`"><div class="progress-bar `+ cpu_status + `" role="progressbar" style="width: `+ server.cpu + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`+ server.cpu +`%`;
 
 
     /* Update Memory */
-    mem_status = "";
+    mem_status = "bg-danger";
-    total_mem = "";
+    total_mem = "0 MB";
-    if (server.mem_percent <= 33)
+
-    {
+    if (server.mem_percent <= 33) {
       mem_status = "bg-success";
-    } else if (server.mem_percent > 33 && server.mem_percent <= 66)
+    } else if (server.mem_percent > 33 && server.mem_percent <= 66) {
-    {
       mem_status = "bg-warning";
     }
-    else
-    {
-      mem_status = "bg-danger";
-    }
 
-    if (server.mem == 0)
+    if (server.mem !== 0) {
-    {
-      total_mem = "0 MB";
-    }
-    else
-    {
       total_mem = server.mem;
     }
 
@@ -426,11 +411,11 @@
         let servers = document.getElementsByClassName("server-player-totals");
         let all_total_players = 0;
         let all_total_max_players = 0;
-        for(var i = 0; i < servers.length; i++){
+        for(let i = 0; i < servers.length; i++) {
-          try{
+          try {
             all_total_players += parseInt(servers[i].getAttribute('data-players'));
             all_total_max_players += parseInt(servers[i].getAttribute('data-max'));
-          }catch{
+          } catch {
             console.log("Player totals are not of type int");
           }
         }
@@ -444,7 +429,7 @@
       }
 
       /* Update Motd */
-      var motd = "";
+      let motd = "";
       if (server.desc) {
         motd = `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span>`;
         server_infos = server_infos + '<div id="desc_id" style="word-wrap: break-word; max-width: 85px !important; overflow: auto;">' + motd + '</div>' + "<br />";
@@ -458,33 +443,32 @@
     }
 
     /* Update Online Status */
-    var online_status = "";
+    let online_status = `<span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
+
     if (server.running) {
       online_status = `<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])}}</span>`;
     }
-    else {
+
-      if (server.crashed){
+    if (server.crashed) {
-        online_status = `<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard', 'crashed', data['lang'])}}</span>`
+      online_status = `<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard', 'crashed', data['lang'])}}</span>`
-      }else{
-      online_status = `<span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
-      }
     }
+
     server_online_status.innerHTML = online_status;
   }
 
   function update_servers_status(data) {
-    try{
+    try {
     update_one_server_status(data[0]);
-  }catch{
+    } catch (e) {
-    
+      console.log ('Failed to update server stats', e)
-  }
+    }
     display_motd();
   }
 
-  $(document).ready(function () {
+  $(document).ready(function() {
     console.log('ready for JS!')
 
-    $(".play_button").click(function () {
+    $(".play_button").click(function() {
       server_id = $(this).attr("data-id");
       send_command(server_id, 'start_server');
       bootbox.alert({
@@ -494,7 +478,7 @@
       });
     });
 
-    $(".stop_button").click(function () {
+    $(".stop_button").click(function() {
       console.log("stopping server");
       server_id = $(this).attr("data-id");
       send_command(server_id, 'stop_server');
@@ -505,7 +489,7 @@
       });
     });
 
-    $(".restart_button").click(function () {
+    $(".restart_button").click(function() {
       server_id = $(this).attr("data-id");
       send_command(server_id, 'restart_server');
       bootbox.alert({
@@ -514,7 +498,7 @@
         message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientRestart", data["lang"]) %} </div>'
       });
     });
-    $(".kill_button").click(function () {
+    $(".kill_button").click(function() {
       server_id = $(this).attr("data-id");
       bootbox.confirm({
         message: "This will kill the server process and all it's subprocesses. Killing a process can potentially corrupt files. Only do this in extreme circumstances. Are you sure you would like to continue?",
@@ -528,16 +512,16 @@
             className: 'btn-secondary'
           }
         },
-        callback: function (result) {
+        callback: function(result) {
           if (result) {
             send_kill(server_id);
-            var dialog = bootbox.dialog({
+            let dialog = bootbox.dialog({
               title: '{% raw translate("dashboard", "killing", data["lang"]) %}',
               message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
             });
 
-            dialog.init(function () {
+            dialog.init(function() {
-              setTimeout(function () {
+              setTimeout(function() {
                 location.reload();
               }, 15000);
             });
@@ -552,8 +536,8 @@
       mem_percent = document.getElementById('mem_percent');
 
 
-      webSocket.on('update_host_stats', function (hostStats) {
+      webSocket.on('update_host_stats', function(hostStats) {
-        var cpuDataTitle = `{% raw translate('dashboard', 'cpuCores', data['lang']) %}: ${hostStats.cpu_cores} <br /> {% raw translate("dashboard", "cpuCurFreq", data['lang']) %}: ${hostStats.cpu_cur_freq} <br /> {% raw translate("dashboard", "cpuMaxFreq", data['lang']) %}: ${hostStats.cpu_max_freq}`;
+        let cpuDataTitle = `{% raw translate('dashboard', 'cpuCores', data['lang']) %}: ${hostStats.cpu_cores} <br /> {% raw translate("dashboard", "cpuCurFreq", data['lang']) %}: ${hostStats.cpu_cur_freq} <br /> {% raw translate("dashboard", "cpuMaxFreq", data['lang']) %}: ${hostStats.cpu_max_freq}`;
         cpu_data.setAttribute('data-original-title', cpuDataTitle);
         cpu_usage.textContent = hostStats.cpu_usage;
         mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage", data['lang']) %}: ${hostStats.mem_usage}`);
@@ -562,13 +546,13 @@
     }
 
     if (webSocket) {
-      webSocket.on('send_start_reload', function () {
+      webSocket.on('send_start_reload', function() {
         location.reload()
       });
     }
 
     if (webSocket) {
-      webSocket.on('update_button_status', function (updateButton) {
+      webSocket.on('update_button_status', function(updateButton) {
         let serverId = updateButton.server_id;
         let message = updateButton.string;
         let updating = updateButton.isUpdating;
@@ -587,7 +571,7 @@
       webSocket.on('update_server_status', update_servers_status);
     }
 
-    $(".clone_button").click(function () {
+    $(".clone_button").click(function() {
       server_id = $(this).attr("data-id");
       send_command(server_id, 'clone_server');
       bootbox.alert({
@@ -599,46 +583,36 @@
 
   });
 </script>
+<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">
 <script>
-  var row;
 
-  function start(){
+  /* Search Bar */
-    row = event.target;
+  $(document).ready(function() {
-  }
+    let servers_table = $('#servers_table').DataTable({
-  function dragover(){
+      "ordering": false, // false to disable sorting (or any other option)
-    var e = event;
+      "paging": false
-    e.preventDefault();
+    });
+    document.getElementById('first').setAttribute('draggable', false);
+    $('.dataTables_length').addClass('bs-select');
+  });
+  /* Search Bar End */
 
-    let children= Array.from(e.target.parentNode.parentNode.children);
+  $(document).on("mousedown keyup click", function(event) {
+    const value = $('.dataTables_filter input').val();
 
-    if(children.indexOf(e.target.parentNode)>children.indexOf(row))
+    if ($("table#servers_table tbody").sortable("toArray").length > 1 && value === '') {
-      e.target.parentNode.after(row);
+      $("table#servers_table tbody").sortable("enable");
-    else
+    } else {
-      e.target.parentNode.before(row);
+      $("table#servers_table tbody").sortable("disable");
-  }
-
-  function dragend(){
-    var id_string = '';
-    const table = document.querySelector("table");
-    for (const row of table.rows) {
-      if (row.getAttribute('id') != null){
-        if (id_string != ''){
-          id_string += ',' + String(row.getAttribute('id'));
-        }else{
-          id_string +=String(row.getAttribute('id'));
-        }
-      }
     }
-    console.log(id_string)
+  });
-    if($('#servers_table').find('input[type=search]').length == 0){
-      sendOrder(id_string)
-    }else{
-      console.log("Will not reorder when servers are filtered")
-    }
-  }
 
+$(document).ready(function() {
   function sendOrder(id_string) {
-    var token = getCookie("_xsrf")
+    const token = getCookie("_xsrf")
+
     $.ajax({
       type: "POST",
       headers: {'X-XSRFToken': token},
@@ -646,34 +620,46 @@
       data: {
         order: id_string,
       },
-      success: function(data){
+      success: function(data) {
         console.log("got response:");
         console.log(data);
       },
     });
   }
-  $(document).ready(function () {
+
-    var servers_table = $('#servers_table').DataTable({
+  // Inits the sortable
-    "ordering": false, // false to disable sorting (or any other option)
+  $("table#servers_table tbody")
-    "paging": false
+    .sortable({
-    });
+      items: '> tr',
-    document.getElementById('first').setAttribute('draggable', false);
+      cursor: "move",
-    $('.dataTables_length').addClass('bs-select');
+      axis: "y",
-    });
+      revert: true,
-  $(document).mousedown(function( event ) {
+      forcePlaceholderSize: true,
-    let value = $('.dataTables_filter input').val()
+      placeholder:'table-placeholder',
-    if(value === ''){
+      deactivate: function(event, ui) {
-      const table = document.querySelector("table");
+        // Gets the list of ids in the server list as an array,
-      for (const row of table.rows) {
+        // and joins the elements with an [,] and sends to the server.
-        row.setAttribute('draggable', true)
+        const ids = $("table#servers_table tbody").sortable("toArray").join();
-      }
+        try {
-    }else{
+          sendOrder(ids);
-      const table = document.querySelector("table");
+        } catch {
-      for (const row of table.rows) {
+          console.log("Search is actively supressing order change")
-        row.setAttribute('draggable', false)
+        }
-      }
+      },
-    }
+  });
-} );
+
+  // Give the table an actual width so the draggable does't collapse when dragged
+  $("table#servers_table")
+      .children()
+      .find("td")
+      .each(function () {
+        $(this).css("width", "").css("width", $(this).outerWidth());
+  });
+
+  // Fixes the appearance of a scrollbar when a user tries to drag an item too low
+  $("div#servers_table_wrapper").css({ overflow: "hidden" });
+});
+
 </script>
 
 {% end %}