Sprite all the things.

Lots of crazy CSS hacking in here. Sizing the header-bottom-right bits
required a lot of twiddling to appear consistently between Firefox, IE,
and Chrome. Edit at your own risk.

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]))
 

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; */

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

r2/r2/templates/spotlightlisting.html

@@ -46,10 +46,8 @@
   %endfor
 
   <div class="nextprev">
-    <img src="${static('prev_organic.png')}" alt="prev"
-         onclick="return get_organic(this, false)"/>
-    <img src="${static('next_organic.png')}" alt="next" 
-         onclick="return get_organic(this, true)" />
+    <button class="arrow prev" onclick="get_organic(this, false)">prev</button>
+    <button class="arrow next" onclick="get_organic(this, true)">next</button>
   </div>
   
   <div class="help">