Adding style option for grid height. XS/S/M/L/XL

clients/android/NewsBlur/build.gradle

@@ -46,8 +46,8 @@ android {
         applicationId "com.newsblur"
         minSdkVersion 21
         targetSdkVersion 29
-        versionCode 175
+        versionCode 176
-        versionName "10.1b7"
+        versionName "10.1"
     }
     compileOptions.with {
         sourceCompatibility = JavaVersion.VERSION_1_8

media/css/reader.css

@@ -2220,6 +2220,21 @@ hr {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
+.NB-layout-grid.NB-grid-height-xs .NB-story-grid {
+    height: 200px;
+}
+.NB-layout-grid.NB-grid-height-s .NB-story-grid {
+    height: 280px;
+}
+.NB-layout-grid.NB-grid-height-m .NB-story-grid {
+    height: 360px;
+}
+.NB-layout-grid.NB-grid-height-l .NB-story-grid {
+    height: 420px;
+}
+.NB-layout-grid.NB-grid-height-xl .NB-story-grid {
+    height: 480px;
+}
 .NB-story-grid.NB-story-title-hide-preview {
     height: 296px;
 }
@@ -2307,6 +2322,17 @@ hr {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
+.NB-layout-grid.NB-grid-height-xs .NB-story-grid .NB-storytitles-story-image {
+    height: 86px;
+}
+.NB-layout-grid.NB-grid-height-s .NB-story-grid .NB-storytitles-story-image {
+    height: 112px;
+}
+.NB-layout-grid.NB-grid-height-xs.NB-grid-columns-3 .NB-story-grid .NB-storytitles-author,
+.NB-layout-grid.NB-grid-height-xs.NB-grid-columns-4 .NB-story-grid .NB-storytitles-author,
+.NB-layout-grid.NB-grid-height-s.NB-grid-columns-4 .NB-story-grid .NB-storytitles-author {
+    display: none;
+}
 .NB-story-grid.read .NB-storytitles-story-image {
     opacity: .5;
 }
@@ -4964,7 +4990,7 @@ background: transparent;
 
 .NB-style-popover .NB-options-feed-font-size li,
 .NB-style-popover .NB-options-story-font-size li {
-    width: 45px;
+    width: 48px;
     padding: 2px 0;
     line-height: 16px;
     font-weight: bold;
@@ -4991,7 +5017,7 @@ background: transparent;
     margin-top: 6px;
 }
 .NB-style-popover .NB-options-line-spacing li {
-    width: 45px;
+    width: 48px;
     padding: 2px 0;
     line-height: 16px;
     font-weight: bold;
@@ -5020,7 +5046,7 @@ background: transparent;
 }
 
 .NB-style-popover .NB-options-font-family {
-    width: 230px;
+    width: 246px;
 }
 .NB-style-popover .NB-options-font-family li {
     padding: 5px 0;
@@ -5079,7 +5105,7 @@ background: transparent;
 }
 
 .NB-style-popover .NB-story-titles-pane-option {
-    width: 72px;
+    width: 79px;
     font-size: 12px;
     padding: 4px 0;
 }
@@ -5108,7 +5134,7 @@ background: transparent;
     margin-top: 6px;
 }
 .NB-style-popover .NB-single-story-option {
-    width: 116px;
+    width: 122px;
     font-size: 12px;
     padding: 4px 0;
 }
@@ -5126,14 +5152,19 @@ background: transparent;
     background: transparent url("/media/embed/icons/silk/text_horizontalrule.png") no-repeat center center;
 }
 
-.NB-style-popover .NB-options-grid-columns {
+.NB-style-popover .NB-options-grid-columns,
+.NB-style-popover .NB-options-grid-height {
     margin-top: 6px;
 }
-.NB-style-popover .NB-grid-columns-option {
+.NB-style-popover .NB-grid-columns-option,
-    min-width: 23px;
+.NB-style-popover .NB-grid-height-option {
+    min-width: 26px;
     font-size: 12px;
     padding: 4px 8px;
 }
+.NB-style-popover .NB-grid-height-option {
+    min-width: 22px;
+}
 .NB-style-popover .NB-grid-columns-option .NB-icon {
     width: 16px;
     height: 16px;

media/js/newsblur/views/story_options_popover.js

@@ -3,7 +3,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
     className: "NB-style-popover",
     
     options: {
-        'width': 264,
+        'width': 274,
         'anchor': '.NB-taskbar-options',
         'placement': 'top right',
         'offset': {
@@ -22,6 +22,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
         "click .NB-story-titles-pane-option": "change_story_titles_pane",
         "click .NB-single-story-option": "change_single_story",
         "click .NB-grid-columns-option": "change_grid_columns",
+        "click .NB-grid-height-option": "change_grid_height",
         "click .NB-premium-link": "open_premium_modal"
     },
     
@@ -92,6 +93,23 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
                     $.make('li', { className: 'NB-grid-columns-option NB-options-grid-columns-4' }, [
                         '4'
                     ])
+                ]),
+                $.make('ul', { className: 'segmented-control NB-options-grid-height' }, [
+                    $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-xs' }, [
+                        'XS'
+                    ]),
+                    $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-s' }, [
+                        'Short'
+                    ]),
+                    $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-m' }, [
+                        'Medium'
+                    ]),
+                    $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-l' }, [
+                        'Tall'
+                    ]),
+                    $.make('li', { className: 'NB-grid-height-option NB-options-grid-height-xl' }, [
+                        'XL'
+                    ])
                 ])
             ]),
             $.make('div', { className: 'NB-popover-section' }, [
@@ -159,6 +177,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
         var titles_layout_pane = NEWSBLUR.assets.preference('story_pane_anchor');
         var single_story = NEWSBLUR.assets.preference('feed_view_single_story');
         var grid_columns = NEWSBLUR.assets.preference('grid_columns');
+        var grid_height = NEWSBLUR.assets.preference('grid_height');
         
         this.$('.NB-font-family-option').removeClass('NB-active');
         this.$('.NB-options-font-family-'+font_family).addClass('NB-active');
@@ -177,6 +196,8 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
 
         this.$('.NB-grid-columns-option').removeClass('NB-active');
         this.$('.NB-options-grid-columns-'+grid_columns).addClass('NB-active');
+        this.$('.NB-grid-height-option').removeClass('NB-active');
+        this.$('.NB-options-grid-height-'+grid_height).addClass('NB-active');
 
         NEWSBLUR.reader.$s.$taskbar_options.addClass('NB-active');
         
@@ -366,6 +387,33 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
         });
     },
     
