Adding paging to tutorial. Also adding the tutorial dashboard image. Colorful.

This commit is contained in:
Samuel Clay 2011-05-11 12:27:28 -04:00
parent 53d9724e0e
commit 03d370b040
7 changed files with 81 additions and 13 deletions

View file

@ -20,7 +20,7 @@ def load_recommended_feed(request):
recommended_feeds = RecommendedFeed.objects.filter(is_public=True, approved_date__lte=now)[page:page+2]
if recommended_feeds and request.user.is_authenticated():
usersub = UserSubscription.objects.filter(user=user, feed=recommended_feeds[0].feed)
if refresh != 'true':
if refresh != 'true' and page > 0:
logging.user(request.user, "~FBBrowse recommended feed: ~SBPage #%s" % (page+1))
recommended_feed = recommended_feeds and recommended_feeds[0]

View file

@ -36,6 +36,7 @@ a img {
.NB-raquo {
font-size: 18px;
vertical-align: baseline;
line-height: 12px;
}
/* ==================== */
@ -2880,7 +2881,7 @@ a.NB-splash-link:hover {
margin-bottom: 16px;
}
.NB-add .NB-add-add-folder input[type=text] {
width: 380px;
width: 376px;
}
.NB-add .NB-folder-icon {
@ -4485,6 +4486,14 @@ background: transparent;
margin-top: 8px;
}
/* ================== */
/* = Tutorial Modal = */
/* ================== */
.NB-modal-tutorial .NB-modal-submit .NB-modal-submit-button {
float: right;
}
/* ========================= */
/* = Feed Exceptions Modal = */
/* ========================= */

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

View file

@ -7,6 +7,8 @@ NEWSBLUR.Modal = function(options) {
};
NEWSBLUR.Modal.prototype = {
runner: function() {},
open_modal: function() {
var self = this;

View file

@ -69,7 +69,7 @@ NEWSBLUR.ReaderAddFeed.prototype = {
'Import from Google Reader',
$.make('img', { className: 'NB-add-google-reader-arrow', src: NEWSBLUR.Globals['MEDIA_URL']+'img/icons/silk/arrow_right.png' })
]),
(NEWSBLUR.Globals.is_authenticated && _.size(this.model.feeds) && $.make('div', { className: 'NB-add-danger' }, [
$.make('div', { className: 'NB-add-danger' }, (NEWSBLUR.Globals.is_authenticated && _.size(this.model.feeds) && [
$.make('img', { src: NEWSBLUR.Globals['MEDIA_URL']+'img/icons/silk/server_go.png' }),
'This will erase all existing feeds and folders.'
]))
@ -90,7 +90,7 @@ NEWSBLUR.ReaderAddFeed.prototype = {
return false;
})
]),
(NEWSBLUR.Globals.is_authenticated && _.size(this.model.feeds) && $.make('div', { className: 'NB-add-danger' }, [
$.make('div', { className: 'NB-add-danger' }, (NEWSBLUR.Globals.is_authenticated && _.size(this.model.feeds) && [
$.make('img', { src: NEWSBLUR.Globals['MEDIA_URL']+'img/icons/silk/server_go.png' }),
'This will erase all existing feeds and folders.'
])),

View file

@ -2,14 +2,20 @@ NEWSBLUR.ReaderTutorial = function(options) {
var defaults = {};
_.bindAll(this, 'close');
this.options = $.extend({}, defaults, options);
this.options = $.extend({
'page_number': 1
}, defaults, options);
this.model = NEWSBLUR.AssetModel.reader();
this.page_number = this.options.page_number;
this.runner();
};
NEWSBLUR.ReaderTutorial.prototype = _.extend({}, NEWSBLUR.Modal.prototype, {
NEWSBLUR.ReaderTutorial.prototype = new NEWSBLUR.Modal;
NEWSBLUR.ReaderTutorial.prototype.constructor = NEWSBLUR.ReaderTutorial;
_.extend(NEWSBLUR.ReaderTutorial.prototype, {
runner: function() {
this.make_modal();
@ -21,12 +27,59 @@ NEWSBLUR.ReaderTutorial.prototype = _.extend({}, NEWSBLUR.Modal.prototype, {
make_modal: function() {
var self = this;
this.$modal = $.make('div', { className: 'NB-modal-email NB-modal' }, [
this.$modal = $.make('div', { className: 'NB-modal-tutorial NB-modal' }, [
$.make('span', { className: 'NB-modal-loading NB-spinner'}),
$.make('h2', { className: 'NB-modal-title' }, 'Learn to use NewsBlur')
$.make('h2', { className: 'NB-modal-title' }, 'Learn to use NewsBlur'),
$.make('div', { className: 'NB-page NB-page-1' }, [
'Page 1'
]),
$.make('div', { className: 'NB-page NB-page-2' }, [
'Page 2'
]),
$.make('div', { className: 'NB-modal-submit' }, [
$.make('div', { className: 'NB-page-next NB-modal-submit-button NB-modal-submit-green NB-modal-submit-save' }, [
$.make('span', { className: 'NB-tutorial-next-page-text' }, 'Next Page '),
$.make('span', { className: 'NB-raquo' }, '»')
]),
$.make('div', { className: 'NB-page-previous NB-modal-submit-button NB-modal-submit-close NB-modal-submit-save' }, [
$.make('span', { className: 'NB-raquo' }, '«'),
' Previous Page'
])
])
]);
},
// ==========
// = Paging =
// ==========
next_page: function() {
return this.page(this.page_number+1);
},
previous_page: function() {
return this.page(this.page_number-1);
},
page: function(page_number) {
if (page_number == null) {
return this.page_number;
}
var page_count = $('.NB-page', this.$modal).length;
this.page_number = page_number;
if (page_number == page_count) {
$('.NB-tutorial-next-page-text', this.$modal).text('Finish Tutorial');
} else if (page_number > page_count) {
return this.close();
} else {
$('.NB-tutorial-next-page-text', this.$modal).text('Next Page');
}
$('.NB-page', this.$modal).css({'display': 'none'});
$('.NB-page-'+this.page_number, this.$modal).css({'display': 'none'});
},
// ===========
// = Actions =
// ===========
@ -34,11 +87,15 @@ NEWSBLUR.ReaderTutorial.prototype = _.extend({}, NEWSBLUR.Modal.prototype, {
handle_click: function(elem, e) {
var self = this;
$.targetIs(e, { tagSelector: '.NB-modal-submit-save' }, function($t, $p) {
$.targetIs(e, { tagSelector: '.NB-page-next' }, function($t, $p) {
e.preventDefault();
self.save();
return false;
self.next_page();
});
$.targetIs(e, { tagSelector: '.NB-page-previous' }, function($t, $p) {
e.preventDefault();
self.previous_page();
});
}

View file

@ -332,7 +332,7 @@ $(document).ready(function() {
</h5>
<div class="NB-module-tutorial NB-module-account NB-last {% if user_profile.hide_tutorial %}NB-hidden{% endif %}">
<div class="NB-module-account-image">
<img src="{{ MEDIA_URL }}/img/reader/account_trainer.jpg" />
<img src="{{ MEDIA_URL }}/img/reader/module_tutorial.jpg" />
</div>
<h3 class="NB-module-content-header">
<span class="NB-module-content-subtitle">