Merge branch 'thumbnails'

* thumbnails: Align story title image previews when not on left split layout. Attempting to space out story date when story image preview is turned off vs turned on. When on, the story date should all be consistent, and when off it can be relaxed. Adding show image preview preference. Fixing padding for all views and layouts. Adding image thumbnails to story titles. Needs preference.
2025-09-18 21:50:56 +00:00 · 2016-02-18 12:20:21 -08:00 · 2016-02-18 12:20:21 -08:00 · 80ed1d533b
commit 80ed1d533b
parent 744d8bb08e b3d83bafb7
4 changed files with 82 additions and 9 deletions
--- a/media/css/reader.css
+++ b/media/css/reader.css
@ -1621,7 +1621,7 @@ a img {
    position: relative;
    cursor: pointer;
    font-weight: bold;
-    padding: 0px 206px 0px 28px;
+    padding: 0px 236px 0px 28px;
    text-decoration: none;
    color: #272727;
    line-height: 14px;
@ -1634,6 +1634,11 @@ a img {
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #F9F8F4;
 }
+#story_titles .NB-story-title.NB-has-image {
+}
+.NB-story-pane-west #story_titles .NB-story-title.NB-has-image {
+    padding-right: 90px;
+}
 .NB-theme-feed-size-xs #story_titles .NB-story-title {
    font-size: 11px;
    line-height: 13px;
@ -1684,6 +1689,18 @@ a img {
    left: 0;
    top: 2px;
 }
+#story_titles .NB-story-title .NB-storytitles-story-image {
+    position: absolute;
+    right: 0;
+    width: 86px;
+    height: 100%;
+    background-size: 40%, cover;
+    background-position: 50% 50%, 50% 30%;
+    background-repeat: no-repeat;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
 .NB-story-pane-west #story_titles .NB-story-title .NB-storytitles-sentiment {
    left: 4px;
 }
@ -1750,7 +1767,7 @@ a img {
    text-decoration: none;
    color: #272727;
    display: block;
-    padding: 5px 4px 4px;
+    padding: 5px 4px 4px 4px;
    float: left;
    position: relative;
    width: 100%;
@ -1758,6 +1775,7 @@ a img {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 }
+
 #story_titles .NB-story-title.read a.story_title {
    color: #969696;
 }
@ -1982,11 +2000,14 @@ a img {

 #story_titles .NB-story-title .story_date {
    position: absolute;
-    right: 4px;
-    width: 200px;
+    width: 172px;
    top: 5px;
+    right: 0;
    font-size: 11px;
 }
+#story_titles .NB-story-title.NB-has-image .story_date {
+    width: 236px;
+}
 .NB-theme-feed-size-xs #story_titles .NB-story-title .story_date {
    font-size: 10px;
 }
@ -2017,6 +2038,7 @@ a img {
    color: #B6B6B6;
 }

+
 #story_titles .NB-story-title.NB-selected,
 .NB-interaction:hover:not(.NB-disabled) {
    color: #304080;
@ -2120,6 +2142,9 @@ a img {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 }
+#story_titles .NB-story-grid.NB-story-title-hide-preview {
+    height: 296px;
+}
 #story_titles.NB-layout-grid.NB-grid-columns-1 .NB-story-grid,
 #story_titles.NB-extra-narrow-content .NB-story-grid {
    width: 94%;
@ -2186,6 +2211,7 @@ a img {
 }
 #story_titles .NB-story-grid .NB-storytitles-story-image {
    display: none;
+    position: inherit;
    width: 100%;
    height: 186px;
    background-size: 64px 64px, cover;
--- a/media/js/newsblur/reader/reader_preferences.js
+++ b/media/js/newsblur/reader/reader_preferences.js
@ -482,6 +482,25 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
                            'Story content preview'
                        ])
                    ]),
