Mejor expansion de imagenes

4 files changed, 53 insertions, 45 deletions

diff --git a/cgi/templates/board.html b/cgi/templates/board.html
index b338cfe..486c380 100644
--- a/cgi/templates/board.html
+++ b/cgi/templates/board.html
@@ -217,17 +217,19 @@
                 <small>Imagen miniatura</small>
               <?py #endif ?>
             </div><?py #div .fs ?>
-            <a target="_blank" href="#{images_url}#{board}/src/#{post['file']}" id="thumb#{post['id']}">
-              <?py if post['thumb'].startswith('mime'): ?>
-                <img class="thumb" alt="#{post['id']}" src="/static/#{post['thumb']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
-              <?py elif post['file'][-3:] == 'gif': ?>
-                <img class="thumb" alt="#{post['id']}" src="#{images_url}#{board}/src/#{post['file']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
-              <?py else: ?>
-                <img class="thumb" alt="#{post['id']}" src="#{images_url}#{board}/thumb/#{post['thumb']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
-              <?py #endif ?>
-            </a>
           <?py #endif ?>
         </div><?py #div .info ?>
+        <?py if post['parentid'] and post['file']: ?>
+          <a target="_blank" href="#{images_url}#{board}/src/#{post['file']}" id="thumb#{post['id']}">
+            <?py if post['thumb'].startswith('mime'): ?>
+              <img class="thumb" alt="#{post['id']}" src="/static/#{post['thumb']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
+            <?py elif post['file'][-3:] == 'gif': ?>
+              <img class="thumb" alt="#{post['id']}" src="#{images_url}#{board}/src/#{post['file']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
+            <?py else: ?>
+              <img class="thumb" alt="#{post['id']}" src="#{images_url}#{board}/thumb/#{post['thumb']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
+            <?py #endif ?>
+          </a>
+        <?py #endif ?>
         <?py if post['thumb_width'] and post['parentid']: ?>
           <blockquote style="margin-left:#{post['thumb_width']+40}px;">#{post['message']}</blockquote>
         <?py else: ?>
diff --git a/cgi/templates/board.jp.html b/cgi/templates/board.jp.html
index 6bc5e19..ffb9d67 100644
--- a/cgi/templates/board.jp.html
+++ b/cgi/templates/board.jp.html
@@ -219,17 +219,19 @@
                 <small>サムネ表示</small>
               <?py #endif ?>
             </div><?py #div .fs ?>
-            <a target="_blank" href="#{images_url}#{board}/src/#{post['file']}" id="thumb#{post['id']}">
-              <?py if post['thumb'].startswith('mime'): ?>
-                <img class="thumb" alt="#{post['id']}" src="/static/#{post['thumb']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
-              <?py elif post['file'][-3:] == 'gif': ?>
-                <img class="thumb" alt="#{post['id']}" src="#{images_url}#{board}/src/#{post['file']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
-              <?py else: ?>
-                <img class="thumb" alt="#{post['id']}" src="#{images_url}#{board}/thumb/#{post['thumb']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
-              <?py #endif ?>
-            </a>
-        <?py #endif ?>
+          <?py #endif ?>
         </div><?py #div .info ?>
+        <?py if post['parentid'] and post['file']: ?>
+          <a target="_blank" href="#{images_url}#{board}/src/#{post['file']}" id="thumb#{post['id']}">
+            <?py if post['thumb'].startswith('mime'): ?>
+              <img class="thumb" alt="#{post['id']}" src="/static/#{post['thumb']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
+            <?py elif post['file'][-3:] == 'gif': ?>
+              <img class="thumb" alt="#{post['id']}" src="#{images_url}#{board}/src/#{post['file']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
+            <?py else: ?>
+              <img class="thumb" alt="#{post['id']}" src="#{images_url}#{board}/thumb/#{post['thumb']}" width="#{post['thumb_width']}" height="#{post['thumb_height']}" />
+            <?py #endif ?>
+          </a>
+        <?py #endif ?>
         <?py if post['thumb_width'] and post['parentid']: ?>
           <blockquote style="margin-left:#{post['thumb_width']+40}px;">#{post['message']}</blockquote>
         <?py else: ?>
@@ -275,4 +277,4 @@
   <div class="pg">#{pagenav}</div>
 <?py #endif ?>
 
