From c35745736e7f8537cc84d04eb1a1e8a9424f3e94 Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Mon, 24 Jan 2011 23:50:38 -0500 Subject: [PATCH] Finally figured out how to make the feed title floater look good and match the iPhone's table group header. --- media/css/reader.css | 21 ++++++++++++--- media/js/newsblur/reader.js | 52 ++++++++++++++++++++++-------------- templates/reader/feeds.xhtml | 11 ++++---- 3 files changed, 55 insertions(+), 29 deletions(-) diff --git a/media/css/reader.css b/media/css/reader.css index aae766cb4..1d039c5bd 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -1399,9 +1399,8 @@ background: transparent; } #story_pane .NB-feed-story-view { - overflow-y: auto; - overflow-x: hidden; - position: absolute; + overflow: hidden; + position: relative; top: 0; left: 100% !important; width: 100%; @@ -1429,10 +1428,16 @@ background: transparent; /* ================================ */ .NB-feed-story-view-floater { - position: fixed; + position: absolute; top: 0; left: 0; + z-index: 1; width: 100%; + display: none; +} + +.NB-view-river .NB-feed-story-view-floater { + display: block; } /* ================= */ @@ -1458,6 +1463,10 @@ background: transparent; margin: 0; list-style: none; background-color: white; + position: relative; + overflow-x: hidden; + overflow-y: auto; + height: 100%; } #story_pane .NB-feed-story-header { @@ -1491,6 +1500,10 @@ background: transparent; padding: 2px 200px 2px 28px; position: relative; border-bottom: 1px solid #000; + z-index: 2; +} +#story_pane .NB-feed-story-header-feed.NB-floater { + z-index: 0; } #story_pane .NB-feed-story-feed { diff --git a/media/js/newsblur/reader.js b/media/js/newsblur/reader.js index 7d1f74930..5c6de9db8 100644 --- a/media/js/newsblur/reader.js +++ b/media/js/newsblur/reader.js @@ -16,6 +16,7 @@ $content_pane: $('.content-pane'), $story_pane: $('#story_pane .NB-story-pane-container'), $feed_view: $('.NB-feed-story-view'), + $feed_stories: $('.NB-feed-stories'), $feed_iframe: $('.NB-feed-iframe'), $story_iframe: $('.NB-story-iframe'), $intelligence_slider: $('.NB-intelligence-slider'), @@ -59,8 +60,8 @@ this.$s.$body.bind('click.reader', $.rescope(this.handle_clicks, this)); this.$s.$body.live('contextmenu.reader', $.rescope(this.handle_rightclicks, this)); this.$s.$story_titles.scroll($.rescope(this.handle_scroll_story_titles, this)); - this.$s.$feed_view.scroll($.rescope(this.handle_scroll_feed_view, this)); - this.$s.$feed_view.bind('mousemove', $.rescope(this.handle_mousemove_feed_view, this)); + this.$s.$feed_stories.scroll($.rescope(this.handle_scroll_feed_view, this)); + this.$s.$feed_stories.bind('mousemove', $.rescope(this.handle_mousemove_feed_view, this)); this.handle_keystrokes(); // ================== @@ -579,9 +580,6 @@ this.mark_story_title_as_selected($next_story_title); this.mark_story_as_read(story.id); this.mark_story_as_read_in_feed_view(story, {'animate': this.story_view == 'feed'}); - if (this.flags.river_view) { - this.show_correct_feed_in_feed_title_floater(story); - } } } }, @@ -629,7 +627,7 @@ if (this.story_view == 'page') { this.$s.$feed_iframe.scrollTo({top:dir+'='+scroll_height, left:'+=0'}, 150); } else if (this.story_view == 'feed') { - this.$s.$feed_view.scrollTo({top:dir+'='+scroll_height, left:'+=0'}, 150); + this.$s.$feed_stories.scrollTo({top:dir+'='+scroll_height, left:'+=0'}, 150); } }, @@ -1246,7 +1244,7 @@ this.active_story = null; this.$s.$story_titles.data('page', 0); this.$s.$story_titles.data('feed_id', null); - $('.NB-feed-stories', this.$s.$feed_view).remove(); + this.$s.$feed_stories.empty(); this.$s.$starred_header.removeClass('NB-selected'); this.$s.$river_header.removeClass('NB-selected'); $('.NB-selected', this.$s.$feed_list).removeClass('NB-selected'); @@ -1634,6 +1632,7 @@ scroll_to_story_in_story_feed: function(story, $story, skip_scroll) { var self = this; var $feed_view = this.$s.$feed_view; + var $feed_stories = this.$s.$feed_stories; if (!story || !$story || !$story.length) { $story = $('.story:first', $feed_view); @@ -1651,11 +1650,11 @@ this.model.preference('feed_view_single_story')) || (this.story_view == 'page' && !this.flags['page_view_showing_feed_view'])) { - $feed_view.scrollTo($story, 0, { axis: 'y', offset: 0 }); // Do this at view switch instead. + $feed_stories.scrollTo($story, 0, { axis: 'y', offset: 0 }); // Do this at view switch instead. } else if (this.story_view == 'feed' || this.flags['page_view_showing_feed_view']) { - $feed_view.scrollable().stop(); - $feed_view.scrollTo($story, 420, { axis: 'y', easing: 'easeInOutQuint', offset: 0, queue: false, onAfter: function() { + $feed_stories.scrollable().stop(); + $feed_stories.scrollTo($story, 420, { axis: 'y', easing: 'easeInOutQuint', offset: 0, queue: false, onAfter: function() { self.locks.scrolling = setTimeout(function() { self.flags.scrolling_by_selecting_story_title = false; }, 100); @@ -2586,6 +2585,7 @@ make_story_feed_entries: function(stories, first_load, options) { var $feed_view = this.$s.$feed_view; + var $stories = this.$s.$feed_stories; var self = this; var unread_view = this.model.preference('unread_view'); var $stories; @@ -2593,12 +2593,11 @@ options = options || {}; if (first_load) { - $stories = $.make('ul', { className: 'NB-feed-stories' }); - $('.NB-feed-stories', $feed_view).remove(); - $feed_view.scrollTop('0px'); + $stories.empty(); + $stories.scrollTop('0px'); $feed_view.append($stories); } else { - $stories = $('.NB-feed-stories', $feed_view); + $stories = this.$s.$feed_stories; if (!options.refresh_load) { $('.NB-feed-story-endbar', $feed_view).remove(); } @@ -2690,8 +2689,11 @@ show_correct_feed_in_feed_title_floater: function(story) { var $feed_floater = this.$s.$feed_floater; var $story = this.find_story_in_feed_view(story); + var $header = $('.NB-feed-story-header-feed', $story); - $feed_floater.empty().append($('.NB-feed-story-header-feed', $story).clone()); + $('.NB-floater').removeClass('NB-floater'); + $header.addClass('NB-floater'); + $feed_floater.empty().append($header.clone()); }, apply_story_styling: function(reset_stories) { @@ -2753,7 +2755,7 @@ this.flags['feed_view_positions_calculated'] = true; NEWSBLUR.log(['Feed view entirely loaded', this.model.stories.length + " stories"]); var $feed_view = this.$s.$feed_view; - var $stories = $('.NB-feed-stories', $feed_view); + var $stories = this.$s.$feed_stories; var $endbar = $.make('div', { className: 'NB-feed-story-endbar' }); $stories.find('.NB-feed-story-endbar').remove(); $stories.append($endbar); @@ -2900,14 +2902,14 @@ show_stories_preference_in_feed_view: function(is_creating) { var $feed_view = this.$s.$feed_view; var $feed_view_stories = $(".NB-feed-story", $feed_view); - var $stories = $('.NB-feed-stories', $feed_view); + var $stories = this.$s.$feed_stories; var story = this.active_story; if (story && this.model.preference('feed_view_single_story')) { // NEWSBLUR.log(['show_stories_preference_in_feed_view', is_creating, this.model.preference('feed_view_single_story'), $feed_view_stories.length + " stories"]); $stories.removeClass('NB-feed-view-feed').addClass('NB-feed-view-story'); $feed_view_stories.css({'display': 'none'}); - $feed_view.scrollTop('0px'); + this.$s.$feed_stories.scrollTop('0px'); var $current_story = this.get_current_story_from_story_titles($feed_view_stories); if ($current_story && $current_story.length) { $current_story.css({'display': 'block'}); @@ -4836,7 +4838,7 @@ && !this.flags['switching_to_feed_view'] && !this.flags.scrolling_by_selecting_story_title && this.story_view != 'story') { - var from_top = this.cache.mouse_position_y + this.$s.$feed_view.scrollTop(); + var from_top = this.cache.mouse_position_y + this.$s.$feed_stories.scrollTop(); var positions = this.cache.feed_view_story_positions_keys; var closest = $.closest(from_top, positions); var story = this.cache.feed_view_story_positions[positions[closest]]; @@ -4855,13 +4857,23 @@ !this.flags['switching_to_feed_view'] && !this.flags['scrolling_by_selecting_story_title'] && !this.model.preference('feed_view_single_story')) { - var from_top = this.cache.mouse_position_y + this.$s.$feed_view.scrollTop(); + var from_top = this.cache.mouse_position_y + this.$s.$feed_stories.scrollTop(); var positions = this.cache.feed_view_story_positions_keys; var closest = $.closest(from_top, positions); var story = this.cache.feed_view_story_positions[positions[closest]]; // NEWSBLUR.log(['Scroll feed view', from_top, e, closest, positions[closest], this.cache.feed_view_story_positions_keys, positions, self.cache]); this.navigate_story_titles_to_story(story); } + + if (this.flags.river_view && + !this.model.preference('feed_view_single_story')) { + var from_top = -3 + this.$s.$feed_stories.scrollTop(); + var positions = this.cache.feed_view_story_positions_keys; + var closest = $.closest(from_top, positions); + var story = this.cache.feed_view_story_positions[positions[closest]]; + + this.show_correct_feed_in_feed_title_floater(story); + } }, handle_keystrokes: function() { diff --git a/templates/reader/feeds.xhtml b/templates/reader/feeds.xhtml index 72d363b15..0d296a225 100644 --- a/templates/reader/feeds.xhtml +++ b/templates/reader/feeds.xhtml @@ -447,11 +447,12 @@ $(document).ready(function() {
- -
-
-
- + +
+
+
    +
    +