+                    $.make('div', { className: 'NB-preference NB-preference-showimagepreview' }, [
+                        $.make('div', { className: 'NB-preference-options' }, [
+                            $.make('div', [
+                                $.make('input', { id: 'NB-preference-showimagepreview-1', type: 'radio', name: 'show_image_preview', value: 1 }),
+                                $.make('label', { 'for': 'NB-preference-showimagepreview-1' }, [
+                                    'Show an image thumbnail in the story title'
+                                ])
+                            ]),
+                            $.make('div', [
+                                $.make('input', { id: 'NB-preference-showimagepreview-0', type: 'radio', name: 'show_image_preview', value: 0 }),
+                                $.make('label', { 'for': 'NB-preference-showimagepreview-0' }, [
+                                    'Don\'t show a thumbnail'
+                                ])
+                            ])
+                        ]),
+                        $.make('div', { className: 'NB-preference-label'}, [
+                            'Image preview'
+                        ])
+                    ]),
                    $.make('div', { className: 'NB-preference NB-preference-doubleclickfeed' }, [
                        $.make('div', { className: 'NB-preference-options' }, [
                            $.make('div', [
@ -1022,6 +1041,12 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
                return false;
            }
        });
+        $('input[name=show_image_preview]', $modal).each(function() {
+            if ($(this).val() == NEWSBLUR.Preferences.show_image_preview) {
+                $(this).attr('checked', true);
+                return false;
+            }
+        });
        $('input[name=doubleclick_feed]', $modal).each(function() {
            if ($(this).val() == NEWSBLUR.Preferences.doubleclick_feed) {
                $(this).attr('checked', true);
--- a/media/js/newsblur/views/story_title_view.js
+++ b/media/js/newsblur/views/story_title_view.js
@ -31,22 +31,29 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
            feed     : (NEWSBLUR.reader.flags.river_view || NEWSBLUR.reader.flags.social_view) &&
                        NEWSBLUR.assets.get_feed(this.model.get('story_feed_id')),
            options  : this.options,
-            show_content_preview : this.show_content_preview()
+            show_content_preview : this.show_content_preview(),
+            show_image_preview : this.show_image_preview()
        }));
        this.$st = this.$(".NB-story-title");
        this.toggle_classes();
        this.toggle_read_status();
        this.color_feedbar();
        if (this.options.is_grid) this.watch_grid_image();
+        if (!this.options.is_grid && this.show_image_preview()) this.watch_grid_image();
        
        return this;
    },
                            
    template: _.template('\
-        <div class="NB-story-title">\
+        <div class="NB-story-title <% if (!show_content_preview) { %>NB-story-title-hide-preview<% } %> <% if (show_image_preview) { %>NB-has-image<% } %> ">\
            <div class="NB-storytitles-feed-border-inner"></div>\
            <div class="NB-storytitles-feed-border-outer"></div>\
            <div class="NB-storytitles-sentiment"></div>\
+            <% if (show_image_preview) { %>\
+                <div class="NB-storytitles-story-image-container">\
+                    <div class="NB-storytitles-story-image"></div>\
+                </div>\
+            <% } %>\
            <a href="<%= story.get("story_permalink") %>" class="story_title NB-hidden-fade">\
                <% if (feed) { %>\
                    <div class="NB-story-feed">\
@ -76,7 +83,7 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
    '),
    
    grid_template: _.template('\
-        <div class="NB-story-title NB-story-grid">\
+        <div class="NB-story-title NB-story-grid <% if (!show_content_preview) { %>NB-story-title-hide-preview<% } %>">\
            <div class="NB-storytitles-feed-border-inner"></div>\
            <div class="NB-storytitles-feed-border-outer"></div>\
            <% if (story.image_url()) { %>\
@ -184,11 +191,12 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
    },
    
    show_content_preview: function() {
+        var preference = NEWSBLUR.assets.preference('show_content_preview');
+        if (!preference) return preference;
+
        if (NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout') == 'grid') {
            var pruned_description = this.model.content_preview('story_content', 500);
        } else {
-            var preference = NEWSBLUR.assets.preference('show_content_preview');
-            if (!preference) return preference;
            var pruned_description = this.model.content_preview();
        }
        
@ -200,6 +208,19 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
        return pruned_description;
    },
    
+    show_image_preview: function() {
+        if (!NEWSBLUR.assets.preference('show_image_preview')) {
+            return false;
+        }
+
+        var story_layout = NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout');
+        var pane_anchor = NEWSBLUR.assets.preference('story_pane_anchor');
+        if (_.contains(['list', 'grid'], story_layout)) return true;
+        if (story_layout == 'split' && _.contains(['north', 'south'], pane_anchor)) return true;
+
+        return this.model.image_url();
+    },
+    
    // ============
    // = Bindings =
    // ============
--- a/templates/base.html
+++ b/templates/base.html
@ -81,6 +81,7 @@
      'truncate_story'          : 'social',
      'autoopen_folder'         : false,
      'show_content_preview'    : true,
+      'show_image_preview'      : true,
      'mark_read_on_scroll_titles' : false,
      'doubleclick_feed'        : 'open',
      'doubleclick_unread'      : 'markread',