Mejor expansion de imagenes

2 files changed, 29 insertions, 25 deletions

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';
     }
   }
 }