From e20fdfb06ef385d4e789de944c98b7501bcf39ed Mon Sep 17 00:00:00 2001 From: Max Goodman Date: Fri, 23 Sep 2011 00:05:19 -0700 Subject: [PATCH] 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 | 9 ++- r2/r2/public/static/css/reddit.css | 65 +++++++++++++++--- r2/r2/public/static/gradient-button-hover.png | Bin 174 -> 197 bytes r2/r2/public/static/modmailgray.png | Bin 561 -> 731 bytes r2/r2/templates/redditheader.html | 20 ++---- r2/r2/templates/spotlightlisting.html | 6 +- 6 files changed, 69 insertions(+), 31 deletions(-) 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 dce6bf45923512275ffab4698c481f09761b098f..0edf33b3e9fd494573c1723a4b43caccae37b308 100644 GIT binary patch delta 182 zcmZ3-c$9I1c)ctK69WUoljMnZK#H+A$lZxy-8q?;Kn`1yx4R3F27;f?yX%1zXMsm# zF#`j)FbFd;%$g$s6l5>)^mS#w%_+{#B0h~-HWn!4>gnPb!f`#fVz};S*tc-OhMb*!pOrM{d%7k?iJ0ssI2sjDzG0000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+ zQe|Oed2z{QJOBUyP)S5VR0!8?$*~Q9Knw%G$a^p^TQCJPx#24YJ`L;(K){{a7>y{D4^000SaNLh0L z01FcU01FcV0GgZ_00007bV*G`2ipl36do@SOhPdL00LV{L_t(I%cWCKNRwe4em)y+ z3y1sWLBBbeKj=CoFFQocOc0C>DR!82=w`wWjXGGcQymJTYkz2V>f%KkB?Ouj!3YK) zVxmi!dkU{(*uIyu2^Z`@FyR;m7Zhm>DO5bd-RI+yE{E$kx}O z$K#3Wx;`m{m~T49Ct(1+073vBhQs0MOeS+B7z{okqGsDM3iJZFCxj>xQFA_@KRY`+ z+gm6URsd9wvVZR*qDOymG78y^9UO#tX;3Aav_C|*fn3Ye(&;5%F^EW3a zCf-yk6?-5M@B&C;Y;0^>RaH(VlWZ6UGc)t|J^lyf8h@v08jp{U^V-@P$K&yB3=Iu^ zNF)+$nr2OydBr@^%{=|!@bSyX%&~6f^mArr)^(i|i3AT153e+3v)Nl+U0rBtX{q_$ z+XcRuwfz@LJ3z?or`2ButY-}JNkFV!)xe+0RF8wwj9WIya zel!}5MIw=ApU(%&vH$=MhXb3Nn@FWn-)3fJo;_KXbw>!X^WQKL(HQ^(E|;rEmgNp+ qX2URwrfDt#SQJ9!|48FWBYy$-Nklgr7tNb^>JnSDi_!1rCSfDfLtAKUm1+L)j^Eft)!Qo?t5HwOZ{hx7+>F@Aq$! zUtKQObB#uGgYKPUD#!MVcqkO&OeRyqX0yF2mCD%u`~?zJL`eeo@e^*ZtiWQiyfB;1 zufyRmC(p7-B!9x!>vg13DGUY!DC~U4AMB1Yp68KFCedoO5RFE8=J9ym#p7`Zf&hh$ zbzso|+`EP`53d6Yl+_+Urr+;Fp7Hs7n~Yd07K<43><(~-0n14>D`!U8lhtvQ&*w#& zy}*e1LZKkyAUzHcf2zIoYm`aq$z-$H9h#kE#FW$N+ - ${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
- prev - next + +