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

14 files changed, 79 insertions, 25 deletions

diff --git a/cgi/templates/base_top.html b/cgi/templates/base_top.html
index 424c309..8c26b9d 100644
--- a/cgi/templates/base_top.html
+++ b/cgi/templates/base_top.html
@@ -44,7 +44,7 @@
   <?py if not force_css: ?>
   <span>[Estilo: <select id="styles">
   <?py for title in styles: ?><option value="#{title}">#{title}</option><?py #endfor ?>
-  </select>]</span>
+  </select></span>
 <?py #endif ?></div>
   <div class="logo">
   <?py if board: ?>
diff --git a/static/css/ib.css b/static/css/ib.css
index e338d6d..d36f3da 100644
--- a/static/css/ib.css
+++ b/static/css/ib.css
@@ -57,7 +57,7 @@ input[type="text"],input[type="password"],textarea{background:#FFF;border:1px in
 @media(max-width:900px){.thread{margin-right:0}}
 @media(max-width:720px){
  body{font-size:15px;padding:4px}
- #main_nav span{display:block;margin-top:8px}
+ #main_nav.mob{font-size:12px}
  .postblock{font-size:14px;white-space:nowrap}
  .pass,.ell,.thumbmsg{display:none}
  .thread table,#postform input[type="text"],#postform input[type="submit"],#postform textarea,#postform input[type="file"],.rules{max-width:100%;width:100%}
diff --git a/static/css/txt/4am.css b/static/css/txt/4am.css
index 2425330..fab8e43 100644
--- a/static/css/txt/4am.css
+++ b/static/css/txt/4am.css
@@ -12,7 +12,8 @@ h2 span{color:#999}
 h3,#size{color:#ab4642}
 h3 span{color:#999}
 h4{color:#c1c5c2}
-#main_nav{background:#000;color:#7cafc2;z-index:9}
+#main_nav{background:#000;color:#7cafc2}
+#main_nav.fix{box-shadow:0 0 3px #000}
 .banner{-webkit-filter:grayscale(60%);filter:grayscale(60%)}
 .outerbox{background:#111213;border:1px solid #4B4E55;color:#777879}
 #titlebox .threadnav{margin:-6px}
diff --git a/static/css/txt/baisano.css b/static/css/txt/baisano.css
index 6547b96..dc4a79d 100644
--- a/static/css/txt/baisano.css
+++ b/static/css/txt/baisano.css
@@ -11,6 +11,7 @@ h3 span{color:#000}
 h4.hidden{background:#CCC}
 .mainpage h4.hidden:hover{background:#DCC}
 #main_nav{background:#FFF}
+#main_nav.fix{box-shadow:0 0 3px #000}
 .outerbox{background:#CFC;border:1px outset #FFF}
 .innerbox{border:1px inset #FFF}
 #threadlist{background:#BEB;border:1px inset #FFF}
diff --git a/static/css/txt/bbs.css b/static/css/txt/bbs.css
index 026547a..86661bb 100644
--- a/static/css/txt/bbs.css
+++ b/static/css/txt/bbs.css
@@ -6,7 +6,7 @@ h1,h5{font-size:20px;margin:0}
 h2{font-size:16px;margin:0 0 7px}
 h2 span{margin-right:2px}
 h2 a{font-size:24px;text-decoration:none}
-h3{font-size:20px;margin:8px 0}
+h3{font-size:18px;margin:8px 0}
 h3 span{display:inline-block;font-weight:normal}
 h4{clear:both;font-weight:normal;margin:0}
 h5{margin-bottom:8px}
@@ -19,8 +19,11 @@ input[type=submit]:active,input[type=button]:active,button:active{border-style:i
 code{font-size:14px}
 pre{line-height:125%;margin:0;white-space:pre-wrap}
 .cur_brd,.locked,.sel{font-weight:bold}
-#main_nav{font-size:14px;padding:4px 0;text-align:center;width:100%}
+#main_nav{font-size:14px;padding:4px 0;text-align:center;width:100%;z-index:9}
 #main_nav a,#thread_nav a,#threadlinks a,.threadlinks a,label{display:inline-block}
+#main_nav.fix{position:fixed;top:0}
+#main_nav.mob{padding:2px}
+#main_nav.mob select{font-size:90%}
 .outerbox,.mainpage .thread,#footer,#content{margin:0 2.5% 1em}
 .innerbox{padding:7px;margin:7px}
 .threadnav{float:right;font-family:mona,monapo,ipamonapgothic,monapo,'ms pgothic',yozfontaa97}
@@ -78,7 +81,7 @@ form .msg{margin:0;padding:8px 2px;text-align:left}
  br{line-height:.5em}
  .banner{width:100%!important;height:auto!important;margin-top:1em}
  .outerbox,.mainpage .thread,#footer,#content{margin:1em 0}
- h1,h2 a,h3,h5{font-size:18px}
+ h1,h2 a,h5{font-size:18px}
  h4,h2 span,#rules{font-size:12px}
  .pblock,#footer,.end{font-size:14px}
  #threadlist{overflow-x:auto;white-space:nowrap}
diff --git a/static/css/txt/blue moon.css b/static/css/txt/blue moon.css
index 845c4c3..a463249 100644
--- a/static/css/txt/blue moon.css
+++ b/static/css/txt/blue moon.css
@@ -13,6 +13,7 @@ input[type=text],textarea,select{background:#EEE;border:1px inset #444}
 input[type=submit],input[type=button],button{background:#000;color:#FFF;border:1px outset #444}
 input[type=submit]:active,input[type=button]:active,button:active{color:#DDD}
 #main_nav{background:#FFF;color:#6B7B8D}
+#main_nav.fix{box-shadow:0 0 3px #000}
 #titlebox .innerbox:first-child{margin-bottom:5px}
 .outerbox{background:#49525D;padding:5px}
 .innerbox{margin:0;padding:10px}
diff --git a/static/css/txt/futanari.css b/static/css/txt/futanari.css
index 8d98708..ce40571 100644
--- a/static/css/txt/futanari.css
+++ b/static/css/txt/futanari.css
@@ -12,6 +12,7 @@ input,input[type=submit],input[type=button],input[type="text"],textarea,button,s
 input[type=submit],input[type=button],button{background:#aaf;color:#2c5700}
 input[type="submit"]:active,input[type="button"]:active,button:active{background:#88c}
 #main_nav{background:#1d7548}
+#main_nav.fix{box-shadow:0 0 3px #000}
 #titlebox{margin-bottom:0}
 .outerbox{background:#3b6b94}
 .innerbox{margin:0;padding:10px}
diff --git a/static/css/txt/gamer.css b/static/css/txt/gamer.css
index c3f8743..51dcdf5 100644
--- a/static/css/txt/gamer.css
+++ b/static/css/txt/gamer.css
@@ -10,7 +10,7 @@ hr{display:none}
 #main_nav{background:url('../img/g_b2.gif') bottom repeat-x}
 #main_nav a{color:#FFF;text-decoration:none}#main_nav a:active{color:#E0E0FF}
 #thread_nav{margin:6px 0}
-.cur_brd{background:url('../img/g_b3.gif') bottom repeat-x;margin-bottom:-4px;padding-bottom:4px}
+.cur_brd,#main_nav.mob a{background:url('../img/g_b3.gif') bottom repeat-x;margin-bottom:-4px;padding-bottom:4px}
 #thread_nav a,.lastposts a,#n2{color:#66B}#thread_nav a:active,.lastposts a:active,#n2:active{color:#AFA}
 .links,#threadlinks,.threadlinks{background:url('../img/g_bg3.png') top center;color:#FF0}
 h4 a,.threadnav a,.links a,#footer a{text-decoration:none}
diff --git a/static/css/txt/headline.css b/static/css/txt/headline.css
index c65d64f..f9e50a2 100644
--- a/static/css/txt/headline.css
+++ b/static/css/txt/headline.css
@@ -11,6 +11,7 @@ hr{display:none}
 input,input[type="submit"],input[type="button"],input[type="text"],textarea,button,select{border:1px solid #000}
 input[type="submit"],input[type="button"],button{background:#DDD}
 input[type="submit"]:active,input[type="button"]:active,button:active{background:#CCC;border-style:solid}
+#main_nav.fix{border-bottom:2px solid #BBB}
 .outerbox,#titlebox .innerbox:first-child,.postform,.lastposts,#content{background:#EEE;border-bottom:2px solid #BBB}
 .innerbox{margin:0;padding:10px}
 .thread .innerbox{padding:0}
diff --git a/static/css/txt/material.css b/static/css/txt/material.css
index bf8421c..9af806f 100644
--- a/static/css/txt/material.css
+++ b/static/css/txt/material.css
@@ -72,6 +72,7 @@ h5{font-variant:small-caps;text-align:center}
 #content.list .row div{border-bottom:1px solid #EEE}
 #content.grid .row{border:1px solid #EEE;margin:0}
 @media(max-width:720px){
+  #main_nav.mob select{font-size:12px}
  h1{font-size:18px}
  #threadbox{padding-left:0;padding-right:0}
  #rules,#search{margin-left:0;margin-right:0}
diff --git a/static/css/txt/postal.css b/static/css/txt/postal.css
index 87f03af..ad96c3e 100644
--- a/static/css/txt/postal.css
+++ b/static/css/txt/postal.css
@@ -15,6 +15,7 @@ h3{margin-top:0}
 h3 span{color:dimgrey}
 h4{background:#F0E7CE;color:#686868;padding-left:3px}
 #main_nav,.outerbox{background:#FFF}
+#main_nav.fix{box-shadow:0 0 3px #000}
 .outerbox{border:1px solid #FFF}
 #threadlist{background:#EFEFEF;border:1px inset #EFEFEF}
 #threadlist a{border-right:1px outset #EFEFEF;border-bottom:1px outset #EFEFEF}
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); }