diff options
-rw-r--r-- | cgi/templates/board.html | 20 | ||||
-rw-r--r-- | cgi/templates/board.jp.html | 24 | ||||
-rw-r--r-- | static/css/ib.css | 16 | ||||
-rw-r--r-- | static/js/weabot.js | 38 |
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'; } } } |