github/reddit
1
1
Fork 0
mirror of https://github.com/reddit-archive/reddit.git synced 2026-01-29 00:38:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

gold page: Partners and Yishan letter update.

Browse Source
This commit is contained in:
Max Goodman
2013-06-19 17:15:07 -07:00
parent c067044194
commit 6d9b19f924
10 changed files with 253 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
r2/r2/public/static/css/goldinfo.less
View File

@@ -6,14 +6,103 @@
transform: @arguments;
}
section#about-gold, section#about-gold-partners, section#postcard, .or-box {
.inset-white-with-shadow {
@border-radius: 6px;
background: white;
border-radius: @border-radius;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: @border-radius;
box-shadow: 0 1px 5px #735121 inset;
}
}
section#gold-letter, section#about-gold, section#about-gold-partners, section#postcard, .or-box {
font-family: "Bitstream Charter", "Hoefler Text", "Palatino Linotype",
"Book Antiqua", Palatino, georgia, garamond, FreeSerif, serif;
}
section#gold-letter {
@width: 944px;
@padding: 13px;
position: relative;
width: @width - 2 * @padding;
margin: 30px auto;
padding: (@padding + 2) @padding;
&:before, &:after {
content: '';
position: absolute;
display: block;
height: 30px;
left: 0;
right: 0;
z-index: 1;
}
&, &:before, &:after {
background: url(../gold/letter-bg.png) repeat-y;
}
&:before {
top: 0;
}
& {
background-position: -@width 0;
}
&:after {
bottom: 0;
background-position: -(@width * 2) 0;
}
.letter-body {
position: relative;
z-index: 2;
border: 1px solid #ece9e3;
padding: 20px 40px;
background: url(../gold/letter-watermark.png) 360px -45px no-repeat;
font-size: 17px;
.logo {
margin-bottom: .5em;
}
p {
margin-bottom: 1em;
margin-right: 3em;
}
.signature {
text-align: right;
line-height: .9em;
margin-top: -1em;
margin-bottom: 0;
margin-right: 0;
a {
position: relative;
margin-left: -47px;
top: -10px;
font-family: sans-serif;
font-size: .75em;
}
}
}
}
section#about-gold, section#about-gold-partners {
width: 960px;
margin: 40px auto;
@section-width: 960px;
width: @section-width;
margin: 30px auto 40px;
background: url(../gold/inner-bg.jpg) 11px repeat-y;
h1 {
@@ -105,20 +194,67 @@ section#about-gold, section#about-gold-partners {
}
header {
// could use box-sizing here, but want to look semi-decent in IE7
@width: 960px;
@height: 164px;
@padding-left: 242px;
@padding-right: 50px;
@padding-top: 23px;
position: relative;
top: -10px;
width: @width - @padding-left - @padding-right;
height: @height - @padding-top;
padding-top: @padding-top;
padding-left: @padding-left;
padding-right: @padding-right;
background: url(../gold/header-bg.jpg) no-repeat center top;
z-index: 5;
&.large {
// could use box-sizing here, but want to look semi-decent in IE7
@height: 161px;
@padding-left: 242px;
top: -10px;
width: @width - @padding-left - @padding-right;
height: @height - @padding-top;
padding-top: @padding-top;
padding-left: @padding-left;
padding-right: @padding-right;
background: url(../gold/header-bg.jpg) no-repeat center top;
.actions {
margin-top: 10px;
}
}
&.short {
@height: 101px;
@padding-left: 42px;
width: @width - @padding-left - @padding-right;
height: @height - @padding-top;
padding-top: @padding-top;
padding-left: @padding-left;
padding-right: @padding-right;
background: url(../gold/header-bg-short.jpg) no-repeat center top;
.insignia {
display: none;
}
h1 {
float: left;
line-height: 52px;
margin: 0;
}
.actions {
float: right;
}
}
&:before {
// shadow after the header
@size: 40px;
content: '';
position: absolute;
display: block;
bottom: -@size + 2;
left: 11px;
right: 11px;
height: @size;
box-shadow: 0 @size @size -@size rgba(0, 0, 0, .35) inset;
z-index: 1;
}
.insignia {
position: absolute;
@@ -135,10 +271,6 @@ section#about-gold, section#about-gold-partners {
margin-right: .5em;
}
.actions {
margin-top: 10px;
}
.or {
font-size: 18px;
margin: 0 16px;
@@ -189,34 +321,57 @@ section#about-gold, section#about-gold-partners {
}
.sample {
@border-radius: 6px;
position: relative;
.inset-white-with-shadow;
float: right;
width: 315px;
height: @section-height;
margin: 0;
background: white;
border-radius: @border-radius;
text-align: center;
& img {
vertical-align: middle;
}
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: @border-radius;
box-shadow: 0 1px 5px #735121 inset;
}
}
&.lounge .sample {
background: white url(../gold/gold-pattern.png)
&#partner-benefits {
height: auto;
line-height: inherit;
text-align: center;
h1 {
text-align: center;
}
li {
display: inline-block;
padding: 10px;
margin: 10px 12px;
text-align: center;
width: 210px;
height: 110px;
font-size: 18px;
.label-container {
line-height: 2em;
height: 2em;
margin-bottom: 8px;
}
.partner-label {
display: inline-block;
line-height: 1em;
vertical-align: middle;
}
.logo {
.inset-white-with-shadow;
img {
width: 200px;
padding-top: 5px;
}
}
}
}
}
@@ -231,8 +386,8 @@ section#about-gold, section#about-gold-partners {
}
footer {
@height: 169px;
@padding-top: 18px;
@height: 159px;
@padding-top: 6px;
position: relative;
top: 10px;
width: 960px;
@@ -248,6 +403,20 @@ section#about-gold, section#about-gold-partners {
p {
margin-bottom: 18px;
}
&:after {
// shadow above the footer
@size: 10px;
content: '';
position: absolute;
display: block;
top: -@size;
left: 11px;
right: 11px;
height: @size;
box-shadow: 0 -@size @size -@size rgba(0, 0, 0, .25) inset;
z-index: 1;
}
}
header, footer {

BIN
r2/r2/public/static/gold/footer-bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
r2/r2/public/static/gold/header-bg-short.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
r2/r2/public/static/gold/header-bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 35 KiB

BIN
r2/r2/public/static/gold/letter-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
r2/r2/public/static/gold/letter-signature.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
r2/r2/public/static/gold/letter-watermark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
r2/r2/public/static/gold/reddit-gold-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

64
r2/r2/templates/goldinfopage.html
View File

@@ -24,7 +24,7 @@
from r2.lib.template_helpers import static
%>
<%namespace file="less.html" import="less_stylesheet"/>
<%namespace file="utils.html" import="tags, _md"/>
<%namespace file="utils.html" import="classes, _md"/>
<%inherit file="reddit.html"/>
<%def name="stylesheet()">
@@ -33,7 +33,7 @@
</%def>
<%def name="feature_item(name, img_src, description_md, extra_class='')">
<section id="${name}" ${tags(_class=extra_class)}>
<section id="${name}" ${classes(extra_class)}>
<div class="sample"><img src="${img_src}" alt=""></div>
<div class="description">
%if 'new' in extra_class.split():
@@ -47,11 +47,20 @@
</section>
</%def>
<%def name="goldinfo_header(title, description)">
<header>
<%def name="partner_item(name, description_html)">
<a href="/gold/partners#${name}" target="_blank">
<div class="label-container"><span class="partner-label">${unsafe(description_html)}</span></div>
<div class="logo"><img src="${static('gold/partner-%s.png' % name)}" alt="${name}"></div>
</a>
</%def>
<%def name="goldinfo_header(title, description=None, css_class=None)">
<header ${classes(css_class)}>
<img class="insignia" src="${static('gold/gold-insignia-big.png')}" alt="">
<h1>${title}</h1>
<p>${description}</p>
% if description:
<p>${description}</p>
% endif
<div class="actions">
<a class="buy-gold-button" href="/gold">${_('buy reddit gold')}</a>
<span class="or">${_('or')}</span>
@@ -69,14 +78,24 @@
</%def>
<%def name="content()">
<section id="gold-letter">
<div class="letter-body">
<img class="logo" src="${static('gold/reddit-gold-logo.png')}" alt="reddit gold">
${_md(
"reddit gold is our premium membership program. It comes with extra features to make your experience here better as well as special benefits from gold partners for exceptional products and services.\n\n"
"reddit takes no payment from gold partners for being in this program. We ask that they give all the benefits to you, our users. We hope in turn that this helps make gold a program worth subscribing to.\n\n"
"If you have questions about any of the benefits, please visit /r/goldbenefits. New benefits and features will also be announced there, and we hope you'll enjoy them."
)}
<div class="signature"><img src="${static('gold/letter-signature.png')}" alt="yishan"><a href="/u/yishan" target="_blank">/u/yishan</a></div>
</div>
</section>
<section id="about-gold">
${goldinfo_header(_('Make reddit better.'),
_('reddit gold adds shiny extra features to your account that are made possible thanks to support from people like you.'))}
${feature_item('filter-all',
static('gold/sample-filterall.png'),
${goldinfo_header(_('You can make reddit better.'), css_class='short')}
${feature_item('comment-highlighting',
static('gold/sample-commenthighlighting.png'),
_(
"# Filter specific subreddits from /r/all.\n"
"Are there subreddits you don't want to see? Customize /r/all by removing them with a url like /r/all-operative-badger (up to ~300 removals - limited by maximum url length)."
'# New comment highlighting.\n'
"What's new? Highlight which comments are new since the last time you viewed a thread."
))}
${feature_item('username-notifications',
static('gold/sample-butler.png'),
@@ -85,6 +104,22 @@
"""Want to say "boo" when people talk about you? """
"""Get an orangered whenever someone "/u/" mentions your username in a comment."""
), "new")}
<section id="partner-benefits">
<h1>${_('Awesome stuff for gold members:')}</h1>
<ul>
<li>${partner_item('backblaze', 'data backups<br>(sleep soundly)')}</li>
<li>${partner_item('uniqlo', 'cool clothes')}</li>
<li>${partner_item('goldbely', 'special foods from around the country')}</li>
<li>${partner_item('empiremayo', 'tasty spreads')}</li>
<li>${partner_item('urbilis', 'high-end home gardening')}</li>
</ul>
</section>
${feature_item('filter-all',
static('gold/sample-filterall.png'),
_(
"# Filter specific subreddits from /r/all.\n"
"Are there subreddits you don't want to see? Customize /r/all by removing them with a url like /r/all-operative-badger (up to ~300 removals - limited by maximum url length)."
))}
${feature_item('more-comments',
static('gold/sample-morecomments.png'),
_(
@@ -93,12 +128,6 @@
'Subscribe to up to 100 subreddits on your front page. \n'
'Read comment threads 1500 comments at a time.'
))}
${feature_item('comment-highlighting',
static('gold/sample-commenthighlighting.png'),
_(
'# New comment highlighting.\n'
"What's new? Highlight which comments are new since the last time you viewed a thread."
))}
${feature_item('save-comments',
static('gold/sample-savecomments.png'),
_(
@@ -123,7 +152,6 @@
<ul>
<li><strong>${_('The Lounge.')}</strong>&#32;${_('Access to a super-secret members-only community that may or may not exist.')}</li>
<li><strong>${_('Beta test new features.')}</strong>&#32;${_('We occasionally invite gold members to try out new features first.')}</li>
<li><strong><a href="/gold/partners">${_('Deals from gold partners.')}</a></strong>&#32;${strings.gold_partners_description}</li>
<li><strong>${_('A trophy on your user page.')}</strong>&#32;${_('As thanks for supporting reddit gold.')}</li>
<li><strong>${_('More to come.')}</strong>&#32;${_("We have many more ideas for gold features, and will add to this list in the future.")}</li>
</ul>

3
r2/r2/templates/goldpartnerspage.html
View File

@@ -61,7 +61,8 @@
<%def name="content()">
<section id="about-gold-partners">
${goldinfo_header(_('reddit gold partners'),
strings.gold_partners_description)}
strings.gold_partners_description,
css_class='large')}
${partner_item('backblaze',
_("Claim your code below, then visit https://secure.backblaze.com/gift/XXXXXXX (replacing Xs with your code), and click 'Redeem &amp; Download' to install the product and enter your email/password."),