Updating socialite page with a new look

mjschultz · Aug 6, 2009 · 52a5712 · 52a5712
1 parent 9a11ad8
commit 52a5712
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 96 deletions.
diff --git a/r2/r2/config/routing.py b/r2/r2/config/routing.py
@@ -67,7 +67,6 @@ def make_map(global_conf={}, app_conf={}):
     mc('/buttonlite', controller='buttons', action='button_lite')
 
     mc('/widget', controller='buttons', action='widget_demo_page')
-    mc('/socialite', controller='buttons', action='socialite_demo_page')
     mc('/bookmarklets', controller='buttons', action='bookmarklets')
 
     mc('/stats', controller='front', action='stats')

diff --git a/r2/r2/controllers/buttons.py b/r2/r2/controllers/buttons.py
@@ -21,7 +21,7 @@
 ################################################################################
 from reddit_base import RedditController
 from r2.lib.pages import Button, ButtonNoBody, ButtonEmbed, ButtonLite, \
-    ButtonDemoPanel, WidgetDemoPanel, Bookmarklets, BoringPage, Socialite
+    ButtonDemoPanel, WidgetDemoPanel, Bookmarklets, BoringPage
 from r2.lib.pages.things import wrap_links
 from r2.models import *
 from r2.lib.utils import tup, query_string
@@ -183,12 +183,6 @@ def GET_widget_demo_page(self):
                           show_sidebar = False, 
                           content=WidgetDemoPanel()).render()
 
