public-mirrors/NewsBlur-viq
1
0
Fork 0
mirror of https://github.com/viq/NewsBlur.git synced 2025-09-18 21:43:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixing follow buttons.

Browse source
This commit is contained in:
Samuel Clay 2013-01-22 12:43:04 -08:00
parent e67ffae5ca
commit 0478d00d00
7 changed files with 77 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
media/css/circular/css/social_page.css
View file

@ -490,88 +490,35 @@ blockquote {
padding-left: 0;
padding-right: 0;
}
.NB-banner .NB-button-following {
border: 1px solid #4388b5;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6bb1e0), color-stop(100%, #5aa1d8));
background-image: -webkit-linear-gradient(#6bb1e0, #5aa1d8);
background-image: -moz-linear-gradient(#6bb1e0, #5aa1d8);
background-image: -o-linear-gradient(#6bb1e0, #5aa1d8);
background-image: linear-gradient(#6bb1e0, #5aa1d8);
color: white;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
padding: 4px 12px;
font-size: 14px;
font-weight: normal;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
.NB-banner .NB-button-follow {
padding: 2px 0;
}
.NB-banner .NB-button-following:hover {
border: 1px solid #3573a5;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5aa1d8), color-stop(100%, #4d98d2));
background-image: -webkit-linear-gradient(#5aa1d8, #4d98d2);
background-image: -moz-linear-gradient(#5aa1d8, #4d98d2);
background-image: -o-linear-gradient(#5aa1d8, #4d98d2);
background-image: linear-gradient(#5aa1d8, #4d98d2);
}
.NB-banner .NB-button-following:active {
border: 1px solid #2b5c84;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d98d2), color-stop(100%, #4d98d2));
background-image: -webkit-linear-gradient(#4d98d2, #4d98d2);
background-image: -moz-linear-gradient(#4d98d2, #4d98d2);
background-image: -o-linear-gradient(#4d98d2, #4d98d2);
background-image: linear-gradient(#4d98d2, #4d98d2);
-webkit-box-shadow: inset 0px 0px 10px #1f74b8;
-moz-box-shadow: inset 0px 0px 10px #1f74b8;
box-shadow: inset 0px 0px 10px #1f74b8;
}
@media screen and (max-width: 480px) {
.NB-banner .NB-button-following {
font-size: 14px;
}
.NB-banner .NB-button-following {
padding: 2px 0;
}
/* ================ */
/* = Right banner = */
/* ================ */
.NB-banner-right {
z-index: 1;
vertical-align: middle;
padding: 0 0 6px 12px;
white-space: nowrap;
}
.NB-banner-right .NB-banner-stats {
.NB-banner-stats {
font-size: 14px;
font-weight: bold;
color: #a0a0a0;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
margin-top: 6px;
}
.NB-banner-right .NB-banner-stats .NB-banner-stat {
.NB-banner-stats .NB-banner-stat {
float: left;
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(255, 255, 255, 0.6);
padding: 6px 12px;
padding: 0 6px;
}
.NB-banner-right .NB-banner-stats .NB-banner-stat:first-child {
border-left: none;
.NB-banner-stats .NB-banner-stat:first-child {
padding-left: 0;
}
.NB-banner-right .NB-banner-stats .NB-banner-stat:last-child {
border-right: none;
}
.NB-banner-right .NB-banner-stats .NB-banner-stat b {
color: #333333;
display: block;
.NB-banner-stats .NB-banner-stat b {
color: gray;
margin: 0 0 2px;
font-size: 20px;
font-size: 16px;
}
.NB-shared-story {

49
media/css/circular/sass/social_page.scss
View file

@ -471,9 +471,9 @@ blockquote {
padding-right: 0;
}
.NB-button-follow {
padding: 2px 0;
}
.NB-button-following {
@include NB-blue-button;
padding: 2px 0;
}
}
@ -482,38 +482,25 @@ blockquote {
/* = Right banner = */
/* ================ */
.NB-banner-right {
z-index: 1;
vertical-align: middle;
padding: 0 0 6px 12px;
white-space: nowrap;
.NB-banner-stats {
font-size: 14px;
font-weight: bold;
color: $lighter-text-color;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
margin-top: 6px;
.NB-banner-stats {
font-size: 14px;
font-weight: bold;
color: $lighter-text-color;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
.NB-banner-stat {
float: left;
padding: 0 6px;
.NB-banner-stat {
float: left;
border-right: 1px solid rgba(0, 0, 0, .3);
border-left: 1px solid rgba(255, 255, 255, .6);
padding: 6px 12px;
&:first-child {
border-left: none;
padding-left: 0;
}
&:last-child {
border-right: none;
}
b {
color: $text-color;
display: block;
margin: 0 0 2px;
font-size: 20px;
}
&:first-child {
padding-left: 0;
}
b {
color: $light-text-color;
margin: 0 0 2px;
font-size: 16px;
}
}
}

16
media/js/newsblur/social_page/social_page.js
View file

@ -210,7 +210,11 @@ NEWSBLUR.Views.SocialPage = Backbone.View.extend({
if (data.follow_profile.requested_follow) {
message = 'Your request to follow ' + NEWSBLUR.Globals.blurblog_username + ' has been sent';
}
$button.html('Following').removeClass('NB-button-follow').addClass('NB-button-following');
$button.html('Following').removeClass('NB-button-follow')
.removeClass('NB-blue-button')
.addClass('NB-grey-button')
.addClass('NB-button-following');
this.$('.NB-stat-followers').html("<b>" + data.follow_profile.follower_count + "</b> " + Inflector.pluralize('follower', data.follow_profile.follower_count));
}, this));
},
@ -218,11 +222,11 @@ NEWSBLUR.Views.SocialPage = Backbone.View.extend({
var $button = this.$(".NB-button-following");
$button.html('Unfollowing...');
NEWSBLUR.assets.unfollow_user(NEWSBLUR.Globals.blurblog_user_id, _.bind(function(data) {
var message = 'You are now following ' + NEWSBLUR.Globals.blurblog_username;
if (data.follow_profile.requested_follow) {
message = 'Your request to follow ' + NEWSBLUR.Globals.blurblog_username + ' has been sent';
}
$button.html('Follow').removeClass('NB-button-following').addClass('NB-button-follow');
$button.html('Follow ' + NEWSBLUR.Globals.blurblog_username).removeClass('NB-button-following')
.removeClass('NB-grey-button')
.addClass('NB-button-follow')
.addClass('NB-blue-button');
this.$('.NB-stat-followers').html("<b>" + data.unfollow_profile.follower_count + "</b> " + Inflector.pluralize('follower', data.unfollow_profile.follower_count));
}, this));
}

7
media/js/newsblur/social_page/social_page_assets.js
View file

@ -183,7 +183,14 @@ NEWSBLUR.SocialPageAssets = Backbone.Router.extend({
this.make_request('/social/follow', {'user_id': user_id}, callback, callback, {
request_type: 'POST'
});
},
unfollow_user: function(user_id, callback) {
this.make_request('/social/unfollow', {'user_id': user_id}, callback, callback, {
request_type: 'POST'
});
}
});

5
media/js/newsblur/social_page/social_page_comments.js
View file

@ -2,7 +2,9 @@ NEWSBLUR.Views.SocialPageComments = Backbone.View.extend({
events: {
"click .NB-story-comment-reply-button" : "check_reply_or_login",
"focus .NB-story-comment-input" : "check_comment_or_login",
"click .NB-story-comment-input" : "check_comment_or_login",
"click .NB-story-comment-save" : "check_comment_or_login",
"click .NB-story-comment-like" : "check_comment_or_login",
"click .NB-story-comments-public-teaser": "load_public_story_comments"
},
@ -51,7 +53,6 @@ NEWSBLUR.Views.SocialPageComments = Backbone.View.extend({
},
check_comment_or_login: function(e) {
console.log(['check_comment_or_login', e, NEWSBLUR.Globals.is_authenticated, this.page_view.login_view]);
if (!NEWSBLUR.Globals.is_authenticated) {
e.preventDefault();
e.stopPropagation();

30
media/js/newsblur/social_page/social_page_login_view.js
View file

@ -16,11 +16,11 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
},
setup_login_popover: function() {
this.$(".NB-circular-tab .NB-tab-inner").clickover({
this.login_popover = this.$(".NB-circular-tab").clickover({
html: true,
placement: "bottom",
content: this.$(".NB-circular-tab .NB-popover-content").html(),
title: this.$(".NB-circular-tab .NB-popover-title").html(),
content: this.$(".NB-circular-popover-content").html(),
title: this.$(".NB-circular-popover-title").html(),
onShown: _.bind(this.on_show_popover, this),
onHidden: _.bind(this.on_hide_popover, this)
});
@ -28,13 +28,21 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
on_show_popover: function() {
this.$('.NB-circular-tab').addClass('NB-active');
this.$('input[name=login_username]').focus();
this.$('.popover input[name=login_username]').focus();
},
on_hide_popover: function() {
this.$('.NB-circular-tab').removeClass('NB-active');
},
toggle_login_dialog: function(options) {
options = options || {};
_.defer(_.bind(function() {
this.login_popover.data('clickover').clickery();
}, this));
},
// ==========
// = Events =
// ==========
@ -63,8 +71,8 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
login: function() {
this.clean();
var username = this.$('input[name=login_username]').val();
var password = this.$('input[name=login_password]').val();
var username = this.$('.popover input[name=login_username]').val();
var password = this.$('.popover input[name=login_password]').val();
NEWSBLUR.assets.login(username, password, _.bind(this.post_login, this), _.bind(this.login_error, this));
},
@ -95,9 +103,9 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
signup: function() {
this.clean();
var username = this.$('input[name=signup_username]').val();
var email = this.$('input[name=signup_email]').val();
var password = this.$('input[name=signup_password]').val();
var username = this.$('.popover input[name=signup_username]').val();
var email = this.$('.popover input[name=signup_email]').val();
var password = this.$('.popover input[name=signup_password]').val();
NEWSBLUR.assets.signup(username, email, password, _.bind(this.post_signup, this), _.bind(this.signup_error, this));
},
@ -122,7 +130,7 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
this.$(".popover").removeClass("NB-show-signup")
.removeClass("NB-show-login")
.addClass("NB-show-signup");
this.$('input[name=signup_username]').focus();
this.$('.popover input[name=signup_username]').focus();
},
switch_login: function() {
@ -130,7 +138,7 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
this.$(".popover").removeClass("NB-show-signup")
.removeClass("NB-show-login")
.addClass("NB-show-login");
this.$('input[name=login_username]').focus();
this.$('.popover input[name=login_username]').focus();
}
});

20
templates/social/social_page.xhtml
View file

@ -136,7 +136,7 @@
Log in
</div>
<div class="NB-popover-title">
<div class="NB-circular-popover-title NB-hidden">
<div class="NB-login">
<input type="text" placeholder="Username or email" name="login_username" class="NB-input" />
<input placeholder="Password" type="password" name="login_password" class="NB-input" />
@ -149,12 +149,12 @@
<div class="NB-signup-button NB-blue-button">Create account</div>
</div>
</div>
<div class="NB-popover-content">
<div class="NB-circular-popover-content NB-hidden">
<div class="NB-switch-button NB-switch-signup-button NB-grey-button">Create an account</div>
<div class="NB-switch-button NB-switch-login-button NB-grey-button">Log in</div>
<div class="NB-arrow"></div>
</div>
</li>
</li>
{% endif %}
</ul>
</div>
@ -173,10 +173,10 @@
<div class="NB-banner-following-user">
{% if user_following_social_profile %}
{% if social_profile.user_id != user.pk %}
<div class="NB-button NB-button-following">Following</div>
<div class="NB-button NB-grey-button NB-button-following">Following</div>
{% endif %}
{% else %}
<div class="NB-button NB-button-follow">Follow {{ social_profile.username }}</div>
<div class="NB-button NB-blue-button NB-button-follow">Follow {{ social_profile.username }}</div>
{% endif %}
</div>
{% endif %}
@ -191,15 +191,13 @@
{{ social_profile.bio }}
</div>
{% endif %}
<div class="NB-banner-stats">
<div class="NB-banner-stat"><b>{{ social_profile.shared_stories_count }}</b> {{ social_profile.shared_stories_count|pluralize:"story,stories" }}</div>
<div class="NB-banner-stat"><b>&middot;</b></div>
<div class="NB-banner-stat NB-stat-followers"><b>{{ social_profile.follower_count }}</b> follower{{ social_profile.follower_count|pluralize }}</div>
</div>
</div>
</td>
<td class="NB-banner-right">
<div class="NB-banner-stats">
<div class="NB-banner-stat"><b>{{ social_profile.shared_stories_count }}</b> {{ social_profile.shared_stories_count|pluralize:"story,stories" }}</div>
<div class="NB-banner-stat"><b>{{ social_profile.follower_count }}</b> follower{{ social_profile.follower_count|pluralize }}</div>
</div>
</td>
</tr>
</table>
<div class="NB-banner-feed">