js/longtable/longtable.js

@@ -28,14 +28,24 @@ $.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);
+
       return el;
     },
     _gen_tr: function(id) {
@@ -61,7 +71,6 @@ $.fn.longtable = function(fields, options, data) {
       $(elem).trigger("new-row", [data[id], el]);
       shown_rows[id] = true;
     },
-
     _sort_by: function(field) {
       if (field !== undefined) {
         if (sorted_by == field) {
@@ -74,22 +83,18 @@ $.fn.longtable = function(fields, options, data) {
       }
       lt.sort_by(sorted_by, sorted_reverse);
     },
-
     _apply_filter: function() {
       data = data.filter(filter);
     },
     _reset_data: function() {
       data = orig_data;
     },
-
-
     set_filter: function(f) {
       filter = f;
       lt._reset_data();
       lt._apply_filter();
       lt._sort_by();
     },
-
     sort_by: function(field, reverse) {
       if (field !== undefined) {
         sorted_by = field;
@@ -103,7 +108,6 @@ $.fn.longtable = function(fields, options, data) {
 
       lt.update_data();
     },
-
     update_viewport: function() {
       var first = $(window).scrollTop() - $(elem).offset().top - options.row_h;
       var last = first + $(window).height();
@@ -111,11 +115,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);
         }
       });
@@ -124,20 +129,14 @@ $.fn.longtable = function(fields, options, data) {
         if (!shown_rows[id]) lt._insert(id);
       }
     },
-
     update_data: function() {
-
       lt._clean();
       lt.update_viewport();
     },
-
     get_data: function() {
       return data;
     },
-
-    destroy: function() {
-    },
-
+    destroy: function() {},
     // http://web.archive.org/web/20130826203933/http://my.opera.com/GreyWyvern/blog/show.dml/1671288
     sort_alphanum: function(a, b) {
       function chunkify(t) {
@@ -170,8 +169,6 @@ $.fn.longtable = function(fields, options, data) {
     // End of foreign code
   };
 
-
-
   lt._gen_tr().appendTo(elem);
   lt.update_data();
 

js/mod/ban-list.js

@@ -2,7 +2,6 @@ var banlist_init = function(token, my_boards, inMod) {
   inMod = !inMod;
 
   var lt;
-
   var selected = {};
 
   var time = function() { return Date.now()/1000|0; }
@@ -37,7 +36,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%", 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 +132,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;
 }
-