Fix bans page

js/longtable/longtable.js

@@ -28,14 +28,28 @@ $.fn.longtable = function(fields, options, data) {
       }
       else {
         el = $("<td></td>");
-        if (fields[field].fmt) { // Special formatting?
+        if (fields[field].fmt) {
+          // Apply ad-hoc formatting.
           el.html(fields[field].fmt(data[id]));
         }
         else {
           el.html(data[id][field]);
         }
       }
+
+      if (fields[field].handle_longwords) {
+        el.css("word-break", "break-all");
+      }
+
+      if (fields[field].max_width) {
+      	el.css("max-width", fields[field].max_width);
+      }
       el.css("width", fields[field].width);
+
+      if (fields[field].max_height) {
+        el.css("max-height", fields[field].max_height);
+      }
+
       return el;
     },
     _gen_tr: function(id) {
@@ -111,11 +125,12 @@ $.fn.longtable = function(fields, options, data) {
       first = Math.floor(first / options.row_h);
       last  = Math.ceil (last /  options.row_h);
 
-      first = first < 0 ? 0 : first;
+      first = first < 1 ? 1 : first;
       last = last >= data.length ? data.length - 1 : last;
 
       $.each(shown_rows, function(id) {
-        if (id < first || id > last) {
+        // Remove only the rows after.
+        if (id > last) {
           lt._remove(id);
         }
       });
@@ -178,4 +193,4 @@ $.fn.longtable = function(fields, options, data) {
   $(window).on("scroll resize", lt.update_viewport);
 
   return lt;
-};
+};

js/mod/ban-list.js

@@ -37,7 +37,7 @@ var banlist_init = function(token, my_boards, inMod) {
 	}
 	return pre+f.mask;
       } },
-      reason: {name: _("Reason"), width: "calc(100% - 715px - 6 * 4px)", fmt: function(f) {
+      reason: {name: _("Reason"), width: "40%", max_width: "40%", max_height: "240px", handle_longwords: true, fmt: function(f) {
 	var add = "", suf = '';
         if (f.seen == 1) add += "<i class='fa fa-check' title='"+_("Seen")+"'></i>";
 	if (f.message) {
@@ -133,25 +133,5 @@ var banlist_init = function(token, my_boards, inMod) {
 
       $(".banform").off("submit").submit();
     });
-
-    if (device_type == 'desktop') {
-      // Stick topbar
-      var stick_on = $(".banlist-opts").offset().top;
-      var state = true;
-      $(window).on("scroll resize", function() {
-        if ($(window).scrollTop() > stick_on && state == true) {
-  	  $("body").css("margin-top", $(".banlist-opts").height());
-          $(".banlist-opts").addClass("boardlist top").detach().prependTo("body");
-  	  $("#banlist tr:not(.row)").addClass("tblhead").detach().appendTo(".banlist-opts");
-	  state = !state;
-        }
-        else if ($(window).scrollTop() < stick_on && state == false) {
-	  $("body").css("margin-top", "auto");
-          $(".banlist-opts").removeClass("boardlist top").detach().prependTo(".banform");
-	  $(".tblhead").detach().prependTo("#banlist");
-          state = !state;
-        }
-      });
-    }
   });
 }

stylesheets/longtable/longtable.css

@@ -1,26 +1,28 @@
 .longtable {
-  display: block;
   position: relative;
   box-sizing: border-box;
+  display: table;
+  table-layout: fixed;
+  width: 100%;
 }
 .longtable > tbody {
-  display: block;
   box-sizing: border-box;
+  display: block;
 }
 .longtable > tbody > tr {
-  display: block;
   box-sizing: border-box;
   clear: left;
   width: 100%;
 }
 .longtable > tbody > tr > td {
-  display: block;
+  display: table;
   box-sizing: border-box;
   float: left;
   padding: 0;
+  word-break: break-word;
 }
 .longtable > tbody > tr > th {
-  display: block;
+ *display: table;
   box-sizing: border-box;
   float: left;
   padding: 0;
@@ -28,4 +30,3 @@
 .longtable > tbody > tr > th.sortable {
   cursor: pointer;
 }
-