Skip to content
Browse files

style changes

  • Loading branch information...
1 parent 8612b1f commit cd2b042dd3c5b79bf48ac455578eec32862705e9 @peterbe committed Sep 23, 2011
View
18 TODO
@@ -1,19 +1,5 @@
* Do it for this page too
https://twitter.com/#!/dotton/following
-* Solve this traceback:
-
-[W 110906 13:20:06 auth:327] Could not fetch access token
-[W 110906 13:20:06 web:1006] 500 GET /auth/twitter/?oauth_token=5lmsRwZ12GQjMEDUSZZzeM3CmVN3668nPucjurMiwI&oauth_verifier=nhqvtUN3Il50KtiiHCozbxyKZHhRgVl0OzHINSc (127.0.0.1): Twitter auth failed
-[E 110906 13:20:06 web:1370] 500 GET /auth/twitter/?oauth_token=5lmsRwZ12GQjMEDUSZZzeM3CmVN3668nPucjurMiwI&oauth_verifier=nhqvtUN3Il50KtiiHCozbxyKZHhRgVl0OzHINSc (127.0.0.1) 304.70ms
-[W 110906 13:20:06 simple_httpclient:272] uncaught exception
- Traceback (most recent call last):
- File "/Users/peterbe/virtualenvs/followsme/lib/python2.6/site-packages/tornado/simple_httpclient.py", line 270, in cleanup
- yield
- File "/Users/peterbe/virtualenvs/followsme/lib/python2.6/site-packages/tornado/stack_context.py", line 183, in wrapped
- callback(*args, **kwargs)
- File "/Users/peterbe/virtualenvs/followsme/lib/python2.6/site-packages/tornado/simple_httpclient.py", line 351, in _on_chunk_length
- self._on_body(b('').join(self.chunks))
- File "/Users/peterbe/virtualenvs/followsme/lib/python2.6/site-packages/tornado/simple_httpclient.py", line 341, in _on_body
- self.callback(response)
- TypeError: 'NoneType' object is not callable
+* Override log_request in base handler so that only errors and
+ warnings are actually logged.
View
118 static/css/style.css
@@ -0,0 +1,118 @@
+body {
+font-family: sans-serif;
+background-attachment: fixed;
+background-image: url("/static/images/rock.jpg");
+background-repeat: no-repeat;
+background-position: bottom right;
+margin-left: 40px;
+}
+h1,h2,h3,h4 { font-family: Helvetica, sans-serif; }
+h3 {font-size:20px}
+h1 a { color:black; text-decoration:none; }
+h1 a:hover { color:black; text-decoration:underline; }
+header h1 { font-family: 'Permanent Marker',cursive;margin-top:10px;
+ font-size: 4.2em; letter-spacing: -3px; margin-bottom: 0; }
+/*footer { position: absolute; bottom: 0; }*/
+footer { clear:left; margin-top:100px; }
+footer p { text-align:center; font-family: sans-serif; color:#666; font-size:0.8em; }
+.followsyou { color: green; }
+.followsyounot { color: #333; }
+h1 a .q { color:#999; }
+
+p.description {
+ font-size: 14px;
+ line-height: 1.6em;
+ width: 600px;
+}
+
+p.login {
+ display: block;
+ float: left;
+ width: 100%;
+}
+
+.twitter-login {
+ /* Firefox 3.6+ */
+ background: -moz-linear-gradient(100% 100% 90deg, #e6e6e6, #f1f1f1);
+ /* Safari 4-5, Chrome 1-9 */ /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(#e6e6e6));
+ /* Safari 5.1+, Chrome 10+ */
+ background: -webkit-linear-gradient(#e6e6e6, #f1f1f1);
+ /* Opera 11.10+ */
+ background: -o-linear-gradient(#e6e6e6, #f1f1f1);
+ border: 1px solid #FFFFFF;
+ border-radius: 5px 5px 5px 5px;
+ box-shadow: 0 1px 2px #999999;
+ color: #333333;
+ font-size: 17px;
+ font-weight: bold;
+ margin: 0 20px 10px 0;
+ padding: 10px 15px;
+ text-decoration: none;
+ text-shadow: 0 1px 1px #FFFFFF;
+ float: left;
+}
+
+a.twitter-login img, a.bookmarklet img {
+ float: left;
+}
+
+a.twitter-login span.text {
+ float: left;
+ margin-left: 10px;
+ position: relative;
+ top: 4px;
+}
+
+span.readonly {font-size: 11px;}
+
+span.tick {
+ color: green;
+ font-size: 30px;
+ font-weight: bold;
+ padding: 3px 10px 3px 13px;
+}
+
+.useit {
+ float: left; width: 340px; margin: 30px 40px 0pt 0pt;
+ padding-right: 20px;
+ /*height: 260px;*/
+}
+.useit-first {
+ border-right: 1px solid #e1e1e1;
+}
+span.title {font-weight: bold; letter-spacing: -1px; width: 100%; float: left; font-size: 30px; margin-bottom: 20px;}
+span.explain {font-size: 12px; margin-bottom: 12px;}
+a.bookmarklet {
+ /* Firefox 3.6+ */
+ background: -moz-linear-gradient(100% 100% 90deg, #e6e6e6, #f1f1f1);
+ /* Safari 4-5, Chrome 1-9 */ /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(#e6e6e6));
+ /* Safari 5.1+, Chrome 10+ */
+ background: -webkit-linear-gradient(#e6e6e6, #f1f1f1);
+ /* Opera 11.10+ */
+ background: -o-linear-gradient(#e6e6e6, #f1f1f1);
+ border: 1px solid #FFFFFF;
+ border-radius: 5px 5px 5px 5px;
+ box-shadow: 0 1px 3px #666666;
+ color: #319FBF;
+ font-weight: bold;
+ padding: 10px 15px;
+ text-decoration: none;
+ text-shadow: 0 1px 1px #FFFFFF;
+ margin: 0px 10px 20px 0;
+ float: left;
+ width: 200px;
+ font-size: 20px;
+ }
+
+a.bookmarklet span.text {
+ float: left;
+ margin-left: 10px;
+ position: relative;
+ top: 3px;
+}
+img.screengrab1 {float:left; margin-top: 20px; opacity:0.7;}
+img.screengrab {float: left; margin-right: 10px;}
+h3.confused {font-size:35px;}
+span.grey {color:#c1c1c1;}
View
BIN static/images/screengrab.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN static/images/screengrab2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN static/images/twitter-small-mirrored.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN static/images/twitter-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN static/images/twitter.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
22 templates/base.html
@@ -5,25 +5,7 @@
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
- <style>
- body {
- font-family: sans-serif;
- background-attachment: fixed;
- background-image: url(/static/images/rock.jpg);
- background-repeat: no-repeat;
- background-position: bottom right;
- }
- h1,h2,h3,h4 { font-family: 'Permanent Marker', cursive; }
- h1 a { color:black; text-decoration:none; }
- h1 a:hover { color:black; text-decoration:underline; }
- header h1 { font-size:3.2em; }
- /*footer { position: absolute; bottom: 0; }*/
- footer { clear:left; margin-top:100px; }
- footer p { text-align:center; font-family: sans-serif; color:#666; font-size:0.8em; }
- .followsyou { color: green; }
- .followsyounot { color: #333; }
- h1 a .q { color:#999; }
- </style>
+ <link href="/static/css/style.css" rel="stylesheet" type="text/css">
{% block extra_head %}{% end %}
</head>
<body>
@@ -42,7 +24,7 @@
<footer>
<p>Brought to you by <a href="http://www.peterbe.com/">Peter Bengtsson</a>
- (<a href="https://twitter.com/#!/peterbe">twitter</a>)
+ (<a href="https://twitter.com/#%21/peterbe">twitter</a>)
&bull;
<a href="https://github.com/peterbe/toocool">code on github</a>
</p>
View
69 templates/home.html
@@ -1,33 +1,78 @@
{% extends "base.html" %}
{% block extra_header %}
-<h3>Service to allow you to find out who of the people you follow also follow you on <a href="https://twitter.com">Twitter</a></h3>
+<h3>Find out who on <a href="https://twitter.com/">Twitter</a> follows you back <span class="grey">(and who is just too cool for you)</span></h3>
{% end %}
{% block content %}
+{% if user %}
+<!-- LOGGED IN BLOCK -->
+<p class="login">
+ <span class="tick twitter-login">&#x2713;</span>
+ logged in as <strong>@{{ user }}</strong>
+ <span style="font-size:0.7em">(<a href="/auth/logout/">Log out</a>)</span>
+ <br/>
+ <a href="/test">Test the service manually</a>
+</p>
+<!-- END LOGGED IN BLOCK -->
+{% else %}
+
+<!-- NON-LOGGED IN BLOCK -->
+<p class="description">Ever wanted to know who in your twitter feed actually follows you back? <strong>Too Cool For Me</strong> is a simple tool which tells you quickly and easily who is and isn't following you back in your twitter feed. Try it out - login to your twitter account to start.</p>
+<p class="login">
+ <a href="/auth/twitter/" class="twitter-login">
+ <img src="/static/images/twitter-small.png"/>
+ <span class="text">Login with Twitter to start</span>
+ </a>
+ <span class="readonly">&laquo; Read-only authorisation, we cannot post to your account.
+ <br>Once you're logged in, we'll show you what to do.</span>
+</p>
+<!-- END NON-LOGGED IN BLOCK -->
+
+{% end %}
{% if user %}
-<p><strong>{{ user }}</strong>
-<span style="font-size:0.7em">(<a href="/auth/logout/">Log out</a>)</span>
+<!-- GUIDE BLOCK - only show when logged in -->
+<div class="useit useit-first">
+<p><span class="title">1. Add the bookmarklet</span>
+<span class="explain"><strong>Drag-and-drop</strong> this link (bookmarklet) ...</span>
+<a class="bookmarklet" href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','{{ full_bookmarklet_url }}');document.body.appendChild(e)})())" onclick="return false">
+<img src="/static/images/twitter-small-mirrored.png">
+<span class="text">Too cool for me?</span></a>
</p>
-<p><a href="/test">Test the service</a></p>
+<p style="clear:left">
+<span class="explain">...into your browser's bookmarks toolbar.</span>
+<img class="screengrab1" src="/static/images/screengrab.png">
-<p>Drag this link (bookmarklet) into your browser's bookmarks toolbar:
-<a style="font-weight:bold" onclick="return false"
- href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','{{ full_bookmarklet_url }}');document.body.appendChild(e)})())">Too cool for me?</a>
</p>
+</div>
-{% else %}
-<p>stranger<br>
-<a href="/auth/twitter/">Log in with Twitter</a>
-<span style="font-size:0.8em;font-weight:bold">(Read-only Twitter authentication)</span>
+<div class="useit">
+<p><span class="title">2. Visit <a href="https://twitter.com/">Twitter</a> <br>and click the bookmarklet!</span>
+<img class="screengrab" src="/static/images/screengrab2.png">
+<span class="explain">On twitter.com click the bookmarklet to see who in your feed is <strong>too cool for you!</strong>
+<br/><br/> It can take a few seconds to show up, so be patient!
+</span>
</p>
+</div>
+
+
+<!--<p class="useit" style="border-right: none;"><span class="title">3. Tell your friends</span>
+<img src="/static/images/twitter.png">
+<img src="/static/images/facebook.png">
+<img src="/static/images/google.png">
+
+</p>-->
+
+<!-- END GUIDE BLOCK -->
{% end %}
+<br clear="all">
+
<div style="margin-top:60px">
-<h3>What the heck is this? Watch the screencast:</h3>
+<h3>Confused? Watch the screencast</h3>
<iframe width="420" height="315" src="http://www.youtube.com/embed/wv-i54IhTfM?rel=0" frameborder="0" allowfullscreen></iframe>
<p style="font-size:0.8em">Or, <a href="http://youtu.be/wv-i54IhTfM">watch it on YouTube</a></p>
</div>

0 comments on commit cd2b042

Please sign in to comment.
Something went wrong with that request. Please try again.