From d6030f7df005d27a1c5c789d8c8426ed15434e4f Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 3 Feb 2014 13:51:25 +0100 Subject: [PATCH] Set the catalog thumbnail via background image, save one element. Also tiny fixes here and there. --- css/style.css | 23 +++++++-------- html/General/Thread-catalog-view.html | 3 +- src/General/Build.coffee | 40 ++++++++++++++------------- src/Images/AutoGIF.coffee | 9 ++++-- src/Images/ImageHover.coffee | 2 +- src/Menu/Menu.coffee | 2 +- 6 files changed, 42 insertions(+), 37 deletions(-) diff --git a/css/style.css b/css/style.css index f3b253287..3b39ee622 100644 --- a/css/style.css +++ b/css/style.css @@ -415,26 +415,28 @@ a[href="javascript:;"] { max-height: 320px; word-break: break-word; } -.catalog-thread > a { +.thumb { flex-shrink: 0; position: relative; -} -.thumb { - max-width: 150px; - max-height: 150px; + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; border-radius: 2px; box-shadow: 0 0 5px rgba(0, 0, 0, .25); } -.thunb.spoiler-file { +.thumb.spoiler-file { + background-size: 100px; width: 100px; height: 100px; } .thumb.deleted-file { + background-size: 127px 13px; width: 127px; height: 13px; padding: 20px 11px; } .thumb.no-file { + background-size: 77px 13px; width: 77px; height: 13px; padding: 20px 36px; @@ -444,7 +446,7 @@ a[href="javascript:;"] { top: 1px; right: 1px; } -.catalog-thread > a:not(:hover) .menu-button { +.thumb:not(:hover) .menu-button > i { display: none; } .thread-icons > .menu-button > i { @@ -455,10 +457,9 @@ a[href="javascript:;"] { cursor: help; font-size: 10px; font-weight: 700; - line-height: .8; - margin-top: 1px; + margin-top: 2px; } -.catalog-thread .subject { +.catalog-thread > .subject { flex-shrink: 0; font-weight: 700; line-height: 1; @@ -466,7 +467,7 @@ a[href="javascript:;"] { } .catalog-thread > .comment { flex-shrink: 1; - max-width: 100%; + align-self: stretch; overflow: hidden; text-align: center; } diff --git a/html/General/Thread-catalog-view.html b/html/General/Thread-catalog-view.html index cf87775c9..f1d1d0cd9 100644 --- a/html/General/Thread-catalog-view.html +++ b/html/General/Thread-catalog-view.html @@ -1,5 +1,4 @@ - - +
diff --git a/src/General/Build.coffee b/src/General/Build.coffee index f342857af..3a7a1430e 100644 --- a/src/General/Build.coffee +++ b/src/General/Build.coffee @@ -263,25 +263,6 @@ Build = {staticPath, gifIcon} = Build data = Index.liveThreadData[Index.liveThreadIDs.indexOf thread.ID] - if data.spoiler and !Conf['Reveal Spoilers'] - src = "#{staticPath}spoiler" - if spoilerRange = Build.spoilerRange[thread.board] - # Randomize the spoiler image. - src += "-#{thread.board}" + Math.floor 1 + spoilerRange * Math.random() - src += '.png' - imgClass = 'spoiler-file' - else if data.filedeleted - src = "#{staticPath}filedeleted-res#{gifIcon}" - imgClass = 'deleted-file' - else if thread.OP.file - src = thread.OP.file.thumbURL - max = Math.max data.tn_w, data.tn_h - imgWidth = data.tn_w * 150 / max - imgHeight = data.tn_h * 150 / max - else - src = "#{staticPath}nofile.png" - imgClass = 'no-file' - postCount = data.replies + 1 fileCount = data.images + !!data.ext pageCount = Index.liveThreadIDs.indexOf(thread.ID) // Index.threadsNumPerPage @@ -300,6 +281,27 @@ Build = $.addClass root, 'pinned' if thread.isPinned $.addClass root, thread.OP.highlights... if thread.OP.highlights + thumb = root.firstElementChild + if data.spoiler and !Conf['Reveal Spoilers'] + src = "#{staticPath}spoiler" + if spoilerRange = Build.spoilerRange[thread.board] + # Randomize the spoiler image. + src += "-#{thread.board}" + Math.floor 1 + spoilerRange * Math.random() + src += '.png' + $.addClass thumb, 'spoiler-file' + else if data.filedeleted + src = "#{staticPath}filedeleted-res#{gifIcon}" + $.addClass thumb, 'deleted-file' + else if thread.OP.file + src = thread.OP.file.thumbURL + max = Math.max data.tn_w, data.tn_h + thumb.style.width = data.tn_w * 150 / max + 'px' + thumb.style.height = data.tn_h * 150 / max + 'px' + else + src = "#{staticPath}nofile.png" + $.addClass thumb, 'no-file' + thumb.style.backgroundImage = "url(#{src})" + for quotelink in $$ '.quotelink', root.lastElementChild $.replace quotelink, [quotelink.childNodes...] diff --git a/src/Images/AutoGIF.coffee b/src/Images/AutoGIF.coffee index a80481407..572e977de 100644 --- a/src/Images/AutoGIF.coffee +++ b/src/Images/AutoGIF.coffee @@ -22,11 +22,14 @@ AutoGIF = return unless OP.file?.isImage {URL} = OP.file return unless /gif$/.test URL - AutoGIF.replaceThumbnail @nodes.thumb, URL - replaceThumbnail: (thumb, URL) -> + AutoGIF.replaceThumbnail @nodes.thumb, URL, true + replaceThumbnail: (thumb, URL, isCatalog) -> gif = $.el 'img' $.on gif, 'load', -> # Replace the thumbnail once the GIF has finished loading. - thumb.src = URL + if isCatalog + thumb.style.backgroundImage = "url(#{URL})" + else + thumb.src = URL gif.src = URL diff --git a/src/Images/ImageHover.coffee b/src/Images/ImageHover.coffee index f205c941c..37f26522c 100644 --- a/src/Images/ImageHover.coffee +++ b/src/Images/ImageHover.coffee @@ -16,7 +16,7 @@ ImageHover = $.on @nodes.thumb, 'mouseover', ImageHover.mouseover mouseover: (e) -> post = if $.hasClass @, 'thumb' - g.posts[@parentNode.parentNode.dataset.fullID] + g.posts[@parentNode.dataset.fullID] else Get.postFromNode @ el = $.el 'img', diff --git a/src/Menu/Menu.coffee b/src/Menu/Menu.coffee index c5ba70c31..df428a1b2 100644 --- a/src/Menu/Menu.coffee +++ b/src/Menu/Menu.coffee @@ -13,7 +13,7 @@ Menu = name: 'Menu' cb: @node CatalogThread.callbacks.push - name: 'Image Hover' + name: 'Menu' cb: @catalogNode node: ->