diff --git a/r2/r2/lib/contrib/nymph.py b/r2/r2/lib/contrib/nymph.py
index 4681ba415..f23781492 100644
--- a/r2/r2/lib/contrib/nymph.py
+++ b/r2/r2/lib/contrib/nymph.py
@@ -28,13 +28,14 @@ def optimize_png(fname, optimizer = "/usr/bin/env optipng"):
class Spriter(object):
- spritable = re.compile(r"background-image: *url\((.*)\) *.*/\* *SPRITE *\*/")
+ spritable = re.compile(r"background-image: *url\((.*)\) *.*/\* *SPRITE (stretch-x)? *\*/")
- def __init__(self, padding = (4, 4),
+ def __init__(self, padding = (0, 4),
css_path = '/static/', actual_path = "r2/public/static/"):
self.images = []
self.im_lookup = {}
self.ypos = [0]
+ self.stretch = []
self.padding = padding
self.css_path = css_path
@@ -43,12 +44,14 @@ class Spriter(object):
def _make_sprite(self, match):
path = match.group(1).strip('"')
path = re.sub("^" + self.css_path, self.actual_path, path)
+ stretch_x = match.group(2) == "stretch-x"
if os.path.exists(path):
if path in self.im_lookup:
i = self.im_lookup[path]
else:
im = Image.open(path)
self.images.append(im)
+ self.stretch.append(stretch_x)
self.im_lookup[path] = len(self.images) - 1
self.ypos.append(self.ypos[-1] + im.size[1] +
2 * self.padding[1])
@@ -66,6 +69,8 @@ class Spriter(object):
color = (0,0,0,0))
for i, image in enumerate(self.images):
+ if self.stretch[i]:
+ image = image.resize((width - self.padding[0]*2, image.size[1]))
master.paste(image,
(self.padding[0], self.padding[1] + self.ypos[i]))
diff --git a/r2/r2/public/static/css/reddit.css b/r2/r2/public/static/css/reddit.css
index 48e7477d0..e1aebe165 100644
--- a/r2/r2/public/static/css/reddit.css
+++ b/r2/r2/public/static/css/reddit.css
@@ -200,16 +200,43 @@ ul.flat-vert {text-align: left;}
bottom: 0px;
background-color: #EFF7FF;
padding: 4px;
+ line-height: 12px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 7px;
border-top-left-radius: 7px;
}
-#mail img {position: relative; top: 2px}
-#modmail img {position: relative; top: 4px; margin-top: -6px; }
+#mail {
+ position: relative;
+ top: 2px;
+ display: inline-block;
+ text-indent: -9999px;
+ overflow: hidden;
+ width: 15px;
+ height: 12px;
+ margin-bottom: -2px;
+}
+#mail.havemail {
+ background-image: url(/static/mail.png); /* SPRITE */
+}
+#mail.nohavemail {
+ background-image: url(/static/mailgray.png); /* SPRITE */
+}
+#modmail {
+ position: relative;
+ top: -2px;
+ display: inline-block;
+ text-indent: -9999px;
+ overflow: hidden;
+ width: 16px;
+ height: 16px;
+ margin-bottom: -6px;
+}
+#modmail.havemail {
+ background-image: url(/static/modmail.png); /* SPRITE */
+}
#modmail.nohavemail {
- opacity: .7;
- filter:alpha(opacity=70); /* IE patch */
+ background-image: url(/static/modmailgray.png); /* SPRITE */
}
.user {color: gray;}
@@ -371,7 +398,7 @@ ul.flat-vert {text-align: left;}
border: 1px solid #c4dbf1;
background: white none repeat-x scroll center left;
- background-image: url(/static/gradient-button.png);
+ background-image: url(/static/gradient-button.png); /* SPRITE stretch-x */
font-size:150%;
font-weight:bold;
@@ -383,7 +410,7 @@ ul.flat-vert {text-align: left;}
.morelink:hover, .mlh {
border-color: #879eb4;
- background-image: url(/static/gradient-button-hover.png);
+ background-image: url(/static/gradient-button-hover.png); /* SPRITE stretch-x */
}
.morelink a {
@@ -727,13 +754,29 @@ ul.flat-vert {text-align: left;}
vertical-align: top;
}
-.organic-listing .nextprev img {
- margin: 5px 5px 2px 0px; border: solid 1px #B3B3B3;
+.organic-listing .nextprev .arrow {
+ width: 21px;
+ height: 21px;
+ margin: 5px 5px 2px 0px;
+ border: solid 1px #B3B3B3;
+ display: inline-block;
+ position: relative;
+ /* This is a really weird value, but it needs to be low to hide text without affecting layout in IE. */
+ text-indent: 50px;
}
-.organic-listing .nextprev img:hover {
- cursor: pointer; border: solid 1px #336699;
+.organic-listing .nextprev .arrow.prev {
+ background-image: url(/static/prev_organic.png); /* SPRITE */
+}
+.organic-listing .nextprev .arrow.next {
+ background-image: url(/static/next_organic.png); /* SPRITE */
+}
+.organic-listing .nextprev .arrow:hover {
+ cursor: pointer;
+ border: solid 1px #336699;
+}
+.organic-listing .nextprev .arrow:active {
+ top: 1px;
}
-.organic-listing .nextprev img:active { margin: 6px 4px 1px 1px;}
.link.promotedlink {
/*background-color: lightgreen; */
diff --git a/r2/r2/public/static/gradient-button-hover.png b/r2/r2/public/static/gradient-button-hover.png
index dce6bf459..0edf33b3e 100644
Binary files a/r2/r2/public/static/gradient-button-hover.png and b/r2/r2/public/static/gradient-button-hover.png differ
diff --git a/r2/r2/public/static/modmailgray.png b/r2/r2/public/static/modmailgray.png
index e698b3381..f46bdc6a6 100644
Binary files a/r2/r2/public/static/modmailgray.png and b/r2/r2/public/static/modmailgray.png differ
diff --git a/r2/r2/templates/redditheader.html b/r2/r2/templates/redditheader.html
index ffb81b413..c6c2ac1c9 100644
--- a/r2/r2/templates/redditheader.html
+++ b/r2/r2/templates/redditheader.html
@@ -69,40 +69,32 @@
${separator("|")}
<%
- mail_img ="mail"
if c.have_messages:
- mail_img += ".png"
mail_img_class = 'havemail'
mail_img_title = "new mail!"
mail_path = "/message/unread/"
else:
- mail_img += "gray.png"
mail_img_class = 'nohavemail'
mail_img_title = "no new mail"
mail_path = "/message/inbox/"
- mail_img = static(mail_img)
%>
- ${img_link(_("messages"), mail_img, path=mail_path,
- alt = mail_img_title, title = mail_img_title,
+ ${plain_link(_("messages"), path=mail_path,
+ title = mail_img_title,
_id = "mail", _class=mail_img_class)}
${separator("|")}
%if c.show_mod_mail:
<%
- mail_img ="modmail"
if c.have_mod_messages:
- mail_img += ".png"
mail_img_class = 'havemail'
- mail_img_title = "new mail!"
+ mail_img_title = "new mod mail!"
mail_path = "/message/moderator/"
else:
- mail_img += "gray.png"
mail_img_class = 'nohavemail'
- mail_img_title = "no new mail"
+ mail_img_title = "no new mod mail"
mail_path = "/message/moderator/"
- mail_img = static(mail_img)
%>
- ${img_link(_("mod messages"), mail_img , path=mail_path,
- alt = mail_img_title, title = mail_img_title,
+ ${plain_link(_("mod messages"), path=mail_path,
+ title = mail_img_title,
_id = "modmail", _class=mail_img_class)}
${separator("|")}
%endif
diff --git a/r2/r2/templates/spotlightlisting.html b/r2/r2/templates/spotlightlisting.html
index a066029f4..196192a39 100644
--- a/r2/r2/templates/spotlightlisting.html
+++ b/r2/r2/templates/spotlightlisting.html
@@ -46,10 +46,8 @@
%endfor
-
})
-
})
+
+