From 26dfca92d886717551ab3b689656feebb7dec32c Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Wed, 10 Jun 2020 20:56:34 -0400 Subject: [PATCH] Rewrote story header to position sticky. Much better. Grid needs numbering to handle new grid layout. --- .tm_properties | 2 +- apps/reader/views.py | 5 ++- media/css/reader.css | 34 ++++++++-------- media/js/newsblur/reader/reader.js | 1 - media/js/newsblur/views/story_detail_view.js | 16 ++++---- media/js/newsblur/views/story_list_view.js | 42 -------------------- media/js/newsblur/views/story_titles_view.js | 4 +- templates/reader/feeds_skeleton.xhtml | 1 - 8 files changed, 31 insertions(+), 74 deletions(-) diff --git a/.tm_properties b/.tm_properties index e974cc7bb..384c30de6 100644 --- a/.tm_properties +++ b/.tm_properties @@ -1,2 +1,2 @@ exclude = '{$exclude,*.tgz,*.gz,static/*.js,static/*.css}' -excludeDirectories = "{$excludeDirectories,logs,data,clients/android,media/fonts,node_modules,venv,fonts,clients}" +excludeDirectories = "{$excludeDirectories,logs,data,clients/android,media/fonts,node_modules,venv,docker,fonts,clients}" diff --git a/apps/reader/views.py b/apps/reader/views.py index af7c11ddb..853e58fc8 100644 --- a/apps/reader/views.py +++ b/apps/reader/views.py @@ -812,7 +812,10 @@ def load_single_feed(request, feed_id): # time.sleep(random.randint(2, 7) / 10.0) # time.sleep(random.randint(1, 10)) time.sleep(delay) - + # if page == 1: + # time.sleep(1) + # else: + # time.sleep(20) # if page == 2: # assert False diff --git a/media/css/reader.css b/media/css/reader.css index 9fd9453eb..0afe3cc22 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -2164,32 +2164,32 @@ a img { background-color: #F7F8F5; } .NB-layout-grid .NB-story-titles { - overflow: hidden; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 2rem; + padding: 2rem; } .NB-layout-grid .NB-story-content-container { background-color: white; } .NB-layout-grid .NB-end-line { - margin-top: 24px; - float: left; - width: 100%; + margin: 0 -2rem -2rem; + + grid-column-start: 1; + grid-column-end: 4; } .NB-layout-grid .NB-story-title-container { + } .NB-layout-grid .NB-story-title-container.NB-selected { - clear: both; - overflow: hidden; -} -.NB-layout-grid .NB-story-title-container.NB-selected .NB-story-title { - margin-top: 24px; + grid-column-start: 1; + grid-column-end: 4; + margin: 0 -2rem; } .NB-story-grid { - margin: 3% 0 0 3%; + margin: 0; border: 1px solid rgba(0, 0, 0, .2); - position: relative; - float: left; - width: 42%; height: 360px; padding: 0; border-radius: 2px; @@ -2210,7 +2210,7 @@ a img { } .NB-layout-grid.NB-grid-columns-3 .NB-story-grid, .NB-wide-content .NB-story-grid { - width: 29%; +/* width: 29%;*/ } .NB-layout-grid.NB-grid-columns-4 .NB-story-grid, .NB-extra-wide-content .NB-story-grid { @@ -2226,7 +2226,6 @@ a img { } .NB-story-grid.NB-selected { - clear: both; } .NB-story-grid .NB-storytitles-content { @@ -2697,7 +2696,6 @@ body { list-style: none; background-color: white; position: relative; - overflow: hidden; } .NB-feed-story .NB-feed-story-header { @@ -2746,7 +2744,8 @@ body { rgb(55,55,55) 84% ); padding: 2px 200px 2px 28px; - position: relative; + position: sticky; + top: 0; border-bottom: 1px solid #000; border-top: 1px solid #707070; z-index: 2; @@ -3750,7 +3749,6 @@ body { .NB-feed-story { margin: 0; clear: both; - overflow: hidden; } .NB-feed-stories.NB-feed-view-story .NB-feed-story { diff --git a/media/js/newsblur/reader/reader.js b/media/js/newsblur/reader/reader.js index 6570f03de..e2a0f6df8 100644 --- a/media/js/newsblur/reader/reader.js +++ b/media/js/newsblur/reader/reader.js @@ -51,7 +51,6 @@ $read_header: $('.NB-feeds-header-read'), $tryfeed_header: $('.NB-feeds-header-tryfeed'), $taskbar: $('.NB-taskbar-view'), - $feed_floater: $('.NB-feed-story-view-floater'), $feedbar: $('.NB-feedbar'), $add_button: $('.NB-task-add'), $taskbar_options: $('.NB-taskbar-options'), diff --git a/media/js/newsblur/views/story_detail_view.js b/media/js/newsblur/views/story_detail_view.js index 222a78a09..5150faed5 100644 --- a/media/js/newsblur/views/story_detail_view.js +++ b/media/js/newsblur/views/story_detail_view.js @@ -171,15 +171,15 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({ }, story_header_template: _.template('\ +
\ + <% if (feed) { %>\ +
\ + \ + <%= feed.get("feed_title") %>\ +
\ + <% } %>\ +
\
\ -
\ - <% if (feed) { %>\ -
\ - \ - <%= feed.get("feed_title") %>\ -
\ - <% } %>\ -
\
\
\
\ diff --git a/media/js/newsblur/views/story_list_view.js b/media/js/newsblur/views/story_list_view.js index 231cdd728..7f6f30be8 100644 --- a/media/js/newsblur/views/story_list_view.js +++ b/media/js/newsblur/views/story_list_view.js @@ -73,7 +73,6 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ this.$el.html(_.pluck(stories, 'el')); _.invoke(stories, 'attach_handlers'); } - this.show_correct_feed_in_feed_title_floater(); this.stories = stories; _.defer(this.check_feed_view_scrolled_to_bottom); this.end_loading(); @@ -286,44 +285,6 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ this.$el.append($end_stories_line); }, - show_correct_feed_in_feed_title_floater: function(story, hide) { - var $story, $header; - var $feed_floater = NEWSBLUR.reader.$s.$feed_floater; - story = story || NEWSBLUR.reader.active_story; - - if (!hide && story && story.get('story_feed_id') && - this.cache.feed_title_floater_feed_id != story.get('story_feed_id')) { - var $story = story.story_view.$el; - $header = $('.NB-feed-story-header-feed', $story); - var $new_header = $header.clone(); - if (this.feed_title_floater) this.feed_title_floater.remove(); - this.feed_title_floater = new NEWSBLUR.Views.StoryDetailView({ - feed_floater: true, - model: story, - el: $new_header - }); - - $feed_floater.html($new_header); - this.cache.feed_title_floater_feed_id = story.get('story_feed_id'); - var feed = NEWSBLUR.assets.get_feed(story.get('story_feed_id')); - $feed_floater.toggleClass('NB-inverse', feed && feed.is_light()); - $feed_floater.width($header.outerWidth()); - } else if (hide || !story || !story.get('story_feed_id')) { - if (this.feed_title_floater) this.feed_title_floater.remove(); - this.cache.feed_title_floater_feed_id = null; - } - - if (story && this.cache.feed_title_floater_story_id != story.id) { - $story = $story || story.story_view.$el; - $header = $header || $('.NB-feed-story-header-feed', $story); - $('.NB-floater').removeClass('NB-floater'); - $header.addClass('NB-floater'); - this.cache.feed_title_floater_story_id = story.id; - } else if (!story) { - this.cache.feed_title_floater_story_id = null; - } - }, - show_stories_preference_in_feed_view: function(is_creating) { if (NEWSBLUR.reader.active_story && NEWSBLUR.assets.preference('feed_view_single_story')) { @@ -743,9 +704,6 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ var closest = $.closest(from_top - offset, positions); story = this.cache.feed_view_story_positions[positions[closest]]; } - - var hide = offset && (from_top < offset); - this.show_correct_feed_in_feed_title_floater(story, hide); } } diff --git a/media/js/newsblur/views/story_titles_view.js b/media/js/newsblur/views/story_titles_view.js index 96361f746..8a354f2ce 100644 --- a/media/js/newsblur/views/story_titles_view.js +++ b/media/js/newsblur/views/story_titles_view.js @@ -188,7 +188,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({ this.$('.NB-end-line').remove(); var $endline = $.make('div', { className: "NB-end-line NB-short" }); $endline.css({'background': '#FFF'}); - $story_titles.append($endline); + this.$el.append($endline); $endline.animate({'backgroundColor': '#E1EBFF'}, {'duration': 550, 'easing': 'easeInQuad'}) .animate({'backgroundColor': '#5C89C9'}, {'duration': 1550, 'easing': 'easeOutQuad'}) @@ -323,7 +323,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({ position = scroll+container; } if (story_layout == 'grid') { - position += 21; + // position -= 21; } // console.log(["scroll_to_selected_story 3", position]); diff --git a/templates/reader/feeds_skeleton.xhtml b/templates/reader/feeds_skeleton.xhtml index 7b8915132..c023bb0b4 100644 --- a/templates/reader/feeds_skeleton.xhtml +++ b/templates/reader/feeds_skeleton.xhtml @@ -308,7 +308,6 @@
-