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: ->