-<?py include('templates/base_bottom.html') ?>
\ No newline at end of file
+<?py include('templates/base_bottom.html') ?>
diff --git a/static/css/ib.css b/static/css/ib.css
index a075366..17b078a 100644
--- a/static/css/ib.css
+++ b/static/css/ib.css
@@ -106,7 +106,6 @@ textarea {
   margin-left: 1em;
 }
 .thread {
-  margin-right: 170px;
   line-height: 18px;
 }
 .thread table {
@@ -128,9 +127,6 @@ textarea {
   float: left;
   margin: 0 20px;
 }
-.thumb.expanded {
-  margin-bottom: 1em;
-}
 .ell {
   font-family: Mona, IPAMonaPGothic, Monapo, "MS PGothic", YOzFontAA97;
   vertical-align: top;
@@ -324,11 +320,7 @@ textarea {
 .selector {
   font-size: 10pt;
 }
-@media (max-width: 900px) {
-  .thread {
-    margin-right: 0;
-  }
-}
+
 @media (max-width: 600px) {
   body {
     font-size: 14px;
@@ -395,15 +387,13 @@ textarea {
     margin-left: 4px;
   }
   .thumb {
-    margin: 0 8px 0 2px;
+    margin: 0 8px;
     max-width: 100px;
     max-height: 100px;
+    object-fit: scale-down;
     width: auto;
     height: auto;
   }
-  .thumb.expanded {
-    margin-bottom: 8px;
-  }
   blockquote {
     margin: 8px !important;
   }
diff --git a/static/js/weabot.js b/static/js/weabot.js
index 48ac7cd..04ac483 100644
--- a/static/js/weabot.js
+++ b/static/js/weabot.js
@@ -35,7 +35,6 @@ function insert(text) {
   var textarea = document.forms.postform.message;
   if (textarea) {
     if (textarea.setSelectionRange) {
-      // Firefox
       var start = textarea.selectionStart;
       var end = textarea.selectionEnd;
       textarea.value =
@@ -77,22 +76,28 @@ function expandimg(e) {
   var pid = e.dataset.id;
   var cont = document.getElementById('thumb'+pid);
   var thumb = cont.firstElementChild;
-  var aux = e.parentNode.parentNode;
 
   if (e.dataset.expanded == 'true') {
     cont.removeChild(cont.lastElementChild);
     thumb.removeAttribute('style');
+    cont.removeAttribute('style');
     e.dataset.expanded = '';
 
-    if (aux.className != "thread") {
-      var bq = aux.nextElementSibling;
-      bq.removeAttribute('style');
-      bq.style.marginLeft = (thumb.width + 32) + 'px';
+    if (e.parentNode.parentNode.className != "thread") {
+      var bq = cont.nextElementSibling;
+      bq.style.marginLeft = (thumb.width + 40) + 'px';
     }
   } else {
     var imgurl = e.href;
     var format = imgurl.split('.').pop();
-    var maxw = document.body.clientWidth - thumb.getBoundingClientRect().left - 40;
+
+    var clientw = document.body.clientWidth;
+    if (clientw > 600) {
+      var marginr = 40;
+    } else {
+      var marginr = 15;
+    }
+    var maxw = clientw - thumb.getBoundingClientRect().left - marginr;
 
     if (imgw > maxw) {
       var ratio = maxw / imgw;
@@ -100,20 +105,29 @@ function expandimg(e) {
       imgh = imgh * ratio;
     }
 
-    var exp = document.createElement('img');
-    exp.className = 'thumb expanded';
+    if (format.toLowerCase() == 'webm' || format.toLowerCase() == 'mp4') {
+      var exp = document.createElement('video');
+      exp.autoplay = true;
+      exp.loop = true;
+      exp.controls = true;
+      exp.poster = thumb.src;
+    } else {
+      var exp = document.createElement('img');
+    }
+
+    exp.className = 'thumb';
     exp.alt = pid;
     exp.src = imgurl;
     exp.style.maxWidth = imgw + 'px';
     exp.style.maxHeight = imgh + 'px';
     cont.appendChild(exp);
+    cont.style.display = 'table';
     thumb.style.display = 'none';
     e.dataset.expanded = 'true';
 
-    if (aux.className != "thread") {
-      var bq = aux.nextElementSibling;
+    if (e.parentNode.parentNode.className != "thread") {
+      var bq = cont.nextElementSibling;
       bq.style.marginLeft = '';
-      bq.style.display = 'table';
     }
   }
 }