Almost where I want the follow button to be, but not quite

This commit is contained in:
Victoria Wang 2014-10-14 22:42:13 -07:00
parent 8665e70be1
commit 5011d83436
4 changed files with 42 additions and 19 deletions

View file

@ -1,14 +1,11 @@
var Site = {
toggleFollow: function(siteId, csrfToken) {
var link = $('a#followLink')
var span = $('a#followLink span')
$.post('/site/'+siteId+'/toggle_follow', {csrf_token: csrfToken}, function(res) {
if(res.result == "followed") {
span.text('Unfollow')
link.removeClass('follow')
link.addClass('is-following')
} else if(res.result == 'unfollowed') {
span.text('Follow')
link.addClass('follow')
link.removeClass('is-following')
}
})
}

View file

@ -484,7 +484,7 @@ a.tag:hover {
text-decoration: none;
background: #FFEE8A;
}
.following {
.follower-list {
width: 100%;
float: left;
margin-bottom: 2em;
@ -669,18 +669,40 @@ a.tag:hover {
.interior .header-Outro .stats .stat.tips {
width: 60px;
}
.btn-Action.follow span {
background-image: url(/img/follow.png);
padding-left: 22px;
#followLink {
.follow {
display: inline;
}
.following {
display: none;
}
.unfollow {
display: none;
}
}
.btn-Action.tip span {
background-image: url(/img/tip.png);
padding-left: 26px;
background-position-y: -1px;
#followLink.is-following {
width: 8.7em;
.follow {
display: none;
}
.following {
display: inline;
}
.unfollow {
display: none;
}
}
.btn-Action.share span {
background-image: url(/img/share.png);
padding-left: 26px;
#followLink.is-following:hover {
.follow {
display: none;
}
.following {
display: none;
}
.unfollow {
display: inline;
}
}
.col-33 .stats .stat {
margin-bottom: .4em;

View file

@ -15,7 +15,7 @@
<% site_follows = site.follows %>
<% if (!is_current_site && !site_follows.empty?) || is_current_site %>
<h3>Followers</h3>
<div class="following">
<div class="follower-list">
<% if site_follows.empty? %>
No followers yet.
<% else %>

View file

@ -34,9 +34,13 @@
<% if current_site && current_site != site %>
<% is_following = current_site.is_following?(site) %>
<a id="followLink" href="#" onclick="Site.toggleFollow(<%= site.id %>, '<%= csrf_token %>'); return false" class="btn-Action <%= is_following ? '' : 'follow' %>">
<span><%= is_following ? 'Unfollow' : 'Follow' %></span>
<a id="followLink" href="#" onclick="Site.toggleFollow(<%= site.id %>, '<%= csrf_token %>'); return false" class="btn-Action <%= is_following ? 'is-following' : '' %>">
<span class="unfollow"><i class="fa fa-times"></i>Unfollow</span>
<span class="following"><i class="fa fa-check"></i>Following</span>
<span class="follow"><i class="fa fa-plus"></i>Follow</span>
</a>
<!-- <a href="#" class="btn-Action tip"><span>Tip</span></a> -->
<% end %>