Diseño responsivo: Lista de boards se convierte en menú desplegable

3 files changed, 62 insertions, 18 deletions

diff --git a/static/js/shobon.js b/static/js/shobon.js
index 5c65e94..e34ee98 100644
--- a/static/js/shobon.js
+++ b/static/js/shobon.js
@@ -5,9 +5,9 @@ var hide_id = new Set();
 
 var shobon_ver = "v0.4+";
 function shobon() {
-  boardName = document.getElementsByName("board")[0].value;
-  var inThread = document.getElementsByTagName("body")[0].className == "threadpage";
-  var newRepliesCounter = 0;
+  boardName = document.body.dataset.brd;
+  var where = document.body.className;
+  var inThread = where == "threadpage";
 
   if(!inThread) {
     /* Create settings link */
@@ -22,9 +22,12 @@ function shobon() {
 
   if(localStorage.getItem("shobon_on") == "false") return;
   else console.log("Running shobon " + shobon_ver);
-
-  if (localStorage.getItem("shobon_usefilters") != "false") {
-    loadFilters();
+  
+  var newRepliesCounter = 0;
+  
+  // dejar barra superior fija
+  if(localStorage.getItem("shobon_navbar") == "true") {
+    fixedNav();
   }
 
   var shobon_time = localStorage.getItem("shobon_time");  
@@ -33,7 +36,22 @@ function shobon() {
     else if (boardName == "2d") week = ["日", "月", "火", "水", "木", "金", "土"];
     else week = ["dom", "lun", "mar", "mie", "jue", "vie", "sab"];
   }
-  
+
+  if(where=="threads") {
+    if(shobon_time != "false") {
+      var dt = document.getElementsByClassName("date");
+      for (var i=0; i<dt.length; i++) {
+        dt[i].addEventListener("mouseover", function(e) { this.title = "Hace "+timeAgo(this.dataset.unix); });
+        dt[i].textContent = localTime(dt[i].dataset.unix);
+      }
+    }
+    return;
+  }
+
+  if (localStorage.getItem("shobon_usefilters") != "false") {
+    loadFilters();
+  }
+
   var threadList = document.getElementsByClassName("thread");
   for (var i=0; i<threadList.length; i++) {
     var threadId;
@@ -70,7 +88,7 @@ function shobon() {
         if (isNewReply) {
           newRepliesCounter++;
           newRepliesInThread++;
-          reply.children[0].innerHTML += " <span class='shobonNew' style='color: #CC6666; font-weight: bold;'>Nuevo!</span>";
+          reply.children[0].innerHTML += " <span class='shobonNew' style='color:#CC6666; font-weight:bold;'>Nuevo!</span>";
         }
       }
 
@@ -78,7 +96,6 @@ function shobon() {
       if(are_filters) {
         checkBlackList(reply);
       }
-
       // reemplazar ISO 3166-1 alpha-2 por nombres completos
       if (localStorage.getItem("shobon_country") == "true" && boardName == "world") {
         replaceCountryName(reply)
@@ -87,10 +104,6 @@ function shobon() {
       if(localStorage.getItem("shobon_ids") != "false") {
         paintIds(reply);
       }
-      // dejar barra superior fija
-      if(localStorage.getItem("shobon_navbar") == "true") {
-        fixedNav();
-      }
       // insertar imágenes
       if(localStorage.getItem("shobon_embedimg") == "true") {
         embedImg(reply);
@@ -506,11 +519,8 @@ function padZero(str, len) {
 }
 
 function fixedNav() {
-  if (document.body.className === "mainpage" || document.body.className === "threads") {
-    document.getElementById("main_nav").style.position = "fixed";
-    document.getElementById("main_nav").style.top = "0";
-    document.body.style.marginTop = "2em";
-  }
+  var bar = document.getElementById("main_nav");
+  if(bar){ bar.className+=" fix"; document.body.style.marginTop = "2em"; }
 }
 
 document.addEventListener('DOMContentLoaded', shobon, false);
\ No newline at end of file
diff --git a/static/js/weabot.js b/static/js/weabot.js
index 3f8aac7..45b7063 100644
--- a/static/js/weabot.js
+++ b/static/js/weabot.js
@@ -343,6 +343,23 @@ document.addEventListener("DOMContentLoaded", function(e) {
     if (a[i].getAttribute("href") == "/"+board+"/") {a[i].className = "cur_brd"; break;}
   }
 
+  if (screen.width<720) {
+    var head=document.getElementById("main_nav");
+    var b=head.getElementsByTagName("a");
+    var s=document.createElement("select");
+    for(var i=0;i<b.length;i++) {
+      var o = document.createElement("option");
+      o.value = b[i].href;
+      o.textContent = b[i].textContent;
+      if(b[i].className=="cur_brd") o.defaultSelected = true;
+      s.appendChild(o);
+    }
+    s.addEventListener("change", function(e){ window.location.href=this.value; });
+    head.removeChild(head.childNodes[0]);
+    head.className = "mob fix";
+    head.insertBefore(s, head.childNodes[0]);
+  }
+
   if(localStorage.hasOwnProperty("hiddenthreads")) {
     hiddenthreads = localStorage.getItem("hiddenthreads").split("!");
     if (document.getElementById("catalog")) {
diff --git a/static/js/weabotxt.js b/static/js/weabotxt.js
index 670ce50..13911da 100644
--- a/static/js/weabotxt.js
+++ b/static/js/weabotxt.js
@@ -211,6 +211,23 @@ document.addEventListener("DOMContentLoaded", function() {
     }
   }
 
+  if (screen.width<720) {
+    var head=document.getElementById("main_nav");
+    var b=head.getElementsByTagName("a");
+    var s=document.createElement("select");
+    for(var i=1;i<b.length;i++) {
+      var o = document.createElement("option");
+      o.value = b[i].href;
+      o.textContent = b[i].textContent;
+      if(b[i].className=="cur_brd") o.defaultSelected = true;
+      s.appendChild(o);
+    }
+    s.addEventListener("change", function(e){ window.location.href=this.value; });
+    head.className = "mob fix";
+    head.innerHTML = '<a href="/" target="_top">Bienvenido a Internet</a> | ';
+    head.appendChild(s);
+  }
+
   var forms = document.getElementsByTagName("form");
   for(var i=0;i<forms.length;i++) { if(forms[i].id.startsWith("postform")) setInputs(forms[i].id); }