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

Adding story detail view to mobile web app.

Browse source
This commit is contained in:
Samuel Clay 2011-06-16 11:08:38 -04:00
parent 56e0ea5142
commit bf8eb9b1de
3 changed files with 73 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
media/css/mobile/mobile.css
View file

@ -22,14 +22,20 @@
}
#NB-feed-list .ui-li-count.ui-li-count-positive {
color: white;
background: #559F4D -webkit-gradient(linear, 0% 0%, 0% 100%, from(#559F4D), to(#3B7613));
background-color: #559F4D;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#559F4D), to(#3B7613));
background-image: -moz-linear-gradient(center bottom, #3B7613, #559F4D);
}
#NB-feed-list .ui-li-count.ui-li-count-neutral {
background: #F9C72A -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9C72A), to(#E4AB00));
background-color: #F9C72A;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9C72A), to(#E4AB00));
background-image: -moz-linear-gradient(center bottom, #E4AB00, #F9C72A);
}
#NB-feed-list .ui-li-count.ui-li-count-negative {
color: white;
background: #CC2A2E -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC2A2E), to(#9B181B));
background-color: #CC2A2E;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC2A2E), to(#9B181B));
background-image: -moz-linear-gradient(center bottom, #9B181B, #CC2A2E);
}
/* ============== */

58
media/js/mobile/newsblur/mobile_workspace.js
View file

@ -10,12 +10,14 @@
this.story_view = 'page';
this.pages = {
'feeds' : $('#NB-page-feeds'),
'stories' : $('#NB-page-stories')
'stories' : $('#NB-page-stories'),
'story' : $('#NB-page-story')
};
this.$s = {
$body: $('body'),
$feed_list: $('#NB-feed-list'),
$story_list: $('#NB-story-list')
$story_list: $('#NB-story-list'),
$story_detail: $('#NB-story')
};
this.flags = {
'feeds_loaded' : false
@ -152,14 +154,11 @@
make_story_title: function(story) {
var feed = this.model.get_feed(this.active_feed);
var score = NEWSBLUR.utils.compute_story_score(story);
var score_color = 'neutral';
if (score > 0) score_color = 'positive';
if (score < 0) score_color = 'negative';
var score_color = this.story_color(story);
return _.template('<li class="NB-story <%= story.read_status?"NB-read":"" %> NB-score-<%= score_color %>">\
<div class="ui-li-icon NB-icon-score"></div>\
<a href="#story">\
<a href="#story" data-story-id="<%= story.id %>">\
<div class="NB-story-date"><%= story.long_parsed_date %></div>\
<% if (story.story_authors) { %>\
<div class="NB-story-author"><%= story.story_authors %></div>\
@ -184,6 +183,44 @@
});
},
// ================
// = Story Detail =
// ================
load_story_detail: function(story_id) {
$.mobile.pageLoading();
var $story_detail_view = this.$s.$story_detail;
var story = this.model.get_story(story_id);
var $story = this.make_story_detail(story);
$story_detail_view.html($story);
$.mobile.pageLoading(true);
},
make_story_detail: function(story) {
var feed = this.model.get_feed(this.active_feed);
var score_color = this.story_color(story);
return _.template('<div class="NB-story-title"><%= story.story_title %></div>', {
story : story,
feed : feed,
score_color : score_color
});
},
// =====================
// = General Utilities =
// =====================
story_color: function(story) {
var score = NEWSBLUR.utils.compute_story_score(story);
var score_color = 'neutral';
if (score > 0) score_color = 'positive';
if (score < 0) score_color = 'negative';
return score_color;
},
// ==========
// = Events =
// ==========
@ -197,6 +234,13 @@
$.mobile.changePage('stories');
self.load_stories(feed_id);
});
$('#NB-stories-list').delegate('li', 'tap', function(e) {
var story_id = $(e.target).jqmData('story-id');
$.mobile.pageLoading();
$.mobile.changePage('story');
self.load_story_detail(story_id);
});
}
};

13
templates/mobile/mobile_workspace.xhtml
View file

@ -83,6 +83,19 @@
</div>
</div>
<div data-role="page" data-url="story" id="NB-page-story">
<div data-role="header">
<h1>Story</h1>
</div>
<div data-role="content">
<div id="NB-story"></div>
</div>
<div data-role="footer"> 1
<div data-role="button" class="ui-li-left">Previous</div>
<div data-role="button" class="ui-li-right">Next Unread</div>
</div>
</div>
<script>
$(document).bind('mobileinit', function() {