Set the catalog thumbnail via background image, save one element.

Also tiny fixes here and there.

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

html/General/Thread-catalog-view.html

@@ -1,5 +1,4 @@
-<a href="/#{thread.board}/res/#{thread.ID}" target="_blank">
-  <img src="#{src}" class="thumb #{imgClass or ''}" #{if imgWidth then "width='#{imgWidth}'"} #{if imgHeight then "height='#{imgHeight}'"}>
+<a href="/#{thread.board}/res/#{thread.ID}" target="_blank" class="thumb">
   <div class="thread-icons"></div>
 </a>
 <div class="thread-stats" title="Post count / File count / Page count">

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...]
 

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
 

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',

src/Menu/Menu.coffee

@@ -13,7 +13,7 @@ Menu =
       name: 'Menu'
       cb:   @node
     CatalogThread.callbacks.push
-      name: 'Image Hover'
+      name: 'Menu'
       cb:   @catalogNode
 
   node: ->