Merge branch 'bstable'

CHANGELOG.md

@@ -13,6 +13,9 @@ Sometimes the changelog has notes (not comprehensive) acknowledging people's wor
 
 ### v1.11.10
 
+**v1.11.10.7** *(2015-09-30)* - [[Firefox](https://raw.githubusercontent.com/ccd0/4chan-x/1.11.10.7/builds/4chan-X-noupdate.user.js "Firefox version")] [[Chromium](https://raw.githubusercontent.com/ccd0/4chan-x/1.11.10.7/builds/4chan-X-noupdate.crx "Chromium version")]
+- Show party hats in 4chan X catalog view.
+
 **v1.11.10.6** *(2015-09-24)* - [[Firefox](https://raw.githubusercontent.com/ccd0/4chan-x/1.11.10.6/builds/4chan-X-noupdate.user.js "Firefox version")] [[Chromium](https://raw.githubusercontent.com/ccd0/4chan-x/1.11.10.6/builds/4chan-X-noupdate.crx "Chromium version")]
 - Update 4chan banner list.
 - Update for Recaptcha changes.

src/General/Index.coffee

@@ -88,9 +88,12 @@ Index =
     $.asap (-> $('.board > .thread > .postContainer', doc) or d.readyState isnt 'loading'), ->
       return unless Main.isThisPageLegit()
       Index.hat = $ '.board > .thread > img:first-child'
-      if Index.hat and Index.nodes
-        for threadRoot in Index.nodes
-          $.prepend threadRoot, Index.hat.cloneNode false
+      if Index.hat
+        if Index.nodes
+          for threadRoot in Index.nodes
+            $.prepend threadRoot, Index.hat.cloneNode false
+        $.addClass doc, 'hats-enabled'
+        $.addStyle ".catalog-thread::after {background-image: url(#{Index.hat.src});}"
 
       board = $ '.board'
       $.replace board, Index.root

src/General/css/style.css

@@ -669,6 +669,7 @@ div[data-checked="false"] > .suboption-list {
   margin: 0 2px 5px;
   word-wrap: break-word;
   vertical-align: top;
+  position: relative;
 }
 .catalog-thread > a {
   flex-shrink: 0;
@@ -750,6 +751,24 @@ div[data-checked="false"] > .suboption-list {
   display: inline-block;
   max-width: 100%;
 }
+:root.hats-enabled .catalog-thread::after {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  background-size: contain;
+}
+:root.hats-enabled .catalog-small .catalog-thread::after {
+  left: -10px;
+  top: -65px;
+  width: 100px;
+  height: 100px;
+}
+:root.hats-enabled .catalog-large .catalog-thread::after {
+  left: -15px;
+  top: -105px;
+  width: 160px;
+  height: 160px;
+}
 
 /* Announcement Hiding */
 :root.hide-announcement #globalMessage {