-    def GET_socialite_demo_page(self):
-        return BoringPage(_("socialite toolbar"),
-                          show_sidebar = False, 
-                          content=Socialite()).render()
-
-
     def GET_bookmarklets(self):
         return BoringPage(_("bookmarklets"),
                           show_sidebar = False, 

diff --git a/r2/r2/lib/pages/pages.py b/r2/r2/lib/pages/pages.py
@@ -1238,10 +1238,6 @@ class WidgetDemoPanel(Templated):
     """Demo page for the .embed widget."""
     pass
 
-class Socialite(Templated):
-    """Demo page for the socialite Firefox extension"""
-    pass
-
 class Bookmarklets(Templated):
     """The bookmarklets page."""
     def __init__(self, buttons=None):

diff --git a/r2/r2/public/static/socialite/index.html b/r2/r2/public/static/socialite/index.html
@@ -0,0 +1,113 @@
+<html>
+<head>
+<style>
+	a {font-weight: bold; color: black;text-decoration:none; border-bottom:1px solid white;}
+	a:hover {color:#ff4500;border-bottom:1px solid #ff4500;}
+</style>
+</head>
+
+<body style="margin:0; font-family: arial, sans-serif; background-color:#cbe7f2; background-image: url(socialitebg.png); background-attachment: fixed; background-position: center top; background-repeat: no-repeat;">
+<div style="background:white; padding: 5px; ">
+<a href="http://www.reddit.com" style="border:none;"><img style="border: none" src="reddit-head.png"></a></div>
+<div style="width: 800px; margin: 20px auto;">
+<div class="instructions socialite">		
+
+<img src="socialitelogo.png" style="float:left;margin-right:20px">
+<div style="font-size:.9em;">
+<span style="font-size:2.3em; letter-spacing:-.04em;color: #118db3;"<b>Install it for free!</b></span>
+<p style="margin-top:0px; line-height:1.3em;">If you like it, why not thank <a href="http://www.reddit.com/user/chromakode">chromakode</a>,the redditor who made it, with some cash so he can buy some bacon.
+</p>
+</div>
+
+<div style="margin-top:20px;">
+
+<div style="float:left;"><a style="border:none;" href="https://addons.reddit.com/socialite/socialite.xpi"><img style="border:none" src="socialite-add.png"></a></div>
+<div style="float:left;">
+<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
+<input type="hidden" name="cmd" value="_s-xclick">
+<input type="hidden" name="hosted_button_id" value="7294636">
+<input type="image" src="socialite-bacon.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
+</form>
+</div>
+
+
+
+<div style="float:left; margin-top:5px; margin-left:5px; font-size: .75em; text-align: left; color: black;">75% goes to chromakode<br>
+24% pays for servers<br>
+1% pays for <a style="font-weight:normal;" href="http://blog.reddit.com/2008/12/thanks-to-baconbuzz-team-reddit-gorges.html">this</a></span></div>
+
+</div>
+<div style="clear:both;">
+</div>
+
+<div style="margin-top:20px; background-color:white; opacity:0.8;-moz-opacity:.8;filter:alpha(opacity=80); padding:10px;-moz-border-radius: 6px;-webkit-border-radius: 6px;">
+<h1 style="font-size: 1.4em; color:#118db3; margin:0px;">What does it do?</h1>
+  <ul style="line-height:1.4em; margin-top:5px;">
+    <li>reddit functionally unobtrusively <b>integrated into Firefox!</b></li>
+    <li>magically appears when you click a reddit link to let you <b>vote, save, and hide links right there!</b></li>
+    <li>unlock the digital fairy dust that is the <b>serendipity button!</b></li>
+    <li>achieve the <b>notoriety</b> you feel has long been wasted on your inferior peers!</li>
+    <li><b>enhance your reddit experience</b> so much that you start using exclamation points!</li>
+  </ul>
+</div>
+
+<p class="screenshot">
+  <div style="border: 1px solid #118db3; text-align:center; padding: 15px 0 0 0; background:#fefefe"><img src="demopic.png" alt="Socialite screenshot"/></div>
+</p>
+
+<h2>How to use it</h2>
+
+<p>
+  Although Socialite appears auto-magically, you can also open the bar manually by clicking on the reddit
+  icon on the right side of your location bar:
+</p>
+
+<p class="screenshot">
+   <div style="border: 1px solid #118db3; text-align:center; padding: 15px 0; background:#fefefe"><img src="losbutton.png" alt="lookup-or-submit button"/></div>
+</p>
+
+<p>
+  If the page is not submitted to reddit, or you click again, a submit
+  bar will appear:
+</p>
+
+<p class="screenshot">
+   <div style="border: 1px solid #118db3; text-align:center; padding: 15px 0; background:#fefefe"><img src="submitpic.png" alt="submit bar screenshot"/></div>
+</p>
+
+<p>
+  (<b>PRO-TIP:</b>&#32;if you want to skip straight to the submit bar,
+  middle-click on the reddit icon.)
+</p>
+
+
+<h2>Configuration</h2>
+
+<p>
+  Like a Mr. Potato Head, you can change its appearance -- choose what buttons are displayed in the toolbar in the
+  extensions preferences:
+</p>
+
+<p  class="screenshot">
+   <div style="border: 1px solid #118db3; text-align:center; padding: 15px 0; background:#fefefe"><img src="siteproperties.png" alt="site properties window screenshot"/></div>
+</p>
+
+<h2>Activate for other reddit sites</h2>
+<p>
+  Our toolbar gets around. Since reddit lets you
+  &#32;<a style="font-weight:normal;" href="http://blog.reddit.com/2008/08/now-you-can-restyle-and-host-your.html">
+  host reddits from other domains</a> - like
+  &#32;<a style="font-weight:normal;" href="http://www.thecutelist.com/">the Cute List</a> - Socialite will also let you edit the list of domains that it works for.
+</p>
+<p  class="screenshot">
+   <div style="border: 1px solid #118db3; text-align:center; padding: 15px 0; background:#fefefe"><img src="sitepreferences.png" 
+       alt="preferences window screenshot"/></div>
+</p>
+
+</div>
+<img style="float:left; margin-right: 15px;" src="thumbsup3.png">
+<div style="font-size:1.5em; letter-spacing:-.05em; margin-top:25px; color:#118db3;">Want to get in on the reddit development scene like chromakode?<br><a href="http://code.reddit.com">Click here to dive in.</a></div>
+
+</div>
+</body>
+</html>

diff --git a/r2/r2/public/static/socialite/installbutton-end.png b/r2/r2/public/static/socialite/installbutton-end.png
diff --git a/r2/r2/public/static/socialite/installbutton.png b/r2/r2/public/static/socialite/installbutton.png
diff --git a/r2/r2/public/static/socialite/reddit-head.png b/r2/r2/public/static/socialite/reddit-head.png
diff --git a/r2/r2/public/static/socialite/socialite-add.png b/r2/r2/public/static/socialite/socialite-add.png
diff --git a/r2/r2/public/static/socialite/socialite-bacon.png b/r2/r2/public/static/socialite/socialite-bacon.png
diff --git a/r2/r2/public/static/socialite/socialite.png b/r2/r2/public/static/socialite/socialite.png
diff --git a/r2/r2/public/static/socialite/socialitebg.png b/r2/r2/public/static/socialite/socialitebg.png
diff --git a/r2/r2/public/static/socialite/socialitelogo.png b/r2/r2/public/static/socialite/socialitelogo.png
diff --git a/r2/r2/public/static/socialite/thumbsup3.png b/r2/r2/public/static/socialite/thumbsup3.png
diff --git a/r2/r2/templates/socialite.html b/r2/r2/templates/socialite.html