Showing content previews and boosting font size on story titles on web.

media/css/reader.css

@@ -1496,6 +1496,7 @@ body {
     text-decoration: none;
     color: #272727;
     line-height: 14px;
+    font-size: 12px;
 /*    background-color: white;
     border-top: 1px solid #E7EDF6;
     border-bottom: 1px solid #FFF;
@@ -1618,13 +1619,43 @@ body {
 #story_titles .NB-story-title .story_title .NB-storytitles-author {
     padding-left: 12px;
     color: #808080;
-    font-size: 9px;
+    font-size: 10px;
 }
 
 #story_titles .NB-story-title.NB-selected .story_title .NB-storytitles-author {
 /*    text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);*/
 }
 
+#story_titles .NB-storytitles-content-preview {
+    color: #737C75;
+    font-size: 11px;
+    line-height: 2.2em;
+    overflow: hidden;
+    font-weight: normal;
+    height: 20px;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    display: -webkit-box;
+
+}
+.NB-story-pane-west #story_titles .NB-storytitles-content-preview {
+    -webkit-line-clamp: 2;
+    line-height: 14px;
+    height: 36px;
+    padding: 6px 0 0;
+}
+
+.NB-story-layout-list #story_titles .NB-selected .NB-storytitles-content-preview {
+    display: none;
+}
+#story_titles .read .NB-storytitles-content-preview {
+    color: #A2B2A5;
+}
 #story_titles .NB-storytitles-shares {
     position: absolute;
     height: 16px;
@@ -1663,7 +1694,7 @@ body {
     position: absolute;
 }
 .NB-story-pane-west #story_titles .NB-story-title .NB-story-feed {
-    left: -22px;
+    left: -18px;
 }
 .NB-view-river #story_titles .NB-story-title .NB-story-feed {
     display: block;
@@ -1673,10 +1704,13 @@ body {
     top: -2px;
     left: 0;
     vertical-align: text-bottom;
-    opacity: .6;
+    opacity: .65;
     height: 16px;
     width: 16px;
 }
+#story_titles .NB-story-title.read .feed_favicon {
+    opacity: .4;
+}
 #story_titles .NB-story-title .NB-story-feed .feed_title {
     display: block;
 
@@ -1753,16 +1787,18 @@ body {
     right: 4px;
     width: 200px;
     top: 5px;
+    font-size: 11px;
 }
 .NB-story-pane-west #story_titles .NB-story-title .story_date {
     position: static;
     margin: 0 0 4px 4px;
-    color: #888C9B;
+    color: #9197B1;
     top: 0;
     left: 0;
     right: 0;
     display: block;
-    font-size: 9px;
+    font-size: 10px;
+    font-weight: normal;
     clear: both;
 }
 #story_titles .NB-story-title.NB-selected .story_date {

media/js/newsblur/models/stories.js

@@ -33,6 +33,13 @@ NEWSBLUR.Models.Story = Backbone.Model.extend({
         return score_name;
     },
     
+    content_preview: function() {
+        var content = this.get('story_content');
+        content = content && Inflector.stripTags(content);
+        
+        return _.string.prune(content, 150, "...");
+    },
+    
     formatted_short_date: function() {
         var timestamp = this.get('story_timestamp');
         var dateformat = NEWSBLUR.assets.preference('dateformat');
@@ -181,7 +188,7 @@ NEWSBLUR.Models.Story = Backbone.Model.extend({
         
         return tags || [];
     },
-        
+    
     unused_story_tags: function() {
         var tags = _.reduce(this.get('user_tags') || [], function(m, t) {
             return _.without(m, t);

media/js/newsblur/reader/reader.js

@@ -477,6 +477,10 @@
             this.$s.$body.toggleClass('NB-is-anonymous',      NEWSBLUR.Globals.is_anonymous);
             this.$s.$body.toggleClass('NB-is-authenticated',  NEWSBLUR.Globals.is_authenticated);
             this.$s.$body.toggleClass('NB-pref-hide-changes', !!this.model.preference('hide_story_changes'));
+            this.$s.$body.removeClass('NB-story-layout-full')
+                         .removeClass('NB-story-layout-split')
+                         .removeClass('NB-story-layout-list')
+                         .addClass('NB-story-layout-'+NEWSBLUR.assets.preference('story_layout'));
         },
         
         hide_splash_page: function() {
@@ -1479,7 +1483,7 @@
             
             this.switch_to_correct_view();
             this.make_feed_title_in_stories();
-            
+            this.add_body_classes();
             
             _.defer(function() {
                 NEWSBLUR.app.story_titles.scroll_to_selected_story();

media/js/newsblur/views/story_title_view.js

@@ -27,7 +27,8 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
             story    : this.model,
             feed     : (NEWSBLUR.reader.flags.river_view || NEWSBLUR.reader.flags.social_view) &&
                         NEWSBLUR.assets.get_feed(this.model.get('story_feed_id')),
-            options  : this.options
+            options  : this.options,
+            show_content_preview : NEWSBLUR.assets.preference('show_content_preview')
         }));
         this.$st = this.$(".NB-story-title");
         this.toggle_classes();
@@ -53,6 +54,9 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
                 <div class="NB-storytitles-share"></div>\
                 <span class="NB-storytitles-title"><%= story.get("story_title") %></span>\
                 <span class="NB-storytitles-author"><%= story.get("story_authors") %></span>\
+                <% if (show_content_preview) { %>\
+                    <div class="NB-storytitles-content-preview"><%= story.content_preview() %></div>\
+                <% } %>\
             </a>\
             <span class="story_date NB-hidden-fade"><%= story.formatted_short_date() %></span>\
             <% if (story.get("comment_count_friends")) { %>\

templates/base.html

@@ -73,6 +73,7 @@
       'title_counts'            : true,
       'truncate_story'          : 'social',
       'autoopen_folder'         : false,
+      'show_content_preview'    : true,
       'doubleclick_feed'        : 'open',
       'doubleclick_unread'      : 'markread',
       'story_share_twitter'     : true,