From 1010ac07fdc3991faf31d2771f7c653583f54835 Mon Sep 17 00:00:00 2001 From: Choom Date: Tue, 20 Dec 2022 04:20:49 -0300 Subject: Fix expansion imagen --- cgi/templates/board.html | 359 ++++++++++++++++++++++---------------------- cgi/templates/board.jp.html | 358 +++++++++++++++++++++---------------------- static/css/ib.css | 8 + static/js/autorefresh.js | 2 +- static/js/weabot.js | 119 ++++++--------- 5 files changed, 413 insertions(+), 433 deletions(-) diff --git a/cgi/templates/board.html b/cgi/templates/board.html index 12f39d9..b9593ea 100644 --- a/cgi/templates/board.html +++ b/cgi/templates/board.html @@ -1,39 +1,49 @@ - - [Volver al IB] + +
+ [Volver al IB] +
+
- [Catálogo] - [Bajar] +
+ [Volver al IB] + [Catálogo] + [Bajar] +
Modo Respuesta
-
- - - - - Usar: - x -
Recuperar dibujo guardado -
+
+
+ + + + + Usar: + x +
Recuperar dibujo guardado +
+
-
+
+
- No hay dibujo +
No hay dibujo
-
+
+
@@ -54,82 +64,76 @@ - - - - - + - Asunto - - - - - - - - + Asunto + + + + - Mensaje - + Mensaje + - - - Archivo - - - - - - - - + + + Archivo + + + + + + + + + + + - - - - Clave - (para eliminar el post)
+ Clave + (para eliminar el post) - - - + + + -
+
-
#{postarea_extra}
-
+
#{postarea_extra}
+
+
@@ -139,141 +143,138 @@ - - - - - -
… - - -
Nombre de archivo:#{post['file']}-(#{post['file_size']} B, #{post['image_width']}x#{post['image_height']}) - -
Nombre de archivo:#{post['file']}-(#{post['file_size']} B) - - - GIF animado - - Imagen miniatura - - - [Ocultar hilo] + + + + + + + +
… + +
+ + Nombre de archivo:#{post['file']}-(#{post['file_size']} B, #{post['image_width']}x#{post['image_height']}) + + Nombre de archivo:#{post['file']}-(#{post['file_size']} B) + + + GIF animado + + Imagen miniatura + + + [Ocultar hilo] + +
+ + + #{post['id']} + + #{post['id']} + + #{post['id']} + + - - - - #{post['id']} - - #{post['id']} - - #{post['id']} - - - -
- - - #{post['name']} #{post['tripcode']} +
+ + + #{post['name']} #{post['tripcode'] if post['tripcode'] else ''} - #{post['name']} - - - - #{post['name']} #{post['tripcode']} - - #{post['name']} - - - #{post['timestamp_formatted']} - - No.#{post['id']} - - No.#{post['id']} - - rep - - Expira el ${post['expires_formatted']} - - - [Responder] - - [Ocultar] + #{post['name']} #{post['tripcode'] if post['tripcode'] else ''} - - -
- - -
- - #{post['file']}-(#{post['file_size']} B, #{post['image_width']}x#{post['image_height']}) + #{post['timestamp_formatted']} + + No.#{post['id']} - #{post['file']}-(#{post['file_size']} B) + No.#{post['id']} - - GIF animado - - Imagen miniatura + rep + + Expira el ${post['expires_formatted']} -
-
- - - #{post['id']} - - #{post['id']} - - #{post['id']} + + [Responder] + + [Ocultar hilo] + - - - + +
+ + #{post['file']}-(#{post['file_size']} B, #{post['image_width']}x#{post['image_height']}) + + #{post['file']}-(#{post['file_size']} B) + + + GIF animado + + Imagen miniatura + +
+ + + #{post['id']} + + #{post['id']} + + #{post['id']} + + - -
+ + +
#{post['message']}
-
+
#{post['message']}
- #{post['message']} -
(Post muy largo... Presiona aquí para verlo completo.)
- +
Este hilo es viejo y desaparecerá pronto.
- - +
Un post omitido. Haz clic en Responder para ver.
1: ?>
#{thread['omitted']} posts omitidos. Haz clic en Responder para ver.
+ +
- -
- - +
-
[Volver al IB] +
+ [Volver al IB] [Catálogo] - [Subir]
+ [Subir] +
-
+
-
Eliminar post
- Clave
+ +
+ Eliminar post +
+ Clave +
+
#{pagenav}
- + + \ No newline at end of file diff --git a/cgi/templates/board.jp.html b/cgi/templates/board.jp.html index ea4bfca..6bc5e19 100644 --- a/cgi/templates/board.jp.html +++ b/cgi/templates/board.jp.html @@ -1,39 +1,51 @@ - - [掲示板に戻る] + +
+ [掲示板に戻る] +
+
- [カタログ] - [ボトムへ行く] +
+ [掲示板に戻る] + [カタログ] + [ボトムへ行] +
レス送信モード
-
- - - - - - x -
アップロード途中の画像 -
+
+
+ + + + + Usar: + x + +
+ アップロード途中の画像 +
+
-
+
+
- 画像が見当たりません +
画像が見当たりません
- + -
+
+
@@ -54,82 +66,76 @@ - - - - - + - 題　　名 - - - - - - - - + 題　　名 + + + + - コメント - + コメント + - - - 添付File - - - - - - - - + + + 添付File + + + + + + + + + + + - - - - 削除キー - (削除用)
+ 削除キー + (削除用) - - - + + + -
+
-
#{postarea_extra}
-
+
#{postarea_extra}
+
+
@@ -139,136 +145,134 @@ - - - -
… - - -
画像ファイル名：#{post['file']}-(#{post['file_size']} B, #{post['image_width']}x#{post['image_height']}) - -
画像ファイル名：#{post['file']}-(#{post['file_size']} B) + + + + + + + +
… + +
+ + 画像ファイル名：#{post['file']}-(#{post['file_size']} B, #{post['image_width']}x#{post['image_height']}) + + 画像ファイル名：#{post['file']}-(#{post['file_size']} B) + + + アニメGIF + + サムネ表示 + + + [スレを隠す] + +
+ + + #{post['id']} + + #{post['id']} + + #{post['id']} + + - - アニメGIF - - サムネ表示 - - - [隠す] - - - - - #{post['id']} - - #{post['id']} - - #{post['id']} - - - -
- - - Name #{post['name']} #{post['tripcode']} - - Name #{post['name']} - - - - Name #{post['name']} #{post['tripcode']} +
+ + + Name #{post['name']} #{post['tripcode'] if post['tripcode'] else ''} - Name #{post['name']} - - - #{post['timestamp_formatted']} - - No.#{post['id']} - - No.#{post['id']} - - rep - - ${post['expires_formatted']}頃消えます - - - [返信] - - [隠す] + Name #{post['name']} #{post['tripcode'] if post['tripcode'] else ''} - - -
- - -
- - #{post['file']}-(#{post['file_size']} B, #{post['image_width']}x#{post['image_height']}) + #{post['timestamp_formatted']} + + No.#{post['id']} - #{post['file']}-(#{post['file_size']} B) + No.#{post['id']} - - アニメGIF - - サムネ表示 + rep + + ${post['expires_formatted']}頃消えます -
-
- - - #{post['id']} - - #{post['id']} - - #{post['id']} + + [Responder] + + [スレを隠す] + - - - + +
+ + #{post['file']}-(#{post['file_size']} B, #{post['image_width']}x#{post['image_height']}) + + #{post['file']}-(#{post['file_size']} B) + + + アニメGIF + + サムネ表示 + +
+ + + #{post['id']} + + #{post['id']} + + #{post['id']} + + - -
+ + +
#{post['message']}
-
+
#{post['message']}
- #{post['message']} -
(投稿は長すぎ... 全部読むにはこっちらへ)
- +
このスレは古いので、もうすぐ消えます。
- - - - レス${thread['omitted']}件省略。全て読むには返信ボタンを押してください。 - + + レス${thread['omitted']}件省略。全て読むには返信ボタンを押してください。 + +
- -
- - +
-
[掲示板に戻る] +
+ [掲示板に戻る] [カタログ] - [トップへ戻る]
+ [トップへ戻る] +
-
+
+
- 【記事削除】
+ 【記事削除】 +
削除キー
+
#{pagenav}
- + + \ No newline at end of file diff --git a/static/css/ib.css b/static/css/ib.css index fb0433d..666522a 100644 --- a/static/css/ib.css +++ b/static/css/ib.css @@ -27,6 +27,7 @@ body[data-brd="2d"], body[data-brd="2d"] textarea { .postarea table { margin: 0 auto; text-align: left; + line-height: 1em; } #main_nav { font-size: 14px; @@ -95,6 +96,7 @@ textarea { #rules { width: 468px; font-size: 13px; + line-height: 15px; } #rules ul { margin: 4px 0 0; @@ -126,6 +128,9 @@ textarea { float: left; margin: 0 20px; } +.thumb.expanded { + margin-bottom: 1em; +} .ell { font-family: Mona, IPAMonaPGothic, Monapo, "MS PGothic", YOzFontAA97; vertical-align: top; @@ -392,6 +397,9 @@ textarea { width: auto; height: auto; } + .thumb.expanded { + margin-bottom: 8px; + } blockquote { margin: 8px !important; } diff --git a/static/js/autorefresh.js b/static/js/autorefresh.js index cd4bf39..af61c8b 100644 --- a/static/js/autorefresh.js +++ b/static/js/autorefresh.js @@ -303,7 +303,7 @@ function detectService() { thread_first_length = thread_length; replylist = document.getElementsByClassName("thread"); replylist += document.getElementsByClassName("reply"); - var footer = document.getElementsByClassName("nav")[0]; + var footer = document.getElementsByClassName("nav")[1]; var mnl = document.createElement("a"); mnl.id = "shownew"; mnl.href = "#"; diff --git a/static/js/weabot.js b/static/js/weabot.js index 28e31cb..48ac7cd 100644 --- a/static/js/weabot.js +++ b/static/js/weabot.js @@ -34,12 +34,7 @@ function postClick(num) { function insert(text) { var textarea = document.forms.postform.message; if (textarea) { - if (textarea.createTextRange && textarea.caretPos) { - // IE - var caretPos = textarea.caretPos; - caretPos.text = - caretPos.text.charAt(caretPos.text.length - 1) == " " ? text + " " : text; - } else if (textarea.setSelectionRange) { + if (textarea.setSelectionRange) { // Firefox var start = textarea.selectionStart; var end = textarea.selectionEnd; @@ -76,78 +71,50 @@ function highlight(post) { } function expandimg(e) { - var post_id = e.dataset.id; - var img_url = e.href; - var thumb_url = e.dataset.thumb; - var img_w = parseInt(e.dataset.w); - var img_h = parseInt(e.dataset.h); - var thumb_w = parseInt(e.dataset.tw); - if (thumb_w < 1) return true; - var thumb_h = parseInt(e.dataset.th); - var format = img_url.substring(img_url.lastIndexOf(".") + 1, img_url.length); - var exp_vid = 0; - - if (window.innerWidth > 900) - var ratio = Math.min((window.innerWidth - 130) / img_w, 1); - else var ratio = Math.min((window.innerWidth - 40) / img_w, 1); - - var img_cont = document.getElementById("thumb" + post_id); - var post_block = img_cont.parentElement.parentElement.getElementsByTagName( - "blockquote" - )[0]; - var img; - - for (var i = 0; i < img_cont.childNodes.length; i++) - if (img_cont.childNodes[i].nodeName.toLowerCase() == "img") { - img = img_cont.childNodes[i]; - } else if (img_cont.childNodes[i].nodeName.toLowerCase() == "video") { - img = img_cont.childNodes[i]; - exp_vid = 1; + var imgw = parseInt(e.dataset.w); + var imgh = parseInt(e.dataset.h); + + 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'); + e.dataset.expanded = ''; + + if (aux.className != "thread") { + var bq = aux.nextElementSibling; + bq.removeAttribute('style'); + bq.style.marginLeft = (thumb.width + 32) + 'px'; } - - if (img) { - if (format == "webm" || format == "mp4" && exp_vid == 0) - var new_img = document.createElement("video"); - else var new_img = document.createElement("img"); - - new_img.setAttribute("class", "thumb"); - new_img.setAttribute("alt", "" + post_id); - - if (img.getAttribute("width") == "" + thumb_w && - img.getAttribute("height") == "" + thumb_h) { - // thumbnail -> fullsize - if (format == "webm" || format == "mp4") { - new_img.setAttribute("controls", ""); - new_img.setAttribute("loop", ""); - new_img.setAttribute("autoplay", ""); - } - new_img.setAttribute("src", "" + img_url); - new_img.setAttribute("width", img_w); - new_img.setAttribute("height", img_h); - new_img.setAttribute("style", "max-width:" + - Math.floor(img_w * ratio) + "px;max-height:" + - Math.floor(img_h * ratio) + "px;"); - post_block.setAttribute("style", ""); - img_cont.style.display = "table"; - } else { - // fullsize -> thumbnail - if (format == "webm" || format == "mp4") { - new_img.removeAttribute("controls"); - new_img.removeAttribute("loop"); - new_img.removeAttribute("autoplay"); - } - new_img.setAttribute("src", "" + thumb_url); - new_img.setAttribute("width", thumb_w); - new_img.setAttribute("height", thumb_h); - post_block.setAttribute("style", "margin-left:" + - (parseInt(thumb_w) + 40) + "px;max-width:" + - (1000 - parseInt(thumb_w)) + "px"); - img_cont.removeAttribute("style"); + } else { + var imgurl = e.href; + var format = imgurl.split('.').pop(); + var maxw = document.body.clientWidth - thumb.getBoundingClientRect().left - 40; + + if (imgw > maxw) { + var ratio = maxw / imgw; + imgw = maxw; + imgh = imgh * ratio; } - while (img_cont.lastChild) img_cont.removeChild(img_cont.lastChild); - - img_cont.appendChild(new_img); + var exp = document.createElement('img'); + exp.className = 'thumb expanded'; + exp.alt = pid; + exp.src = imgurl; + exp.style.maxWidth = imgw + 'px'; + exp.style.maxHeight = imgh + 'px'; + cont.appendChild(exp); + thumb.style.display = 'none'; + e.dataset.expanded = 'true'; + + if (aux.className != "thread") { + var bq = aux.nextElementSibling; + bq.style.marginLeft = ''; + bq.style.display = 'table'; + } } } @@ -397,4 +364,4 @@ document.addEventListener("dblclick", function(e) { togglePost(e.target.closest(".info")); return; } -}, false); \ No newline at end of file +}, false); -- cgit v1.2.1-18-gbd029