This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

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.
  • Loading branch information...
chromakode committed Nov 16, 2012
1 parent df69525 commit 45e8209d8d4236367a6f7247068c13ab2307afb4
@@ -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; }
@@ -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 {
@@ -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;
+}
@@ -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; }
@@ -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()
@@ -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
@@ -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

0 comments on commit 45e8209

Please sign in to comment.