Fix catalog views

LICENSE

@@ -1,5 +1,5 @@
 /*
-* appchan x - Version 2.9.44 - 2015-01-11
+* appchan x - Version 2.9.44 - 2015-01-12
 *
 * Licensed under the MIT license.
 * https://github.com/zixaphir/appchan-x/blob/master/LICENSE

src/General/Build.coffee

@@ -282,13 +282,12 @@ Build =
 
     if (OP = board.posts[data.no]) and root = OP.nodes.root.parentNode
       $.rmAll root
-      $.add root, OP.nodes.root
     else
       root = $.el 'div',
         className: 'thread'
         id: "t#{data.no}"
-      $.add root, Build[if full then 'fullThread' else 'excerptThread'] board, data, OP
 
+    $.add root, Build[if full then 'fullThread' else 'excerptThread'] board, data, OP
     root
 
   excerptThread: (board, data, OP) ->
@@ -307,65 +306,87 @@ Build =
     {staticPath, gifIcon} = Build
     data = Index.liveThreadData[thread.ID]
 
-    postCount = data.replies + 1
-    fileCount = data.images  + !!data.ext
-    pageCount = Index.liveThreadData.keys.indexOf("#{thread.ID}") // Index.threadsNumPerPage + 1
-
-    subject = if thread.OP.info.subject
-      <%= html("<div class='subject'>${thread.OP.nodes.subject.innerHTML}</div>") %>
-    else
-      ''
-    comment = thread.OP.nodes.comment.innerHTML.replace /(<br>\s*){2,}/g, '<br>'
-
-    root = $.el 'div',
-      className: 'catalog-thread',
-      
-    $.extend root, <%= importHTML('Features/Thread-catalog-view') %>
-
-    root.dataset.fullID = thread.fullID
-    $.addClass root, 'pinned' if thread.isPinned
-    $.addClass root, thread.OP.highlights... if thread.OP.highlights.length
-
-    thumb = root.firstElementChild
     if data.spoiler and !Conf['Reveal Spoiler Thumbnails']
       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'
+      imgClass = 'spoiler-file'
     else if data.filedeleted
       src = "#{staticPath}filedeleted-res#{gifIcon}"
-      $.addClass thumb, 'deleted-file'
+      imgClass = 'deleted-file'
     else if thread.OP.file
       src = thread.OP.file.thumbURL
-      thumb.dataset.width  = data.tn_w
-      thumb.dataset.height = data.tn_h
     else
       src = "#{staticPath}nofile.png"
-      $.addClass thumb, 'no-file'
+      imgClass = 'no-file'
-    thumb.style.backgroundImage = "url(#{src})"
+
-    if Conf['Open threads in a new tab']
+    thumb = if imgClass
-      thumb.target = '_blank'
+      <%= html('<img src="${src}" class="catalog-thumb ${imgClass}">') %>
+    else
+      <%= html('<img src="${src}" class="catalog-thumb" data-width="${data.tn_w}" data-height="${data.tn_h}">') %>
+
+    postCount = data.replies + 1
+    fileCount = data.images  + !!data.ext
+    pageCount = Index.liveThreadData.keys.indexOf("#{thread.ID}") // Index.threadsNumPerPage + 1
+
+    subject = if thread.OP.info.subject
+      <%= html('<div class="subject">${thread.OP.info.subject}</div>') %>
+    else
+      <%= html('') %>
+
+    comment = innerHTML: data.com or ''
+
+    root = $.el 'div',
+      className: 'catalog-thread'
+
+    $.extend root, <%= html(
+      '<a href="${Build.path(thread.board.ID, thread.ID)}" class="thumb">' +
+        '&{thumb}' +
+      '</a>' +
+      '<div class="catalog-stats" title="Post count / File count / Page count">' +
+        '<span class="post-count">${postCount}</span> / <span class="file-count">${fileCount}</span> / <span class="page-count">${pageCount}</span>' +
+        '<span class="catalog-icons"></span>' +
+      '</div>' +
+      '&{subject}' +
+      '<div class="comment">&{comment}</div>'
+    ) %>
+
+    root.dataset.fullID = thread.fullID
+    $.addClass root, 'pinned' if thread.isPinned
+    $.addClass root, thread.OP.highlights... if thread.OP.highlights
+
+    for quote in $$ '.quotelink', root.lastElementChild
+      href = quote.getAttribute 'href'
+      quote.href = Build.path thread.board, thread.ID + href if href[0] is '#'
+
+    for exif in $$ '.abbr, .exif', root.lastElementChild
+      $.rm exif
 
-    for quotelink in $$ '.quotelink', root.lastElementChild
-      $.replace quotelink, [quotelink.childNodes...]
     for pp in $$ '.prettyprint', root.lastElementChild
-      $.replace pp, $.tn pp.textContent
+      cc = $.el 'span', className: 'catalog-code'
+      $.add cc, [pp.childNodes...]
+      $.replace pp, cc
+
+    for br in $$ 'br', root.lastElementChild when br.previousSibling?.nodeName is 'BR'
+      $.rm br
 
     if thread.isSticky
-      $.add $('.thread-icons', root), $.el 'img',
+      $.add $('.catalog-icons', root), $.el 'img',
         src: "#{staticPath}sticky#{gifIcon}"
         className: 'stickyIcon'
         title: 'Sticky'
+
     if thread.isClosed
-      $.add $('.thread-icons', root), $.el 'img',
+      $.add $('.catalog-icons', root), $.el 'img',
         src: "#{staticPath}closed#{gifIcon}"
         className: 'closedIcon'
         title: 'Closed'
 
     if data.bumplimit
       $.addClass $('.post-count', root), 'warning'
+
     if data.imagelimit
       $.addClass $('.file-count', root), 'warning'
 

src/General/css/layout.css

@@ -137,37 +137,35 @@ body > hr {
   width: 270px;
   max-height: 410px;
 }
-.thumb {
+.catalog-thread .thumb {
   flex-shrink: 0;
+  -webkit-flex-shrink: 0;
   position: relative;
-  background-size: 100% 100%;
+}
-  background-repeat: no-repeat;
+.catalog-thumb,
-  background-position: center;
+.catalog-thread .thumb {
+  max-width: 100%;
+  max-height: 100%;
+}
+.catalog-thumb {
   border-radius: 2px;
   box-shadow: 0 0 5px rgba(0, 0, 0, .25);
 }
-.thumb:not(.deleted-file):not(.no-file) {
+.catalog-thumb.spoiler-file {
-  min-width: 30px;
-  min-height: 30px;
-}
-.thumb.spoiler-file {
-  background-size: 100px;
   width: 100px;
   height: 100px;
 }
-.thumb.deleted-file {
+.catalog-thumb.deleted-file {
-  background-size: 127px 13px;
   width: 127px;
   height: 13px;
   padding: 20px 11px;
 }
-.thumb.no-file {
+.catalog-thumb.no-file {
-  background-size: 77px 13px;
   width: 77px;
   height: 13px;
   padding: 20px 36px;
 }
-.thread-icons > img {
+.catalog-icons > img {
   width: 1em;
   height: 1em;
   margin: 0;
@@ -192,7 +190,7 @@ body > hr {
   line-height: normal;
 <% } %>
 }
-.thread-stats {
+.catalog-stats {
   flex-shrink: 0;
   cursor: help !important;
   font-size: 10px;