New Magazine view. Doesn't work in river yet nor on the dashboard. Also needs new story detail view.

This commit is contained in:
Samuel Clay 2022-02-18 17:52:24 -05:00
parent 0c8dbda555
commit eb2b3dee04
10 changed files with 206 additions and 23 deletions

View file

@ -1761,6 +1761,31 @@ hr {
font-size: 18px;
line-height: 22px;
}
.NB-story-layout-magazine.NB-theme-feed-size-xs .NB-story-title {
font-size: 14px;
line-height: 16px;
padding-top: 10px;
}
.NB-story-layout-magazine.NB-theme-feed-size-s .NB-story-title {
font-size: 15px;
line-height: 17px;
padding-top: 15px;
}
.NB-story-layout-magazine.NB-theme-feed-size-m .NB-story-title {
font-size: 16px;
line-height: 19px;
padding-top: 20px;
}
.NB-story-layout-magazine.NB-theme-feed-size-l .NB-story-title {
font-size: 18px;
line-height: 22px;
padding-top: 25px;
}
.NB-story-layout-magazine.NB-theme-feed-size-xl .NB-story-title {
font-size: 20px;
line-height: 24px;
padding-top: 30px;
}
.NB-story-pane-west .NB-story-title {
padding-right: 4px;
@ -1795,6 +1820,11 @@ hr {
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title {
padding-left: 120px;
}
.NB-story-layout-magazine .NB-layout-magazine .NB-story-title,
.NB-story-layout-magazine .NB-view-river .NB-story-title {
padding-left: 400px;
min-height: 200px;
}
.NB-story-title .NB-storytitles-feed-border-inner,
.NB-story-title .NB-storytitles-feed-border-outer {
@ -1827,6 +1857,10 @@ hr {
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-story-title .NB-storytitles-sentiment {
left: 89px;
}
.NB-story-layout-magazine .NB-layout-magazine .NB-story-title .NB-storytitles-sentiment {
left: -28px;
top: 4px;
}
.NB-image-preview-small-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title .NB-storytitles-sentiment,
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title .NB-storytitles-sentiment {
@ -2013,6 +2047,9 @@ hr {
.NB-content-preview-large .NB-storytitles-content-preview {
-webkit-line-clamp: 3;
}
.NB-story-layout-magazine .NB-layout-magazine .NB-storytitles-content-preview {
-webkit-line-clamp: 8;
}
.NB-theme-feed-size-xs .NB-storytitles-content-preview {
font-size: 11px;
@ -2046,6 +2083,33 @@ hr {
.NB-story-layout-list .NB-selected .NB-storytitles-content-preview {
display: none;
}
.NB-story-layout-magazine.NB-theme-feed-size-xs .NB-storytitles-content-preview {
font-size: 12px;
line-height: 15px;
margin: 10px 0;
}
.NB-story-layout-magazine.NB-theme-feed-size-s .NB-storytitles-content-preview {
font-size: 13px;
line-height: 16px;
margin: 15px 0;
}
.NB-story-layout-magazine.NB-theme-feed-size-m .NB-storytitles-content-preview {
font-size: 14px;
line-height: 18px;
margin: 20px 0;
}
.NB-story-layout-magazine.NB-theme-feed-size-l .NB-storytitles-content-preview {
font-size: 16px;
line-height: 20px;
margin: 25px 0;
}
.NB-story-layout-magazine.NB-theme-feed-size-xl .NB-storytitles-content-preview {
font-size: 18px;
line-height: 22px;
margin: 30px 0;
}
.read .NB-storytitles-content-preview {
color: #b3b3b1;
}
@ -2161,6 +2225,10 @@ hr {
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-story-title .NB-story-manage-icon {
left: 90px;
}
.NB-story-layout-magazine .NB-layout-magazine .NB-story-title .NB-story-manage-icon {
left: -28px;
top: 4px;
}
.NB-image-preview-small-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title .NB-story-manage-icon,
.NB-image-preview-large-left:not(.NB-story-layout-grid) .NB-view-river .NB-story-pane-west .NB-story-title .NB-story-manage-icon {
top: 24px;
@ -2551,7 +2619,7 @@ hr {
.NB-story-grid.read .NB-storytitles-content-preview {
color: #D6D6DE;
}
.NB-story-grid.NB-story-title .NB-storytitles-grid-bottom {
.NB-story-title .NB-storytitles-grid-bottom {
position: absolute;
bottom: 0;
top: inherit;
@ -2567,6 +2635,16 @@ hr {
.NB-story-grid:not(.read):hover .NB-storytitles-grid-bottom {
background-color: #F7F7F6;
}
.NB-storytitles-magazine-bottom {
position: relative;
margin-bottom: 20px;
}
.NB-storytitles-magazine-bottom .story_date {
top: 0;
}
.NB-story-layout-magazine .NB-story-title .NB-storytitles-author {
padding-left: 4px;
}
.NB-story-grid.NB-story-title .NB-storytitles-author {
float: left;
display: block;
@ -2865,6 +2943,10 @@ body {
top: 12px;
border-radius: 6px;
}
.NB-story-layout-magazine .NB-layout-magazine .NB-storytitles-story-image {
width: 350px;
height: 94%;
}
.NB-image-preview-small-left.NB-story-layout-list .NB-storytitles-story-image,
.NB-image-preview-small-right.NB-story-layout-list .NB-storytitles-story-image,
.NB-image-preview-small-left.NB-story-layout-split .NB-story-pane-south .NB-storytitles-story-image,
@ -5163,6 +5245,16 @@ background: transparent;
background: transparent url('/media/img/icons/circular/nav_story_grid_active.png') no-repeat center center;
background-size: 15px;
}
.NB-taskbar .NB-task-layout-magazine .NB-task-image {
left: 12px;
background: transparent url('/media/img/icons/circular/nav_story_magazine.png') no-repeat center center;
background-size: 15px;
}
.NB-taskbar .NB-task-layout-magazine.NB-active .NB-task-image {
left: 12px;
background: transparent url('/media/img/icons/circular/nav_story_magazine_active.png') no-repeat center center;
background-size: 15px;
}
.NB-taskbar .NB-task-return .NB-task-image {
background: transparent url('/media/embed/icons/silk/arrow_undo.png') no-repeat center center;

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 B

View file

@ -205,7 +205,7 @@
resize: true
});
if (_.contains(['split', 'list', 'grid'],
if (_.contains(['split', 'list', 'grid', 'magazine'],
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
NEWSBLUR.app.story_titles.fill_out();
} else {
@ -397,7 +397,7 @@
contentLayoutOptions[story_anchor+'__onclose_start'] = $.rescope(this.toggle_story_titles_pane, this);
contentLayoutOptions[story_anchor+'__onopen_start'] = $.rescope(this.toggle_story_titles_pane, this);
this.layout.contentLayout = this.$s.$content_pane.layout(contentLayoutOptions);
} else if (_.contains(['list', 'grid'],
} else if (_.contains(['list', 'grid', 'magazine'],
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
var rightLayoutOptions = {
resizeWhileDragging: true,
@ -544,6 +544,7 @@
.removeClass('NB-story-layout-split')
.removeClass('NB-story-layout-list')
.removeClass('NB-story-layout-grid')
.removeClass('NB-story-layout-magazine')
.addClass('NB-story-layout-'+NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'));
},
@ -950,7 +951,7 @@
page_in_story: function(amount, direction) {
amount = parseInt(amount, 10) / 100.0;
var page_height = this.$s.$story_pane.height();
if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
page_height = this.$s.$story_titles.height();
}
var scroll_height = parseInt(page_height * amount, 10);
@ -991,7 +992,7 @@
}
}
}
} else if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
} else if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
var scroll_top = this.$s.$story_titles.scrollTop();
var $story = this.active_story.story_title_view.$el;
var story_height = $story.height();
@ -1013,7 +1014,7 @@
dir = '-';
}
// NEWSBLUR.log(['scroll_in_story', this.$s.$story_pane, direction, amount]);
if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
this.$s.$story_titles.stop().scrollTo({
top: dir+'='+amount,
left:'+=0'
@ -1631,6 +1632,7 @@
var $split = $(".NB-task-layout-split");
var $list = $(".NB-task-layout-list");
var $grid = $(".NB-task-layout-grid");
var $magazine = $(".NB-task-layout-magazine");
var $full = $(".NB-task-layout-full");
var story_layout = NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout');
this.$s.$story_titles[0].className = this.$s.$story_titles[0].className.replace(/ ?NB-layout-\w+/gi, '');
@ -1645,6 +1647,7 @@
$split.removeClass('NB-active');
$list.addClass('NB-active');
$grid.removeClass('NB-active');
$magazine.removeClass('NB-active');
} else if (story_layout == 'grid') {
$('.NB-taskbar-button.task_view_page').addClass('NB-hidden');
$('.NB-taskbar-button.task_view_feed').addClass('NB-first');
@ -1654,6 +1657,17 @@
$split.removeClass('NB-active');
$list.removeClass('NB-active');
$grid.addClass('NB-active');
$magazine.removeClass('NB-active');
} else if (story_layout == 'magazine') {
$('.NB-taskbar-button.task_view_page').addClass('NB-hidden');
$('.NB-taskbar-button.task_view_feed').addClass('NB-first');
$('.NB-taskbar-button.task_view_story').addClass('NB-hidden');
$('.NB-taskbar-button.task_view_text').addClass('NB-last');
$full.removeClass('NB-active');
$split.removeClass('NB-active');
$list.removeClass('NB-active');
$grid.removeClass('NB-active');
$magazine.addClass('NB-active');
} else if (story_layout == 'split') {
if (!this.flags.river_view) {
$('.NB-taskbar-button.task_view_page').removeClass('NB-hidden');
@ -1665,6 +1679,7 @@
$split.addClass('NB-active');
$list.removeClass('NB-active');
$grid.removeClass('NB-active');
$magazine.removeClass('NB-active');
} else if (story_layout == 'full') {
if (!this.flags.river_view) {
$('.NB-taskbar-button.task_view_page').removeClass('NB-hidden');
@ -1676,6 +1691,7 @@
$split.removeClass('NB-active');
$list.removeClass('NB-active');
$grid.removeClass('NB-active');
$magazine.removeClass('NB-active');
}
if (_.contains(['starred', 'read'], feed_id)) {
@ -1721,6 +1737,11 @@
this.active_story.story_title_view.toggle_selected();
}
NEWSBLUR.app.story_list.clear();
} else if (story_layout == 'magazine') {
if (this.active_story) {
this.active_story.story_title_view.toggle_selected();
}
NEWSBLUR.app.story_list.clear();
} else if (story_layout == 'split') {
NEWSBLUR.app.story_list.render();
if (this.active_story) {
@ -1747,7 +1768,7 @@
NEWSBLUR.app.story_titles.scroll_to_selected_story();
NEWSBLUR.app.story_list.scroll_to_selected_story();
NEWSBLUR.app.feed_list.scroll_to_selected();
if (_.contains(['split', 'list', 'grid'],
if (_.contains(['split', 'list', 'grid', 'magazine'],
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
NEWSBLUR.app.story_titles.fill_out();
} else {
@ -2425,7 +2446,7 @@
this.switch_taskbar_view('feed', {skip_save_type: 'page'});
NEWSBLUR.app.story_list.show_stories_preference_in_feed_view();
}
} else if (_.contains(['list', 'grid'],
} else if (_.contains(['list', 'grid', 'magazine'],
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout')) &&
(this.story_view == 'page' || this.story_view == 'story')) {
this.switch_taskbar_view('feed', {skip_save_type: 'layout'});
@ -3122,7 +3143,7 @@
} else if ($('.task_view_'+view).hasClass('NB-disabled') ||
$('.task_view_'+view).hasClass('NB-hidden')) {
return;
} else if (_.contains(['list', 'grid'],
} else if (_.contains(['list', 'grid', 'magazine'],
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout')) &&
_.contains(['page', 'story'], view)) {
view = 'feed';
@ -3201,7 +3222,7 @@
NEWSBLUR.app.story_list.reset_story_positions();
if (!options.resize && this.active_story &&
_.contains(['list', 'grid'],
_.contains(['list', 'grid', 'magazine'],
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
NEWSBLUR.app.text_tab_view.unload();
if (this.active_story.get('selected')) {
@ -3226,7 +3247,7 @@
}
} else if (!options.resize && this.active_story &&
this.active_story.get('selected') &&
_.contains(['list', 'grid'],
_.contains(['list', 'grid', 'magazine'],
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
this.active_story.story_title_view.render_inline_story_detail();
}
@ -3252,7 +3273,7 @@
var $active = $('.NB-taskbar-view .NB-active');
var view;
if (_.contains(['list', 'grid'],
if (_.contains(['list', 'grid', 'magazine'],
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
if (direction == -1) {
if ($active.hasClass('task_view_feed')) {
@ -5118,7 +5139,7 @@
NEWSBLUR.app.story_list.show_correct_explainer();
// NEWSBLUR.log(['Showing correct stories', this.story_view, unread_view_name, $stories_show.length, $stories_hide.length]);
if (_.contains(['split', 'list', 'grid'],
if (_.contains(['split', 'list', 'grid', 'magazine'],
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
NEWSBLUR.app.story_titles.fill_out();
} else {
@ -6741,6 +6762,10 @@
e.preventDefault();
self.switch_story_layout('grid');
});
$.targetIs(e, { tagSelector: '.NB-taskbar-button.NB-task-layout-magazine' }, function($t, $p){
e.preventDefault();
self.switch_story_layout('magazine');
});
$.targetIs(e, { tagSelector: '.NB-taskbar-options' }, function($t, $p){
e.preventDefault();
self.open_story_options_popover();

View file

@ -198,6 +198,13 @@ _.extend(NEWSBLUR.ReaderFeedException.prototype, {
$.make("img", { src: NEWSBLUR.Globals.MEDIA_URL+'/img/icons/circular/nav_story_grid_active.png' }),
$.make("div", { className: "NB-layout-title" }, "Grid")
])
]),
$.make('div', [
$.make('label', { 'for': 'NB-preference-layout-5' }, [
$.make('input', { id: 'NB-preference-layout-5', type: 'radio', name: 'story_layout', value: 'magazine' }),
$.make("img", { src: NEWSBLUR.Globals.MEDIA_URL+'/img/icons/circular/nav_story_magazine_active.png' }),
$.make("div", { className: "NB-layout-title" }, "Magazine")
])
])
])
])

View file

@ -382,6 +382,13 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
$.make("img", { src: NEWSBLUR.Globals.MEDIA_URL+'/img/icons/circular/nav_story_grid_active.png' }),
$.make("div", { className: "NB-layout-title" }, "Grid")
])
]),
$.make('div', [
$.make('label', { 'for': 'NB-preference-layout-5' }, [
$.make('input', { id: 'NB-preference-layout-5', type: 'radio', name: 'story_layout', value: 'magazine' }),
$.make("img", { src: NEWSBLUR.Globals.MEDIA_URL+'/img/icons/circular/nav_story_magazine_active.png' }),
$.make("div", { className: "NB-layout-title" }, "Magazine")
])
])
]),
$.make('div', { className: 'NB-preference-label'}, [

View file

@ -690,7 +690,7 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({
href = footnote_href;
var offset = $(href).offset().top;
var $scroll;
if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
$scroll = NEWSBLUR.reader.$s.$story_titles;
} else if (NEWSBLUR.reader.flags['temporary_story_view'] ||
NEWSBLUR.reader.story_view == 'text') {
@ -998,7 +998,7 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({
},
scroll_to_comments: function() {
if (_.contains(['list', 'grid'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
if (_.contains(['list', 'grid', 'magazine'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
NEWSBLUR.app.story_titles.scroll_to_selected_story(this.model, {
scroll_to_comments: true,
scroll_offset: -50

View file

@ -27,6 +27,7 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
render: function() {
var template_name = !this.model.get('selected') && this.options.is_grid ?
'grid_template' : 'template';
if (this.options.is_magazine) template_name = "magazine_template";
// console.log(['render story title', template_name, this.$el[0], this.options.is_grid, this.show_image_preview(), this.options.override_layout, NEWSBLUR.assets.get_feed(this.model.get('story_feed_id'))]);
this.$el.html(this[template_name]({
story : this.model,
@ -133,6 +134,48 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
<div class="NB-story-detail"></div>\
'),
magazine_template: _.template('\
<div class="NB-story-title <% 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()) { %>\
<div class="NB-storytitles-story-image-container">\
<div class="NB-storytitles-story-image" <% if (story.image_url()) { %>style="background-image: none, url(\'<%= story.image_url() %>\');"<% } %>></div>\
</div>\
<% } %>\
<div class="NB-storytitles-content">\
<% if (feed) { %>\
<div class="NB-story-feed">\
<img class="feed_favicon" src="<%= $.favicon(feed) %>">\
<span class="feed_title"><%= feed.get("feed_title") %></span>\
</div>\
<% } %>\
<a href="<%= story.get("story_permalink") %>" class="story_title NB-hidden-fade">\
<div class="NB-storytitles-star"></div>\
<div class="NB-storytitles-share"></div>\
<div class="NB-storytitles-sentiment"></div>\
<div class="NB-story-manage-icon" role="button"></div>\
<span class="NB-storytitles-title"><%= story.get("story_title") %></span>\
<% if (show_content_preview) { %>\
<div class="NB-storytitles-content-preview"><%= show_content_preview %></div>\
<% } %>\
</a>\
</div>\
<div class="NB-storytitles-magazine-bottom">\
<span class="NB-storytitles-author"><%= story.story_authors() %></span>\
<span class="story_date NB-hidden-fade"><%= story.formatted_short_date() %></span>\
</div>\
<% if (story.get("comment_count_friends")) { %>\
<div class="NB-storytitles-shares">\
<% _.each(story.get("commented_by_friends"), function(user_id) { %>\
<img class="NB-user-avatar" src="<%= NEWSBLUR.assets.user_profiles.find(user_id).get("photo_url") %>">\
<% }) %>\
</div>\
<% } %>\
</div>\
<div class="NB-story-detail"></div>\
'),
render_inline_story_detail: function(temporary_text) {
// console.log(['render_inline_story_detail', this.model.get('story_title')]);
if (NEWSBLUR.reader.story_view == 'text' || temporary_text) {
@ -232,7 +275,7 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
var story_layout = this.options.override_layout ||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout');
var pane_anchor = this.options.override_layout ? "west" : NEWSBLUR.assets.preference('story_pane_anchor');
if (_.contains(['list', 'grid'], story_layout)) return true;
if (_.contains(['list', 'grid', 'magazine'], story_layout)) return true;
if (story_layout == 'split' && _.contains(['north', 'south'], pane_anchor)) return true;
return !!this.model.image_url();
@ -381,16 +424,19 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
}
},
toggle_selected: function(model, selected, options) {
toggle_selected: function (model, selected, options) {
var story_layout = this.options.override_layout ||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout');
if (this.options.is_grid) this.render();
this.$st.toggleClass('NB-selected', !!this.model.get('selected'));
this.$el.toggleClass('NB-selected', !!this.model.get('selected'));
if (!!this.model.get('selected')) {
if (_.contains(['list', 'grid'], this.options.override_layout ||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
if (_.contains(['list', 'grid'], story_layout)) {
this.render_inline_story_detail();
} else if (_.contains(['magazine'], story_layout)) {
this.render_magazine_story_detail();
} else {
this.destroy_inline_story_detail();
}
@ -479,7 +525,7 @@ NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
return;
}
if (_.contains(['list', 'grid'], this.options.override_layout ||
if (_.contains(['list', 'grid', 'magazine'], this.options.override_layout ||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout')) &&
this.model.get('selected')) {
this.collapse_story();

View file

@ -40,6 +40,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
model: story,
collection: collection,
is_grid: story_layout == 'grid',
is_magazine: story_layout == 'magazine',
override_layout: override_layout,
on_dashboard: on_dashboard
}).render();
@ -71,6 +72,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
model: story,
collection: collection,
is_grid: story_layout == 'grid',
is_magazine: story_layout == 'magazine',
override_layout: override_layout,
on_dashboard: on_dashboard
}).render();
@ -256,7 +258,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
]);
var story_layout = this.options.override_layout ||
NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout');
if (_.contains(['list', 'grid'], story_layout) || NEWSBLUR.assets.preference('mark_read_on_scroll_titles')) {
if (_.contains(['list', 'grid', 'magazine'], story_layout) || NEWSBLUR.assets.preference('mark_read_on_scroll_titles')) {
var pane_height = this.$story_titles.height();
var endbar_height = 20;
var last_story_height = 80;
@ -308,7 +310,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
// console.log(["scroll_to_selected_story 1", story, options]);
var story_title_visisble = this.$story_titles.isScrollVisible(story_title_view.$el);
if (!story_title_visisble || options.force ||
_.contains(['list', 'grid'], story_layout)) {
_.contains(['list', 'grid', 'magazine'], story_layout)) {
var container_offset = this.$story_titles.position().top;
var scroll = story_title_view.$el.find('.NB-story-title').position().top;
if (options.scroll_to_comments) {
@ -318,7 +320,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
var height = this.$story_titles.outerHeight();
var position = scroll+container-height/5;
// console.log(["scroll_to_selected_story 2", container_offset, scroll, container, height, position]);
if (_.contains(['list', 'grid'], story_layout)) {
if (_.contains(['list', 'grid', 'magazine'], story_layout)) {
position = scroll+container;
}
if (story_layout == 'grid') {

View file

@ -270,6 +270,10 @@
<div class="NB-task-image"></div>
<span class="NB-task-title">Grid</span>
</li>
<li class="NB-taskbar-button NB-task-layout-magazine NB-tipsy" tipsy-title="Magazine">
<div class="NB-task-image"></div>
<span class="NB-task-title">Magazine</span>
</li>
</ul>
<div class="NB-taskbar-options-container">