From 883946ea49e39965694f8ece09bb33b3b1b47c2f Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Thu, 16 Jun 2011 23:45:41 -0400 Subject: [PATCH] Finishing up the story detail page. Need to hook up the next/previous buttons, add paging, add an intelligence slider, and mark read and mobile will be done for v1. --- media/css/mobile/mobile.css | 227 ++++++++++++++----- media/js/mobile/newsblur/mobile_workspace.js | 71 +++++- media/js/newsblur/reader.js | 86 +------ media/js/newsblur/reader_utils.js | 102 +++++++-- templates/mobile/mobile_workspace.xhtml | 15 +- 5 files changed, 327 insertions(+), 174 deletions(-) diff --git a/media/css/mobile/mobile.css b/media/css/mobile/mobile.css index ff4a0c39b..06917f097 100644 --- a/media/css/mobile/mobile.css +++ b/media/css/mobile/mobile.css @@ -1,16 +1,80 @@ +/* ========== */ +/* = Global = */ +/* ========== */ + +.NB-favicon { + width: 16px; + height: 16px; + vertical-align: text-top; +} +.NB-story-tags { + overflow: hidden; + line-height: 12px; + height: 14px; + margin: 0 0 6px 0; +} +.NB-story-tag { + float: left; + font-weight: normal; + font-size: 9px; + padding: 0px 4px 1px; + margin: 0 2px 2px; + background-color: #E3DFD4; + color: #878787; + text-shadow: 0 1px 0 #E9E9E9; + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; +} +.NB-story-author { + color: #969696; + font-size: 10px; + text-transform: uppercase; + margin: 0 16px 8px 0; + text-shadow: 0 1px 0 #F9F9F9; + float: left; +} +.NB-story-date { + float: right; + font-size: 11px; + color: #252D6C; +} +.NB-story .NB-icon-score { + margin-top: 12px; + height: 16px; + width: 16px; + left: 4px; + top: 17px; +} +.NB-story.NB-read .NB-icon-score { + opacity: .2; +} +.NB-story.NB-score-positive .NB-icon-score { + background: transparent url('../../img/icons/silk/bullet_green.png') no-repeat 0 0; +} +.NB-story.NB-score-neutral .NB-icon-score { + background: transparent url('../../img/icons/silk/bullet_yellow.png') no-repeat 0 0; +} +.NB-story.NB-score-negative .NB-icon-score { + background: transparent url('../../img/icons/silk/bullet_red.png') no-repeat 0 0; +} +.NB-story .NB-story-title { + clear: left; +} + /* ============= */ /* = Feed List = */ /* ============= */ +#NB-feed-list a { + padding-left: 36px; + padding-right: 36px; +} #NB-feed-list .ui-li-icon { width: 16px; height: 16px; margin-top: -2px; } - -#NB-feed-list a { - padding-right: 32px; -} #NB-feed-list .ui-li-count { position: static; float: right; @@ -43,63 +107,8 @@ /* ============== */ #NB-story-list .NB-story a { - padding-right: 42px; padding-left: 24px; -} -#NB-story-list .NB-story .NB-icon-score { - margin-top: 12px; - height: 16px; - width: 16px; - left: 4px; - top: 17px; -} -#NB-story-list .NB-story.NB-read .NB-icon-score { - opacity: .2; -} -#NB-story-list .NB-story.NB-score-positive .NB-icon-score { - background: transparent url('../../img/icons/silk/bullet_green.png') no-repeat 0 0; -} -#NB-story-list .NB-story.NB-score-neutral .NB-icon-score { - background: transparent url('../../img/icons/silk/bullet_yellow.png') no-repeat 0 0; -} -#NB-story-list .NB-story.NB-score-negative .NB-icon-score { - background: transparent url('../../img/icons/silk/bullet_red.png') no-repeat 0 0; -} -#NB-story-list .NB-story-author { - color: #969696; - font-size: 10px; - text-transform: uppercase; - margin: 0 16px 8px 0; - text-shadow: 0 1px 0 #F9F9F9; - float: left; -} -#NB-story-list .NB-story-tags { - overflow: hidden; - line-height: 12px; - height: 14px; - margin: 0 0 6px 0; -} -#NB-story-list .NB-story-tag { - float: left; - font-weight: normal; - font-size: 9px; - padding: 0px 4px 1px; - margin: 0 2px 2px; - background-color: #E3DFD4; - color: #878787; - text-shadow: 0 1px 0 #E9E9E9; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; -} -#NB-story-list .NB-story-date { - float: right; - font-size: 11px; - color: #252D6C; -} -#NB-story-list .NB-read .NB-story-date { - color: #6D6D6D; - font-weight: normal; + padding-right: 36px; } #NB-story-list .NB-story-feed { overflow: hidden; @@ -123,15 +132,107 @@ } #NB-story-list .NB-read .NB-story-feed .NB-story-feed-title { color: #7C7C7C; - font-weight: normal; } #NB-story-list .NB-story .NB-story-title { text-shadow: 0 1px 0 #F3F3F3; white-space: normal; font-weight: bold; - clear: left; } -#NB-story-list .NB-story.NB-read .NB-story-title { +#NB-story-list .NB-read .NB-story-title { font-weight: normal; +} +#NB-story-list .NB-read .NB-story-date { color: #6D6D6D; + font-weight: normal; +} + + +/* ================ */ +/* = Story Detail = */ +/* ================ */ + +#NB-page-story .ui-content { + padding: 0; +} +#NB-page-story .ui-header { + padding: 2px 0; + color: white; + font-size: 13px; + text-shadow: 1px 1px 0 #000; +} +#NB-page-story .ui-header.NB-inverse { + color: black; + text-shadow: 1px 1px 0 #E0E0E0; +} +#NB-page-story .ui-title { + text-overflow: ellipsis; + white-space: nowrap; +} +#NB-page-story .ui-title .feed_title { +} +#NB-page-story .NB-favicon { + margin-right: 4px; +} +#NB-story { + background-color: white; +} +#NB-story .NB-story-header { + font-weight: bold; + font-size: 16px; + padding: 8px 24px 8px 24px; + background-color: #dadada; + background-image: -moz-linear-gradient(top, #EBEBEB, #CFCFCF); /* FF3.6 */ + background-image: -ms-linear-gradient(top, #EBEBEB, #CFCFCF); /* IE10 */ + background-image: -o-linear-gradient(top, #EBEBEB, #CFCFCF); /* Opera 11.10+ */ + background-image: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#CFCFCF)); /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, #EBEBEB, #CFCFCF); /* Chrome 10+, Saf5.1+ */ + background-image: linear-gradient(top, #EBEBEB, #CFCFCF); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#CFCFCF'); /* IE6–IE9 */ + + border-bottom: 1px solid #ADADAD; + position: relative; + overflow: hidden; +} +#NB-story .NB-story-header a { + text-decoration: none; +} +#NB-story .NB-story-title { + color: #303030; +} +#NB-story .NB-story-content { + text-shadow: none; + padding: 12px 24px; + color: #2b2b2b; + font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; + font-size: 12px; + line-height: 1.5em; +} +#NB-story .NB-story-content p { + clear: both; +} +#NB-story .NB-story-content blockquote { + background-color: #F0F0F0; + border-left: 1px solid #9B9B9B; + padding: .5em 2em; + margin: 0px; +} +#NB-story .NB-story-content img { + max-width: 100%; +} + +#NB-page-story .NB-icon-score { + margin-top: 12px; + height: 16px; + width: 16px; + left: 4px; + top: 17px; +} +#NB-page-story.NB-score-positive .NB-icon-score { + background: transparent url('../../img/icons/silk/bullet_green.png') no-repeat 0 0; +} +#NB-page-story.NB-score-neutral .NB-icon-score { + background: transparent url('../../img/icons/silk/bullet_yellow.png') no-repeat 0 0; +} +#NB-page-story.NB-score-negative .NB-icon-score { + background: transparent url('../../img/icons/silk/bullet_red.png') no-repeat 0 0; } \ No newline at end of file diff --git a/media/js/mobile/newsblur/mobile_workspace.js b/media/js/mobile/newsblur/mobile_workspace.js index 2f8d6e175..e68087a22 100644 --- a/media/js/mobile/newsblur/mobile_workspace.js +++ b/media/js/mobile/newsblur/mobile_workspace.js @@ -100,7 +100,7 @@ var $feed = _.template('\
  • \ - \ + \ <% if (feed.ps) { %>\ <%= feed.ps %>\ <% } %>\ @@ -158,7 +158,7 @@ return _.template('
  • NB-score-<%= score_color %>">\
    \ -     \ + \
    <%= story.long_parsed_date %>
    \ <% if (story.story_authors) { %>\
    <%= story.story_authors %>
    \ @@ -191,21 +191,67 @@ $.mobile.pageLoading(); var $story_detail_view = this.$s.$story_detail; var story = this.model.get_story(story_id); + var score_color = this.story_color(story); var $story = this.make_story_detail(story); - + this.colorize_story_title(story); + $('.ul-li-right', this.pages.story).jqmData('icon', 'NB-'+score_color); $story_detail_view.html($story); $.mobile.pageLoading(true); + NEWSBLUR.log(['load_story_detail', story_id, story, this.pages.story, $('.ul-li-right', this.pages.story), score_color]); }, make_story_detail: function(story) { var feed = this.model.get_feed(this.active_feed); var score_color = this.story_color(story); - return _.template('
    <%= story.story_title %>
    ', { - story : story, - feed : feed, - score_color : score_color + var $story = _.template('
    NB-score-<%= score_color %>">\ +
    \ +
    \ +
    \ +
    <%= story.long_parsed_date %>
    \ + <% if (story.story_authors) { %>\ +
    <%= story.story_authors %>
    \ + <% } %>\ + <% if (story.story_tags && story.story_tags.length) { %>\ +
    \ + <% _.each(story.story_tags, function(tag) { %>\ +
    <%= tag %>
    \ + <% }); %>\ +
    \ + <% } %>\ +     \ +
    <%= story.story_title %>
    \ +     \ +
    \ +
    <%= story.story_content %>
    \ +
    ', { + story : story, + feed : feed, + score_color : score_color }); + + return $story; + }, + + colorize_story_title: function() { + var feed = this.model.get_feed(this.active_feed); + $('.ui-header', this.pages.story) + .css('background-image', NEWSBLUR.utils.generate_gradient(feed, 'webkit')) + .css('background-image', NEWSBLUR.utils.generate_gradient(feed, 'moz')) + .css('borderBottom', NEWSBLUR.utils.generate_gradient(feed, 'border')) + .css('borderTop', NEWSBLUR.utils.generate_gradient(feed, 'border')) + .toggleClass('NB-inverse', NEWSBLUR.utils.is_feed_floater_gradient_light(feed)); + + var $feed = _.template('
    \ + \ + \ + <%= feed.feed_title %>\ + \ +
    ', { + feed : feed + }); + + $('.ui-title', this.pages.story).html($feed); }, // ===================== @@ -228,15 +274,18 @@ bind_clicks: function() { var self = this; - $('#NB-feed-list').delegate('li', 'tap', function(e) { - var feed_id = $(e.target).jqmData('feed-id'); + $('#NB-feed-list').delegate('li a', 'tap', function(e) { + e.preventDefault(); + var feed_id = $(e.currentTarget).jqmData('feed-id'); $.mobile.pageLoading(); $.mobile.changePage('stories'); self.load_stories(feed_id); }); - $('#NB-stories-list').delegate('li', 'tap', function(e) { - var story_id = $(e.target).jqmData('story-id'); + $('#NB-story-list').delegate('li a', 'tap', function(e) { + e.preventDefault(); + NEWSBLUR.log(['story tap', e, e.target]); + var story_id = $(e.currentTarget).jqmData('story-id'); $.mobile.pageLoading(); $.mobile.changePage('story'); self.load_story_detail(story_id); diff --git a/media/js/newsblur/reader.js b/media/js/newsblur/reader.js index 4b4c6d482..0ed0390c0 100644 --- a/media/js/newsblur/reader.js +++ b/media/js/newsblur/reader.js @@ -2559,82 +2559,6 @@ return $story_title; }, - is_feed_floater_gradient_light: function(feed) { - if (!feed) return false; - var color = feed.favicon_color; - if (!color) return false; - - var r = parseInt(color.substr(0, 2), 16) / 255.0; - var g = parseInt(color.substr(2, 2), 16) / 255.0; - var b = parseInt(color.substr(4, 2), 16) / 255.0; - - return $.textColor({r: r, g: g, b: b}) != 'white'; - }, - - generate_gradient: function(feed, type) { - if (!feed) return ''; - var color = feed.favicon_color; - if (!color) return ''; - - var r = parseInt(color.substr(0, 2), 16); - var g = parseInt(color.substr(2, 2), 16); - var b = parseInt(color.substr(4, 2), 16); - - if (type == 'border') { - return [ - '1px solid rgb(', - [ - parseInt(r*(6/8), 10), - parseInt(g*(6/8), 10), - parseInt(b*(6/8), 10) - ].join(','), - ')' - ].join(''); - } else if (type == 'webkit') { - return [ - '-webkit-gradient(', - 'linear,', - 'left bottom,', - 'left top,', - 'color-stop(0.06, rgba(', - [ - r, - g, - b, - 255 - ].join(','), - ')),', - 'color-stop(0.84, rgba(', - [ - r+35, - g+35, - b+35, - 255 - ].join(','), - ')))' - ].join(''); - } else if (type == 'moz') { - return [ - '-moz-linear-gradient(', - 'center bottom,', - 'rgb(', - [ - r, - g, - b - ].join(','), - ') 6%,', - 'rgb(', - [ - r+35, - g+35, - b+35 - ].join(','), - ') 84%)' - ].join(''); - } - }, - story_titles_clear_loading_endbar: function() { var $story_titles = this.$s.$story_titles; @@ -3176,11 +3100,11 @@ $.make('span', { className: 'feed_title' }, feed.feed_title) ]) ) - ]).css('background-image', this.generate_gradient(feed, 'webkit')) - .css('background-image', this.generate_gradient(feed, 'moz')) - .css('borderBottom', this.generate_gradient(feed, 'border')) - .css('borderTop', this.generate_gradient(feed, 'border')) - .toggleClass('NB-inverse', this.is_feed_floater_gradient_light(feed)), + ]).css('background-image', NEWSBLUR.utils.generate_gradient(feed, 'webkit')) + .css('background-image', NEWSBLUR.utils.generate_gradient(feed, 'moz')) + .css('borderBottom', NEWSBLUR.utils.generate_gradient(feed, 'border')) + .css('borderTop', NEWSBLUR.utils.generate_gradient(feed, 'border')) + .toggleClass('NB-inverse', NEWSBLUR.utils.is_feed_floater_gradient_light(feed)), $.make('div', { className: 'NB-feed-story-header-info' }, [ (story.story_authors && this.make_story_feed_author(story)), diff --git a/media/js/newsblur/reader_utils.js b/media/js/newsblur/reader_utils.js index bc465f342..5b3afb4e7 100644 --- a/media/js/newsblur/reader_utils.js +++ b/media/js/newsblur/reader_utils.js @@ -1,19 +1,95 @@ NEWSBLUR.utils = { - compute_story_score: function(story) { - var score = 0; - var score_max = Math.max(story.intelligence['title'], - story.intelligence['author'], - story.intelligence['tags']); - var score_min = Math.min(story.intelligence['title'], - story.intelligence['author'], - story.intelligence['tags']); - if (score_max > 0) score = score_max; - else if (score_min < 0) score = score_min; + compute_story_score: function(story) { + var score = 0; + var score_max = Math.max(story.intelligence['title'], + story.intelligence['author'], + story.intelligence['tags']); + var score_min = Math.min(story.intelligence['title'], + story.intelligence['author'], + story.intelligence['tags']); + if (score_max > 0) score = score_max; + else if (score_min < 0) score = score_min; - if (score == 0) score = story.intelligence['feed']; + if (score == 0) score = story.intelligence['feed']; - return score; - } + return score; + }, + + generate_gradient: function(feed, type) { + if (!feed) return ''; + var color = feed.favicon_color; + if (!color) return ''; + + var r = parseInt(color.substr(0, 2), 16); + var g = parseInt(color.substr(2, 2), 16); + var b = parseInt(color.substr(4, 2), 16); + + if (type == 'border') { + return [ + '1px solid rgb(', + [ + parseInt(r*(6/8), 10), + parseInt(g*(6/8), 10), + parseInt(b*(6/8), 10) + ].join(','), + ')' + ].join(''); + } else if (type == 'webkit') { + return [ + '-webkit-gradient(', + 'linear,', + 'left bottom,', + 'left top,', + 'color-stop(0, rgba(', + [ + r, + g, + b, + 255 + ].join(','), + ')),', + 'color-stop(1, rgba(', + [ + r+35, + g+35, + b+35, + 255 + ].join(','), + ')))' + ].join(''); + } else if (type == 'moz') { + return [ + '-moz-linear-gradient(', + 'center bottom,', + 'rgb(', + [ + r, + g, + b + ].join(','), + ') 0%,', + 'rgb(', + [ + r+35, + g+35, + b+35 + ].join(','), + ') 100%)' + ].join(''); + } + }, + + is_feed_floater_gradient_light: function(feed) { + if (!feed) return false; + var color = feed.favicon_color; + if (!color) return false; + + var r = parseInt(color.substr(0, 2), 16) / 255.0; + var g = parseInt(color.substr(2, 2), 16) / 255.0; + var b = parseInt(color.substr(4, 2), 16) / 255.0; + + return $.textColor({r: r, g: g, b: b}) != 'white'; + } }; \ No newline at end of file diff --git a/templates/mobile/mobile_workspace.xhtml b/templates/mobile/mobile_workspace.xhtml index b562301c8..65d3a43d8 100644 --- a/templates/mobile/mobile_workspace.xhtml +++ b/templates/mobile/mobile_workspace.xhtml @@ -60,39 +60,42 @@
    -
    +

    {{ request.user.username }}

    -
    1 +
    12 sites
    + Sites

    Stories

    -
    1 +
    1
    12 sites
    + Stories

    Story

    -
    1 -
    Previous
    -
    Next Unread
    +
    + Previous +

    ...

    + Next Unread