+    change_grid_height: function(e) {
+        var $target = $(e.currentTarget);
+        
+        if ($target.hasClass("NB-options-grid-height-xs")) {
+            this.update_grid_height('xs');
+        } else if ($target.hasClass("NB-options-grid-height-s")) {
+            this.update_grid_height('s');
+        } else if ($target.hasClass("NB-options-grid-height-m")) {
+            this.update_grid_height('m');
+        } else if ($target.hasClass("NB-options-grid-height-l")) {
+            this.update_grid_height('l');
+        } else if ($target.hasClass("NB-options-grid-height-xl")) {
+            this.update_grid_height('xl');
+        }
+        
+        this.show_correct_options();
+    },
+    
+    update_grid_height: function(setting) {
+        NEWSBLUR.assets.preference('grid_height', setting);
+        NEWSBLUR.app.story_list.render();
+        _.defer(function() {
+            NEWSBLUR.app.story_titles.override_grid();
+            NEWSBLUR.reader.resize_window();
+        });
+    },
+    
     open_premium_modal: function(e) {
       this.close(e, function() {
           NEWSBLUR.reader.open_feedchooser_modal({'premium_only': true});
@@ -373,4 +421,4 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
     }
     
     
-});
+});

media/js/newsblur/views/story_titles_view.js

@@ -101,15 +101,23 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
         if (story_layout != 'grid') return;
         
         var columns = NEWSBLUR.assets.preference('grid_columns');
+        var height = NEWSBLUR.assets.preference('grid_height');
         var $layout = this.$story_titles;
         $layout.removeClass('NB-grid-columns-1')
                .removeClass('NB-grid-columns-2')
                .removeClass('NB-grid-columns-3')
                .removeClass('NB-grid-columns-4');
 
+        $layout.removeClass('NB-grid-height-xs')
+               .removeClass('NB-grid-height-s')
+               .removeClass('NB-grid-height-m')
+               .removeClass('NB-grid-height-l')
+               .removeClass('NB-grid-height-xl');
+
         if (columns > 0) {
             $layout.addClass('NB-grid-columns-' + columns);
         }
+        $layout.addClass('NB-grid-height-' + height);
     },
     
     append_river_premium_only_notification: function() {
@@ -391,4 +399,4 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
         _.invoke(unread_stories, 'mark_read');
     }
     
-});
+});

templates/base.html

@@ -46,6 +46,7 @@
       'default_order'           : 'newest',
       'default_read_filter'     : 'all',
       'grid_columns'            : 0,
+      'grid_height'             : 'm',
       'hide_read_feeds'         : 0,
       'show_tooltips'           : 1,
       'show_contextmenus'       : 1,