Move comment gilding icon to :before.

This allows .gilded-comment-icon to take up its full size (not relying
on a width:0 hack) and avoids the need for an extra element containing
the gilding count.

r2/r2/public/static/css/compact.css

@@ -284,13 +284,13 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
 .comment.collapsed .tagline { margin-left: 20px; font-style: italcs; color: #AAA; }
 
 /** comment gilding */
-.gilded-comment-icon { position: relative; display: inline-block; background-image: url(../gold-coin.png); /* SPRITE */ background-repeat: no-repeat; height: 14px; width: 0; padding-left: 13px; margin: 0 0 -14px 6px; top: -8px; vertical-align: middle; }
+.gilded-comment-icon { position: relative; display: inline-block; margin: 0 0 -15px 8px; top: -8px; color: #99895F; font-size: .9em; vertical-align: middle; }
 
-.user-gilded > .entry .gilded-comment-icon { padding-left: 23px; }
+.gilded-comment-icon:before { display: inline-block; content: ''; background-image: url(../gold-coin.png); /* SPRITE */ background-repeat: no-repeat; height: 14px; width: 13px; margin-right: 2px; vertical-align: -3px; }
 
-body.post-under-1h-old .gilded-comment-icon, body.post-under-6h-old .gilded-comment-icon { opacity: .55; }
+.user-gilded > .entry .gilded-comment-icon:before { width: 23px; }
 
-.gilded-comment-count { color: #99895F; padding-left: 2px; font-size: .9em; vertical-align: middle; }
+body.post-under-1h-old .gilded-comment-icon, body.post-under-6h-old .gilded-comment-icon { opacity: .55; }
 
 /** messages and inbox */
 .message { background: white; position: relative; border: 1px solid #d9d9d9; margin: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; padding: 5px; }

r2/r2/public/static/css/compact.scss

@@ -879,31 +879,33 @@ padding: 5px;
 .gilded-comment-icon {
     position: relative;
     display: inline-block;
+    margin: 0 0 -15px 8px;
+    top: -8px;
+    color: #99895F;
+    font-size: .9em;
+    vertical-align: middle;
+}
+
+.gilded-comment-icon:before {
+    display: inline-block;
+    content: '';
     background-image: url(../gold-coin.png);  /* SPRITE */
     background-repeat: no-repeat;
     height: 14px;
-    width: 0;
-    padding-left: 13px;
-    margin: 0 0 -14px 6px;
-    top: -8px;
-    vertical-align: middle;
+    width: 13px;
+    margin-right: 2px;
+    vertical-align: -3px;
 }
 
-.user-gilded > .entry .gilded-comment-icon {
-    padding-left: 23px;
+.user-gilded > .entry .gilded-comment-icon:before {
+    width: 23px;
 }
 
 body.post-under-1h-old .gilded-comment-icon,
 body.post-under-6h-old .gilded-comment-icon {
     opacity: .55;
 }
 
-.gilded-comment-count {
-    color: #99895F;
-    padding-left: 2px;
-    font-size: .9em;
-    vertical-align: middle;
-}
 
 /** messages and inbox */
 .message {

r2/r2/public/static/css/reddit-ie7-hax.css

@@ -37,3 +37,13 @@
 #header-bottom-right {
 	clear: both;
 }
+
+.gilded-comment-icon {
+    background: url(gold-coin.png) no-repeat;
+    padding-left: 15px;
+    height: 14px;
+}
+
+.user-gilded > .entry .gilded-comment-icon {
+    padding-left: 25px;
+}

r2/r2/public/static/css/reddit.css

@@ -6275,35 +6275,36 @@ table.diff {font-size: small;}
 .diff_chg {background-color:yellow}
 .diff_sub {background-color:lightcoral}
 
-span.gilded-comment-icon {
+.gilded-comment-icon {
     position: relative;
     display: inline-block;
-    background-image: url(../gold-coin.png);  /* SPRITE */
-    background-repeat: no-repeat;
-    height: 14px;
-    width: 0;
-    padding-left: 13px;
     margin: 0 0 -14px 8px;
     top: -8px;
+    color: #99895F;
+    font-size: .9em;
     vertical-align: middle;
 }
 
-.user-gilded > .entry span.gilded-comment-icon {
-    padding-left: 23px;
+.gilded-comment-icon:before {
+    display: inline-block;
+    content: '';
+    background-image: url(../gold-coin.png);  /* SPRITE */
+    background-repeat: no-repeat;
+    height: 14px;
+    width: 13px;
+    margin-right: 2px;
+    vertical-align: -3px;
+}
+
+.user-gilded > .entry .gilded-comment-icon:before {
+    width: 23px;
 }
 
 body.post-under-1h-old .gilded-comment-icon,
 body.post-under-6h-old .gilded-comment-icon {
     opacity: .55;
 }
 
-.gilded-comment-count {
-    color: #99895F;
-    padding-left: 2px;
-    font-size: .9em;
-    vertical-align: middle;
-}
-
 .buttons li.comment-save-button { display: none; }
 .buttons li.comment-unsave-button { display: inline; }
 

r2/r2/public/static/js/gold.js

@@ -88,10 +88,7 @@ r.gold = {
             .attr('title', new_title)
             .data('count', gilding_count)
         if (gilding_count > 1) {
-            icon.empty()
-            $('<span class="gilded-comment-count">')
-                .text('x' + gilding_count)
-                .appendTo(icon)
+            icon.text('x' + gilding_count)
         }
 
         comment.children('.entry').find('.give-gold').parent().remove()

r2/r2/templates/comment.compact

@@ -67,9 +67,7 @@
      % if thing.gilded_message:
        <span class="gilded-comment-icon" title="${thing.gilded_message}" data-count="${thing.gildings}">
          % if thing.gildings > 1:
-           <span class="gilded-comment-count">
-             x${thing.gildings}
-           </span>
+           x${thing.gildings}
          % endif
        </span>
      % endif

r2/r2/templates/comment.html

@@ -115,9 +115,7 @@
   % if thing.gilded_message:
   <span class="gilded-comment-icon" title="${thing.gilded_message}" data-count="${thing.gildings}">
     % if thing.gildings > 1:
-      <span class="gilded-comment-count">
-        x${thing.gildings}
-      </span>
+      x${thing.gildings}
     % endif
   </span>
   % endif