diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1b6994f33..a25b78abb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -16,7 +16,7 @@
"ansible/playbooks/*/*": true,
// "archive/*": true,
"logs/*": true,
- // "static/*": true,
+ "static/*": true,
"media/fonts": true,
"static/*.css": true,
"static/js/*.*.js": true,
diff --git a/media/css/reader/reader.css b/media/css/reader/reader.css
index cd996f043..a45372162 100644
--- a/media/css/reader/reader.css
+++ b/media/css/reader/reader.css
@@ -2987,7 +2987,7 @@ body {
}
.NB-feed-story .NB-feed-story-header-info {
- padding: 0 206px 8px 28px;
+ padding: 8px 236px 8px 28px;
background-color: #EEF0E9;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-left: 3px solid transparent;
@@ -3203,6 +3203,14 @@ body {
position: relative;
clear: both;
}
+.NB-pref-story-position-center .NB-feed-story .NB-feed-story-title-container {
+ margin: 0 auto;
+ max-width: 700px;
+}
+.NB-pref-story-position-right .NB-feed-story .NB-feed-story-title-container {
+ margin: 0 0 0 auto;
+ max-width: 700px;
+}
.NB-feed-story a.NB-feed-story-title {
display: block;
@@ -3423,6 +3431,14 @@ body {
.NB-feed-story .NB-feed-story-header .NB-feed-story-date-line {
clear: left;
}
+.NB-pref-story-position-center .NB-feed-story .NB-feed-story-header .NB-feed-story-date-line {
+ margin: 0 auto;
+ max-width: 700px;
+}
+.NB-pref-story-position-right .NB-feed-story .NB-feed-story-header .NB-feed-story-date-line {
+ margin: 0 0 0 auto;
+ max-width: 700px;
+}
.NB-feed-story .NB-feed-story-header .NB-feed-story-show-changes {
float: left;
font-size: 12px;
@@ -3484,7 +3500,13 @@ body {
max-width: 700px;
min-height: 12px;
}
-.NB-pref-full-width-story .NB-feed-story .NB-feed-story-content {
+.NB-pref-story-position-center .NB-feed-story .NB-feed-story-content {
+ margin: 0 auto;
+}
+.NB-pref-story-position-right .NB-feed-story .NB-feed-story-content {
+ margin: 0 0 0 auto;
+}
+.NB-pref-story-position-stretch .NB-feed-story .NB-feed-story-content {
max-width: none;
}
.NB-feed-story .NB-narrow-content .NB-feed-story-content {
@@ -5372,6 +5394,37 @@ background: transparent;
.NB-options-story-titles-pane-south .NB-icon {
background: transparent url("/media/embed/reader/layout_bottom.png") no-repeat center center;
}
+.NB-style-popover .NB-story-position-option .NB-icon {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ margin: 0;
+ vertical-align: text-bottom;
+}
+.NB-options-story-position .NB-story-position-option {
+ width: auto;
+ font-size: 12px;
+ padding: 4px 15px;
+}
+.NB-options-story-position-stretch {
+
+}
+.NB-options-story-position-left .NB-icon {
+ background: transparent url("/media/embed/reader/position_left.svg") no-repeat center center;
+ background-size: 16px;
+}
+.NB-options-story-position-center .NB-icon {
+ background: transparent url("/media/embed/reader/position_center.svg") no-repeat center center;
+ background-size: 16px;
+}
+.NB-options-story-position-right .NB-icon {
+ background: transparent url("/media/embed/reader/position_right.svg") no-repeat center center;
+ background-size: 16px;
+}
+.NB-options-story-position-stretch .NB-icon {
+ background: transparent url("/media/embed/reader/position_stretch.png") no-repeat center center;
+ background-size: 16px;
+}
.NB-style-popover .NB-options-single-story {
margin-top: 6px;
diff --git a/media/img/reader/position_center.svg b/media/img/reader/position_center.svg
new file mode 100644
index 000000000..ebd61d8c4
--- /dev/null
+++ b/media/img/reader/position_center.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/media/img/reader/position_left.svg b/media/img/reader/position_left.svg
new file mode 100644
index 000000000..619ffbd05
--- /dev/null
+++ b/media/img/reader/position_left.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/media/img/reader/position_right.svg b/media/img/reader/position_right.svg
new file mode 100644
index 000000000..3f7fcae41
--- /dev/null
+++ b/media/img/reader/position_right.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/media/img/reader/position_stretch.png b/media/img/reader/position_stretch.png
new file mode 100644
index 000000000..feca0d97a
Binary files /dev/null and b/media/img/reader/position_stretch.png differ
diff --git a/media/js/newsblur/reader/reader.js b/media/js/newsblur/reader/reader.js
index 7c110c977..d7f3369d8 100644
--- a/media/js/newsblur/reader/reader.js
+++ b/media/js/newsblur/reader/reader.js
@@ -529,8 +529,16 @@
add_body_classes: function() {
this.$s.$body.toggleClass('NB-is-premium', NEWSBLUR.Globals.is_premium);
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-full-width-story', !!this.model.preference('full_width_story'));
+ this.$s.$body.toggleClass('NB-is-authenticated', NEWSBLUR.Globals.is_authenticated);
+ if (!!this.model.preference('full_width_story')) {
+ this.model.preference('story_position', 'stretch');
+ this.model.preference('full_width_story', false); // Turn off to ignore and deprecate
+ }
+ this.$s.$body.removeClass('NB-pref-story-position-stretch')
+ .removeClass('NB-pref-story-position-left')
+ .removeClass('NB-pref-story-position-center')
+ .removeClass('NB-pref-story-position-right')
+ .toggleClass('NB-pref-story-position-' + this.model.preference('story_position'));
this.$s.$body.toggleClass('NB-dashboard-columns-single', this.model.preference('dashboard_columns') == 1);
this.$s.$body.removeClass('NB-story-layout-full')
.removeClass('NB-story-layout-split')
diff --git a/media/js/newsblur/reader/reader_preferences.js b/media/js/newsblur/reader/reader_preferences.js
index c42735fe6..f07a2ac9b 100644
--- a/media/js/newsblur/reader/reader_preferences.js
+++ b/media/js/newsblur/reader/reader_preferences.js
@@ -759,25 +759,6 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
'Open links'
])
]),
- $.make('div', { className: 'NB-preference NB-preference-fullwidthdstory' }, [
- $.make('div', { className: 'NB-preference-options' }, [
- $.make('div', [
- $.make('input', { id: 'NB-preference-fullwidthdstory-1', type: 'radio', name: 'full_width_story', value: "false" }),
- $.make('label', { 'for': 'NB-preference-fullwidthdstory-1' }, [
- 'Wrap story content at 700px to ease reading'
- ])
- ]),
- $.make('div', [
- $.make('input', { id: 'NB-preference-fullwidthdstory-2', type: 'radio', name: 'full_width_story', value: "true" }),
- $.make('label', { 'for': 'NB-preference-fullwidthdstory-2' }, [
- 'Wrap story content at the edge of the screen'
- ])
- ])
- ]),
- $.make('div', { className: 'NB-preference-label'}, [
- 'Story width'
- ])
- ]),
$.make('div', { className: 'NB-preference NB-preference-truncatestory' }, [
$.make('div', { className: 'NB-preference-options' }, [
$.make('div', [
@@ -1131,12 +1112,6 @@ _.extend(NEWSBLUR.ReaderPreferences.prototype, {
return false;
}
});
- $('input[name=full_width_story]', $modal).each(function() {
- if ($(this).val() == ""+NEWSBLUR.Preferences.full_width_story) {
- $(this).prop('checked', true);
- return false;
- }
- });
$('input[name=truncate_story]', $modal).each(function() {
if ($(this).val() == NEWSBLUR.Preferences.truncate_story) {
$(this).prop('checked', true);
diff --git a/media/js/newsblur/views/story_options_popover.js b/media/js/newsblur/views/story_options_popover.js
index 3b4033295..83f3e2f14 100644
--- a/media/js/newsblur/views/story_options_popover.js
+++ b/media/js/newsblur/views/story_options_popover.js
@@ -23,7 +23,9 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
"click .NB-view-setting-option": "change_view_setting",
"click .NB-line-spacing-option": "change_line_spacing",
"click .NB-story-titles-pane-option": "change_story_titles_pane",
+ "click .NB-story-position-option": "change_story_position",
"click .NB-single-story-option": "change_single_story",
+ "click .NB-story-": "change_story_position",
"click .NB-grid-columns-option": "change_grid_columns",
"click .NB-grid-height-option": "change_grid_height",
"click .NB-premium-link": "open_premium_modal"
@@ -74,8 +76,21 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
$.make('div', { className: 'NB-icon' }),
'Single Story'
])
+ ]),
+ $.make('ul', { className: 'segmented-control NB-options-story-position' }, [
+ $.make('li', { className: 'NB-story-position-option NB-options-story-position-stretch', role: "button" }, [
+ 'Full width'
+ ]),
+ $.make('li', { className: 'NB-story-position-option NB-options-story-position-left', role: "button" }, [
+ $.make('div', { className: 'NB-icon' })
+ ]),
+ $.make('li', { className: 'NB-story-position-option NB-options-story-position-center NB-active', role: "button" }, [
+ $.make('div', { className: 'NB-icon' })
+ ]),
+ $.make('li', { className: 'NB-story-position-option NB-options-story-position-right NB-active', role: "button" }, [
+ $.make('div', { className: 'NB-icon' })
+ ])
])
-
]),
$.make('div', { className: 'NB-popover-section' }, [
$.make('div', { className: 'NB-popover-section-title' }, 'Story Layout - Grid Columns'),
@@ -138,8 +153,8 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
])
]),
(!NEWSBLUR.Globals.is_premium && $.make('div', { className: 'NB-premium-explainer' }, [
- 'Premium fonts require a ',
- $.make('spam', { className: 'NB-splash-link NB-premium-link' }, 'premium account')
+ 'Premium fonts require a ',
+ $.make('span', { className: 'NB-splash-link NB-premium-link' }, 'premium account')
]))
]),
$.make('div', { className: 'NB-popover-section' }, [
@@ -204,6 +219,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
var grid_height = NEWSBLUR.assets.preference('grid_height');
var image_preview = NEWSBLUR.assets.preference('image_preview');
var content_preview = NEWSBLUR.assets.preference('show_content_preview');
+ var story_position = NEWSBLUR.assets.preference('story_position');
this.$('.NB-font-family-option').removeClass('NB-active');
this.$('.NB-options-font-family-'+font_family).addClass('NB-active');
@@ -216,6 +232,8 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
this.$('.NB-line-spacing-option').removeClass('NB-active');
this.$('.NB-options-line-spacing-'+line_spacing).addClass('NB-active');
+ this.$('.NB-story-position-option').removeClass('NB-active');
+ this.$('.NB-options-story-position-'+story_position).addClass('NB-active');
this.$('.NB-story-titles-pane-option').removeClass('NB-active');
this.$('.NB-options-story-titles-pane-'+titles_layout_pane).addClass('NB-active');
this.$('.NB-single-story-option').removeClass('NB-active');
@@ -373,6 +391,27 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({
NEWSBLUR.assets.preference('story_titles_pane_size', pane_size);
NEWSBLUR.reader.apply_resizable_layout({right_side: true});
},
+
+ change_story_position: function(e) {
+ var $target = $(e.currentTarget);
+
+ if ($target.hasClass("NB-options-story-position-stretch")) {
+ this.update_story_position('stretch');
+ } else if ($target.hasClass("NB-options-story-position-left")) {
+ this.update_story_position('left');
+ } else if ($target.hasClass("NB-options-story-position-center")) {
+ this.update_story_position('center');
+ } else if ($target.hasClass("NB-options-story-position-right")) {
+ this.update_story_position('right');
+ }
+
+ this.show_correct_options();
+ },
+
+ update_story_position: function(setting) {
+ NEWSBLUR.assets.preference('story_position', setting);
+ NEWSBLUR.reader.add_body_classes();
+ },
change_single_story: function(e) {
var $target = $(e.currentTarget);
diff --git a/templates/base.html b/templates/base.html
index a13aecc7a..45d81aa63 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -86,6 +86,7 @@
'show_global_shared_stories': true,
'show_infrequent_site_stories': true,
'full_width_story' : false,
+ 'story_position' : 'left',
'truncate_story' : 'social',
'autoopen_folder' : false,
'show_content_preview' : true,