Fix autorefresh

2 files changed, 51 insertions, 67 deletions

diff --git a/static/css/ib.css b/static/css/ib.css
index e56c4b6..fb0433d 100644
--- a/static/css/ib.css
+++ b/static/css/ib.css
@@ -30,7 +30,7 @@ body[data-brd="2d"], body[data-brd="2d"] textarea {
 }
 #main_nav {
   font-size: 14px;
-  line-height: 1.3em;
+  line-height: 1.2em;
   margin-bottom: 0.5em;
   text-align: center;
 }
@@ -105,6 +105,7 @@ textarea {
 }
 .thread {
   margin-right: 170px;
+  line-height: 18px;
 }
 .thread table {
   border-collapse: collapse;
@@ -202,7 +203,10 @@ textarea {
   font-size: 12px;
   line-height: 1;
   margin: 0 -1px;
-  padding: 2px 4px;
+  padding: 1px 4px;
+}
+.nav {
+  line-height: 1;
 }
 .thumbpreview {
   display: inline-block;
diff --git a/static/js/autorefresh.js b/static/js/autorefresh.js
index cec1e33..cd4bf39 100644
--- a/static/js/autorefresh.js
+++ b/static/js/autorefresh.js
@@ -41,80 +41,53 @@ function loadJSON() {
 }
 
 function updateThread(posts, total_replies, serverTime) {
-  var thread_div = document.getElementsByClassName("thread")[0];
-  if (serviceType == 2) var last_elem = document.getElementById("size");
-  else var last_elem = document.getElementsByClassName("cut")[0];
+  var threadDiv = document.getElementsByClassName("thread")[0];
+  if (serviceType == 2) {
+    var repliesDiv = threadDiv.getElementsByClassName("replies")[0];
+  }
+
   for (var i = 0; i < posts.length; i++) {
     post = posts[i];
     var num = thread_length + i + 1;
+
     var div = document.createElement("div");
-    if (serviceType == 2) div.className = "reply";
-    else div.className = "replycont";
-    if (post.email) {
-      if (post.tripcode)
-        s_name =
-          '<a href="mailto:' +
-          post.email +
-          '"><span class="name"><b>' +
-          post.name +
-          "</b> " +
-          post.tripcode +
-          "</span></a>";
-      else
-        s_name =
-          '<a href="mailto:' +
-          post.email +
-          '"><span class="name"><b>' +
-          post.name +
-          "</b></span></a>";
+    div.id = 'p' + post.id;
+    if (serviceType == 2) {
+      div.dataset.n = num;
+      div.className = "reply";
+      if (post.IS_DELETED > 0) {
+        div.className += " deleted";
+      }
     } else {
-      if (post.tripcode)
-        s_name =
-          '<span class="name"><b>' +
-          post.name +
-          "</b> " +
-          post.tripcode +
-          "</span>";
-      else s_name = '<span class="name"><b>' + post.name + "</b></span>";
+      div.className = "replycont";
     }
+    
+    var s_name = '';
+    if (post.email) s_name += '<a href="mailto:' + post.email + '>';
+    s_name += '<span class="name"><b>' + post.name + '</b>';
+    if (post.tripcode) s_name += ' ' + post.tripcode;
+    s_name += '</span>';
+    if (post.email) s_name += '</a>';
+
+    var s_img = '';
     if (serviceType == 2) {
       if (post.file) {
-        s_img =
-          '<a href="/' +
-          board +
-          "/src/" +
-          post.file +
-          '" target="_blank" class="thumb"><img src="/' +
-          board +
-          "/thumb/" +
-          post.thumb +
-          '" width="' +
-          post.thumb_width +
-          '" height="' +
-          post.thumb_height +
-          '" /><br />' +
-          Math.round(post.file_size / 1024) +
-          "KB " +
-          post.file
-            .substring(post.file.lastIndexOf(".") + 1, post.file.length)
-            .toUpperCase() +
-          "</a>";
-      } else s_img = "";
-      if (post.IS_DELETED == 1)
+        s_img = '<a class="thumb" href="/' + board + '/src/' + post.file + '" target="_blank">' +
+        '<img src="/' + board + '/thumb/' + post.thumb + '" width="' + post.thumb_width +
+        '" height="' + post.thumb_height + '" title="' + post.file + '-(' + post.file_size + ' B)" /></a>';
+      }
+
+      if (post.IS_DELETED == 1) {
         div.innerHTML =
-          '<h4 class="deleted">' +
-          num +
-          " : Mensaje eliminado por el usuario.</h4>";
-      else if (post.IS_DELETED == 2)
+          '<h4>' + num + " : Mensaje eliminado por usuario.</h4>";
+      } else if (post.IS_DELETED == 2) {
         div.innerHTML =
-          '<h4 class="deleted">' +
-          num +
-          " : Mensaje eliminado por miembro del staff.</h4>";
-      else
+          '<h4>' + num + " : Mensaje eliminado por staff.</h4>";
+      } else {
         div.innerHTML =
-          '<h4><a class="num" href="#">' +
+          '<h4>' +
           num +
-          "</a> : " +
+          " : " +
           s_name +
           ' : <span class="date" data-unix="' +
           post.timestamp +
@@ -131,7 +104,9 @@ function updateThread(posts, total_replies, serverTime) {
           '<div class="msg">' +
           post.message +
           "</div>";
+      }
     } else {
+      var s_msg = '';
       if (post.file) {
         if (post.image_width != 0) {
           s_img =
@@ -199,7 +174,6 @@ function updateThread(posts, total_replies, serverTime) {
           post.message +
           "</blockquote>";
       } else {
-        s_img = "";
         s_msg = "<blockquote>" + post.message + "</blockquote>";
       }
       if (post.IS_DELETED == 0) {
@@ -234,8 +208,14 @@ function updateThread(posts, total_replies, serverTime) {
       }
     }
 
-    thread_div.insertBefore(div, last_elem);
-    thread_div.setAttribute("data-length", num);
+    if (serviceType == 2) {
+      repliesDiv.appendChild(div);
+    } else {
+      threadDiv.appendChild(div);
+    }
+
+    threadDiv.setAttribute("data-length", num);
+
     if (serviceType == 2)
       document
         .getElementsByTagName("h3")[0]