Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added top right info bar

  • Loading branch information...
commit 1bf6bddbb0863f61af982bca336161390a275d86 1 parent 567f091
@robrighter authored
View
67 dynamic/css/site.sass
@@ -89,7 +89,7 @@ em
#profileinfo
background: white
padding: 5px
- height: 54px
+ height: 53px
overflow: hidden
margin-bottom: 30px
margin-left: 8px
@@ -108,12 +108,72 @@ em
.profile .name
font-size: 20px
float: left
- margin-top: 15px
+ margin-top: 18px
margin-left: 7px
width: 160px
height: 34px
overflow: hidden
+.profile .details
+ position: absolute
+ color: black
+ width: 335px
+ height: 35px
+ font-size: 8px
+ top: 150px
+ padding: 0
+ top: 0px
+ margin-left: 430px
+ margin-top: -8px
+ background-color: #fff
+ +borderRadius(3px)
+ display: none
+
+.profile .details .followbackpercent, .profile .details .topsyinfluence
+ margin-left: 10px
+ margin-top: 5px
+
+
+.profile .details .followbackpercent div, .profile .details .topsyinfluence div, .profile .details .followmanager
+ float: left
+ border: none
+ line-height: 13px
+ font-weight: bold
+ margin-top: 12px
+
+.profile .details .count
+ background-color= !green
+ color: #fff
+ +borderRadius(2px)
+ margin-left: 5px
+ font-weight: bold
+ width: 23px
+ text-align: center
+ line-height: 8px
+ padding-left: 1px
+ padding-right: 1px
+ margin-right: 6px
+ font-size: 10px
+
+.profile .details .followmanager
+ margin-left: 5px
+
+.profile .details .follow, .profile .details .unfollow
+ float: left
+ background-color: #cccccc
+ +borderRadius(2px)
+ margin-left: 4px
+ color: #fff
+ font-weight: bold
+ width: 20px
+ text-align: center
+ font-weight: bold
+ font-size: 11px
+ cursor: pointer
+
+.profile .details .follow:hover, .profile .details .unfollow:hover
+ background-color= !green
+
.user
background: white
padding: 5px
@@ -214,7 +274,8 @@ em
margin-top: 54px
margin-left: -5px
width: 770px
- height: 5px
+ height: 4px
+ z-index: 1
#homesearch
margin-top: 170px
View
18 dynamic/index.haml
@@ -5,14 +5,20 @@
#header
%a{:href=>'/'}
%img{:src=>'/images/logo.png',:id=>'logo'}
- %div{:class=>'followus'}
- %a{:href=>'http://www.twitter.com/friendagon'}
- %img{:src=>'http://twitter-badges.s3.amazonaws.com/t_logo-b.png'}
- %a{:href=>'http://www.twitter.com/friendagon'}
- %span= 'follow us'
+
#profileinfo
%div{:class=>'profile'}
+ %div{:class=>'details'}
+ %div{:class=>'followbackpercent'}
+ %div{:class=>'label'}= 'FOLLOWBACK LIKELIHOOD: '
+ %div{:class=>'count'}= '0%'
+ %div{:class=>'topsyinfluence'}
+ %div{:class=>'label'}= 'TOPSY INFLUENCE:'
+ %div{:class=>'count'}= '0'
+ %div{:class=>'followmanager'}
+ %div{:class=>'follow'}= '+'
+ %div{:class=>'unfollow'}= '-'
%img{:src=>'/images/spinner.gif'}
%div{:class=>'name'}= 'Loading...'
%div{:class=>'box nofollowback selected'}
@@ -35,7 +41,7 @@
%span{:class=>'count'}= '0'
%br
%span= 'Followers'
- %div{:class=>'tabline kill'}= ' '
+ %div{:class=>'tabline kill'}
#errorbox
%span= ''
View
75 prod-buildout/css/site.css
@@ -78,7 +78,7 @@ em {
#profileinfo {
background: white;
padding: 5px;
- height: 54px;
+ height: 53px;
overflow: hidden;
margin-bottom: 30px;
margin-left: 8px;
@@ -103,12 +103,80 @@ em {
.profile .name {
font-size: 20px;
float: left;
- margin-top: 15px;
+ margin-top: 18px;
margin-left: 7px;
width: 160px;
height: 34px;
overflow: hidden; }
+.profile .details {
+ position: absolute;
+ color: black;
+ width: 335px;
+ height: 35px;
+ font-size: 8px;
+ top: 150px;
+ padding: 0;
+ top: 0px;
+ margin-left: 430px;
+ margin-top: -8px;
+ background-color: #fff;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -khtml-border-radius: 3px;
+ border-radius: 3px;
+ display: none; }
+
+.profile .details .followbackpercent, .profile .details .topsyinfluence {
+ margin-left: 10px;
+ margin-top: 5px; }
+
+.profile .details .followbackpercent div, .profile .details .topsyinfluence div, .profile .details .followmanager {
+ float: left;
+ border: none;
+ line-height: 13px;
+ font-weight: bold;
+ margin-top: 12px; }
+
+.profile .details .count {
+ background-color: #90d55c;
+ color: #fff;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -khtml-border-radius: 2px;
+ border-radius: 2px;
+ margin-left: 5px;
+ font-weight: bold;
+ width: 23px;
+ text-align: center;
+ line-height: 8px;
+ padding-left: 1px;
+ padding-right: 1px;
+ margin-right: 6px;
+ font-size: 10px; }
+
+.profile .details .followmanager {
+ margin-left: 5px; }
+
+.profile .details .follow, .profile .details .unfollow {
+ float: left;
+ background-color: #cccccc;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -khtml-border-radius: 2px;
+ border-radius: 2px;
+ margin-left: 4px;
+ color: #fff;
+ font-weight: bold;
+ width: 20px;
+ text-align: center;
+ font-weight: bold;
+ font-size: 11px;
+ cursor: pointer; }
+
+.profile .details .follow:hover, .profile .details .unfollow:hover {
+ background-color: #90d55c; }
+
.user {
background: white;
padding: 5px;
@@ -218,7 +286,8 @@ em {
margin-top: 54px;
margin-left: -5px;
width: 770px;
- height: 5px; }
+ height: 4px;
+ z-index: 1; }
#homesearch {
margin-top: 170px;
View
22 prod-buildout/index.html
@@ -18,17 +18,23 @@
<a href='/'>
<img id='logo' src='/images/logo.png' />
</a>
- <div class='followus'>
- <a href='http://www.twitter.com/friendagon'>
- <img src='http://twitter-badges.s3.amazonaws.com/t_logo-b.png' />
- </a>
- <a href='http://www.twitter.com/friendagon'>
- <span>follow us</span>
- </a>
- </div>
</div>
<div id='profileinfo'>
<div class='profile'>
+ <div class='details'>
+ <div class='followbackpercent'>
+ <div class='label'>FOLLOWBACK LIKELIHOOD:</div>
+ <div class='count'>0%</div>
+ </div>
+ <div class='topsyinfluence'>
+ <div class='label'>TOPSY INFLUENCE:</div>
+ <div class='count'>0</div>
+ </div>
+ <div class='followmanager'>
+ <div class='follow'>+</div>
+ <div class='unfollow'>-</div>
+ </div>
+ </div>
<img src='/images/spinner.gif' />
<div class='name'>Loading...</div>
<div class='box nofollowback selected'>
View
12 prod-buildout/js/friendpage.js
@@ -36,5 +36,17 @@ $(document).ready(function() {
$('.profile .nofollowback').addClass('selected');
});
+ $('.profile .details .follow').bind('click', function() {
+ follow(tw.userscreenname, function(){
+ $('.profile .details .follow').addClass('followeduser');
+ });
+ });
+
+ $('.profile .details .unfollow').bind('click', function() {
+ unfollow(tw.userscreenname, function(){
+ $('.profile .details .unfollow').addClass('unfolloweduser');
+ });
+ });
+
});
View
5 prod-buildout/js/site.js
@@ -4,7 +4,7 @@ var tw;
var insertUser = function (user){
var template = $('.template').clone();
template.find('.name a').html(user.screen_name);
- template.find('.name a').attr('href' ,'http://twitter.com/'+user.screen_name);
+ template.find('.name a').attr('href' ,'http://friendagon.com/'+user.screen_name + '/');
template.find('img').attr('src' ,user.profile_image_url);
template.find('.following .count').html(user.friends_count);
template.find('.followers .count').html(user.followers_count);
@@ -22,6 +22,9 @@ var setProfile = function(user){
profile.find('.followbacks .count').html(tw.reciprications.length);
profile.find('.fans .count').html(tw.fans.length);
profile.find('.nofollowback .count').html(tw.toogoodforme.length);
+ profile.find('.details .followbackpercent .count').html(tw.followbackprobability + '%');
+ profile.find('.details .topsyinfluence .count').html(tw.topsyinfluence + '');
+ profile.find('.details').slideDown('slow');
};
var unfollow = function(screenname,callback){
View
13 prod-buildout/js/tweetwrap.js
@@ -12,6 +12,8 @@ var tweetWrap = function (screenname, initcallback, notifyprogress, abandon){
this.userscreenname = screenname;
this.notifyprogresscallback = notifyprogress;
this.abandoncallback = abandon;
+ this.followbackprobability = 0;
+ this.topsyinfluence = 0;
var progress = 0;
@@ -90,6 +92,7 @@ var tweetWrap = function (screenname, initcallback, notifyprogress, abandon){
}
});
that.notifyprogresscallback(100,"All Done!");
+ that.followbackprobability = Math.round((that.reciprications.length / that.followers.length) * 100);
initializationcallback();
}
@@ -132,7 +135,17 @@ var tweetWrap = function (screenname, initcallback, notifyprogress, abandon){
}
+ var getTopsyInfluence = function (screenname, callback){
+ $.getJSON('http://otter.topsy.com/authorinfo.json?&url=http://twitter.com/'+screenname + '&amp;callback=?', callback);
+ }
+
var init = function(){
+ //do the topsy info separately and assume it will come back before everything else
+ getTopsyInfluence(that.userscreenname, function(data){
+ that.topsyinfluence = data.response['influence_level'];
+ });
+
+ //now get the real information
getUserDetailByScreenName(that.userscreenname,function(data){
if(data.error){
that.abandoncallback(data.error);
View
12 static/js/friendpage.js
@@ -36,5 +36,17 @@ $(document).ready(function() {
$('.profile .nofollowback').addClass('selected');
});
+ $('.profile .details .follow').bind('click', function() {
+ follow(tw.userscreenname, function(){
+ $('.profile .details .follow').addClass('followeduser');
+ });
+ });
+
+ $('.profile .details .unfollow').bind('click', function() {
+ unfollow(tw.userscreenname, function(){
+ $('.profile .details .unfollow').addClass('unfolloweduser');
+ });
+ });
+
});
View
5 static/js/site.js
@@ -4,7 +4,7 @@ var tw;
var insertUser = function (user){
var template = $('.template').clone();
template.find('.name a').html(user.screen_name);
- template.find('.name a').attr('href' ,'http://twitter.com/'+user.screen_name);
+ template.find('.name a').attr('href' ,'http://friendagon.com/'+user.screen_name + '/');
template.find('img').attr('src' ,user.profile_image_url);
template.find('.following .count').html(user.friends_count);
template.find('.followers .count').html(user.followers_count);
@@ -22,6 +22,9 @@ var setProfile = function(user){
profile.find('.followbacks .count').html(tw.reciprications.length);
profile.find('.fans .count').html(tw.fans.length);
profile.find('.nofollowback .count').html(tw.toogoodforme.length);
+ profile.find('.details .followbackpercent .count').html(tw.followbackprobability + '%');
+ profile.find('.details .topsyinfluence .count').html(tw.topsyinfluence + '');
+ profile.find('.details').slideDown('slow');
};
var unfollow = function(screenname,callback){
View
13 static/js/tweetwrap.js
@@ -12,6 +12,8 @@ var tweetWrap = function (screenname, initcallback, notifyprogress, abandon){
this.userscreenname = screenname;
this.notifyprogresscallback = notifyprogress;
this.abandoncallback = abandon;
+ this.followbackprobability = 0;
+ this.topsyinfluence = 0;
var progress = 0;
@@ -90,6 +92,7 @@ var tweetWrap = function (screenname, initcallback, notifyprogress, abandon){
}
});
that.notifyprogresscallback(100,"All Done!");
+ that.followbackprobability = Math.round((that.reciprications.length / that.followers.length) * 100);
initializationcallback();
}
@@ -132,7 +135,17 @@ var tweetWrap = function (screenname, initcallback, notifyprogress, abandon){
}
+ var getTopsyInfluence = function (screenname, callback){
+ $.getJSON('http://otter.topsy.com/authorinfo.json?&url=http://twitter.com/'+screenname + '&amp;callback=?', callback);
+ }
+
var init = function(){
+ //do the topsy info separately and assume it will come back before everything else
+ getTopsyInfluence(that.userscreenname, function(data){
+ that.topsyinfluence = data.response['influence_level'];
+ });
+
+ //now get the real information
getUserDetailByScreenName(that.userscreenname,function(data){
if(data.error){
that.abandoncallback(data.error);
Please sign in to comment.
Something went wrong with that request. Please try again.