public-mirrors/NewsBlur-viq
1
0
Fork 0
mirror of https://github.com/viq/NewsBlur.git synced 2025-09-18 21:43:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dashboard widgets compress nicely. Feed taskbar reflows.

Browse source
This commit is contained in:
Samuel Clay 2013-01-25 10:57:09 -08:00
parent 6199c0d27c
commit 03aba32805
6 changed files with 85 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
media/css/reader.css
View file

@ -90,16 +90,49 @@ body {
/* = Splash page = */ /* = Splash page = */
/* =============== */ /* =============== */
.right-pane {
display: none !important;
}
.NB-show-reader .right-pane {
display: block !important;
}
.NB-splash {
display: block;
}
.NB-show-reader .NB-splash {
display: none;
}
#NB-splash {
display: block;
}
.NB-show-reader #NB-splash {
display: none;
}
#NB-splash-overlay {
display: block;
}
.NB-show-reader #NB-splash-overlay {
display: none;
}
.NB-splash-bottom {
display: block;
}
.NB-show-reader .NB-splash-bottom {
display: none;
}
.NB-splash-heading { .NB-splash-heading {
display: none; display: none;
} }
.NB-account { .NB-account {
float: left; position: absolute;
right: 0;
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
width: 180px; width: 180px;
margin: 0 0 32px 0; margin: 0 24px 32px 0;
} }
.NB-account .NB-module-header-login { .NB-account .NB-module-header-login {
@ -3276,7 +3309,6 @@ background: transparent;
border-left: 1px solid #828282; border-left: 1px solid #828282;
} }
.NB-taskbar .taskbar_nav_feeds,
.NB-taskbar .taskbar_nav_view { .NB-taskbar .taskbar_nav_view {
float: left; float: left;
} }
@ -3349,24 +3381,38 @@ background: transparent;
cursor: pointer; cursor: pointer;
} }
.NB-taskbar .task_button.NB-disabled { .NB-taskbar .task_button.NB-disabled,
.NB-feed-taskbar .NB-task-button.NB-disabled {
opacity: .3; opacity: .3;
cursor: default; cursor: default;
} }
.NB-taskbar .task_button.NB-task-add .NB-task-image { /* ================ */
left: 12px; /* = Feed Taskbar = */
/* ================ */
.NB-feed-taskbar {
overflow: hidden;
}
.NB-feed-taskbar .NB-task-button {
padding: 6px 8px;
}
.NB-feed-taskbar .NB-task-add {
float: left;
}
.NB-feed-taskbar .NB-task-manage {
float: right;
}
.NB-feed-taskbar .NB-task-image {
width: 16px;
height: 16px;
}
.NB-feed-taskbar .NB-task-add .NB-task-image {
background: transparent url('/media/embed/icons/silk/add.png') no-repeat 0 0; background: transparent url('/media/embed/icons/silk/add.png') no-repeat 0 0;
} }
.NB-taskbar .task_button.NB-task-manage .NB-task-image { .NB-feed-taskbar .NB-task-manage .NB-task-image {
left: 12px;
background: transparent url('/media/embed/icons/silk/cog.png') no-repeat 0 0; background: transparent url('/media/embed/icons/silk/cog.png') no-repeat 0 0;
} }
.NB-taskbar .task_button.task_profile .NB-task-image {
left: 12px;
background: transparent url('/media/embed/icons/silk/user.png') no-repeat 0 0;
}
.NB-taskbar .taskbar_nav_story { .NB-taskbar .taskbar_nav_story {
right: 0; right: 0;
@ -3640,6 +3686,11 @@ form.opml_import_form input {
margin: 0 0 32px; margin: 0 0 32px;
} }
.NB-splash-modules {
max-width: 750px;
min-width: 500px;
position: relative;
}
.NB-splash-info { .NB-splash-info {
width: 100%; width: 100%;
height: 55px; height: 55px;
@ -3958,11 +4009,11 @@ form.opml_import_form input {
/* ======================= */ /* ======================= */
.NB-taskbar-intelligence { .NB-taskbar-intelligence {
position: absolute; margin: 5px auto 0;
left: 90px;
top: 6px;
font-size: 9px; font-size: 9px;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-align: center;
} }
.NB-taskbar-intelligence.NB-modal-slider { .NB-taskbar-intelligence.NB-modal-slider {
@ -3993,6 +4044,7 @@ form.opml_import_form input {
} }
.NB-intelligence-slider { .NB-intelligence-slider {
display: inline-block;
} }
.NB-intelligence-slider .segmented-control { .NB-intelligence-slider .segmented-control {
float: left; float: left;
@ -4690,7 +4742,7 @@ form.opml_import_form input {
/* =========================== */ /* =========================== */
.NB-account .NB-module { .NB-account .NB-module {
margin: 24px 0 0; margin: 24px 0;
padding: 0; padding: 0;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
@ -4902,7 +4954,7 @@ form.opml_import_form input {
/* ================== */ /* ================== */
.NB-modules-center { .NB-modules-center {
margin: 24px 0 0 0px; margin: 24px 204px 0 0px;
padding: 0 24px; padding: 0 24px;
max-width: 500px; max-width: 500px;
float: left; float: left;
@ -4912,12 +4964,6 @@ form.opml_import_form input {
margin: 0 0 24px; margin: 0 0 24px;
} }
@media screen and (max-width: 950px) {
.NB-modules-center {
display: none;
}
}
/* ============ */ /* ============ */
/* = Features = */ /* = Features = */
/* ============ */ /* ============ */

20
media/js/newsblur/reader/reader.js
View file

@ -197,7 +197,6 @@
apply_resizable_layout: function(refresh) { apply_resizable_layout: function(refresh) {
var story_anchor = this.model.preference('story_pane_anchor'); var story_anchor = this.model.preference('story_pane_anchor');
var right_pane_hidden = !$('.right-pane').is(':visible');
if (refresh) { if (refresh) {
this.layout.contentLayout && this.layout.contentLayout.destroy(); this.layout.contentLayout && this.layout.contentLayout.destroy();
@ -310,15 +309,10 @@
} }
this.layout.contentLayout = this.$s.$content_pane.layout(contentLayoutOptions); this.layout.contentLayout = this.$s.$content_pane.layout(contentLayoutOptions);
if (!refresh) { if (refresh) {
$('.right-pane').hide();
} else {
this.$s.$feed_stories.append(feed_stories_bin.children()); this.$s.$feed_stories.append(feed_stories_bin.children());
this.$s.$story_titles.append(story_titles_bin.children()); this.$s.$story_titles.append(story_titles_bin.children());
this.resize_window(); this.resize_window();
if (right_pane_hidden) {
$('.right-pane').hide();
}
} }
}, },
@ -356,7 +350,7 @@
var feed_pane_size = state.size; var feed_pane_size = state.size;
$('#NB-splash').css('left', feed_pane_size); $('#NB-splash').css('left', feed_pane_size);
$pane.toggleClass("NB-narrow", this.layout.outerLayout.state.west.size < 240); $pane.toggleClass("NB-narrow", this.layout.outerLayout.state.west.size < 220);
this.flags.set_feed_pane_size = this.flags.set_feed_pane_size || _.debounce( _.bind(function() { this.flags.set_feed_pane_size = this.flags.set_feed_pane_size || _.debounce( _.bind(function() {
var feed_pane_size = this.layout.outerLayout.state.west.size; var feed_pane_size = this.layout.outerLayout.state.west.size;
this.model.preference('feed_pane_size', feed_pane_size); this.model.preference('feed_pane_size', feed_pane_size);
@ -408,10 +402,7 @@
if (!$('.right-pane').is(':visible')) { if (!$('.right-pane').is(':visible')) {
resize = true; resize = true;
} }
$('.right-pane').show(); this.$s.$body.addClass('NB-show-reader');
$('#NB-splash,.NB-splash').hide();
$('#NB-splash-overlay').hide();
$('.NB-splash-bottom').hide();
if (resize) { if (resize) {
this.$s.$layout.layout().resizeAll(); this.$s.$layout.layout().resizeAll();
@ -423,10 +414,7 @@
show_splash_page: function(skip_router) { show_splash_page: function(skip_router) {
this.reset_feed(); this.reset_feed();
$('.right-pane').hide(); this.$s.$body.removeClass('NB-show-reader');
$('#NB-splash,.NB-splash').show();
$('#NB-splash-overlay').show();
$('.NB-splash-bottom').show();
if (!skip_router) { if (!skip_router) {
NEWSBLUR.router.navigate(''); NEWSBLUR.router.navigate('');

6
media/js/newsblur/reader/reader_popover.js
View file

@ -14,14 +14,13 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
left: 0 left: 0
} }
}, this.options, options); }, this.options, options);
console.log(["options", options, this.options]);
this.render(); this.render();
}, },
render: function() { render: function() {
var self = this; var self = this;
this._open = true; this._open = true;
console.log(["popover render", this.$el, this.options]);
var $popover = $.make("div", { className: "NB-popover popover fade" }, [ var $popover = $.make("div", { className: "NB-popover popover fade" }, [
$.make('div', { className: "arrow" }), $.make('div', { className: "arrow" }),
$.make('div', { className: "popover-inner" }, [ $.make('div', { className: "popover-inner" }, [
@ -49,7 +48,6 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
}, },
close: function(e, hide_callback) { close: function(e, hide_callback) {
console.log(["close", hide_callback, this.$el, $.support.transition, this.$el.hasClass('fade')]);
var $el = this.$el; var $el = this.$el;
var self = this; var self = this;
if (_.isFunction(e)) hide_callback = e; if (_.isFunction(e)) hide_callback = e;
@ -59,7 +57,6 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
function removeWithAnimation() { function removeWithAnimation() {
var timeout = setTimeout(function () { var timeout = setTimeout(function () {
console.log(["transition timeout", $el]);
$el.off($.support.transition.end); $el.off($.support.transition.end);
self._open = false; self._open = false;
self.remove(); self.remove();
@ -71,7 +68,6 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
self._open = false; self._open = false;
self.remove(); self.remove();
hide_callback(); hide_callback();
console.log(["transition end", $el]);
}); });
} }

2
media/js/newsblur/views/sidebar_header_view.js
View file

@ -5,7 +5,7 @@ NEWSBLUR.Views.SidebarHeader = Backbone.View.extend({
}, },
events: { events: {
'click .NB-feeds-header-dashboard' : 'show_splash_page' 'click .NB-feeds-header-user-dashboard' : 'show_splash_page'
}, },
initialize: function() { initialize: function() {

4
templates/reader/dashboard.xhtml
View file

@ -32,7 +32,7 @@
<h2 class="NB-splash-heading">- The best stories from your friends and favorite blogs, all in one place.</h2> <h2 class="NB-splash-heading">- The best stories from your friends and favorite blogs, all in one place.</h2>
<div id="NB-splash" style="left: {% firstof user_profile.feed_pane_size 240 %}px"> <div id="NB-splash" style="left: {% firstof user_profile.feed_pane_size 240 %}px">
<div class="NB-splash-modules">
<div class="NB-modules-center"> <div class="NB-modules-center">
{# {% render_interactions_module %} #} {# {% render_interactions_module %} #}
@ -153,7 +153,7 @@
{% endif %} {% endif %}
</div> </div>
</div>
</div> </div>
{% render_feeds_skeleton %} {% render_feeds_skeleton %}

23
templates/reader/feeds_skeleton.xhtml
View file

@ -112,27 +112,19 @@
<div class="left-south"> <div class="left-south">
<div class="NB-taskbar-container"> <div class="NB-taskbar-container">
<div class="NB-taskbar"> <div class="NB-feed-taskbar">
<div class="NB-callout-ftux NB-callout"> <div class="NB-callout-ftux NB-callout">
<div class="NB-callout-container"> <div class="NB-callout-container">
<div class="NB-callout-text"></div> <div class="NB-callout-text"></div>
<div class="NB-callout-arrow"></div> <div class="NB-callout-arrow"></div>
</div> </div>
</div> </div>
<ul class="taskbar_nav taskbar_nav_feeds"> <div class="NB-task-button NB-task-add">
<li class="task_button task_button_menu NB-task-add"> <div class="NB-task-image"></div>
<div class="NB-task-button-wrapper"> </div>
<div class="task_button_background"></div> <div class="NB-task-button NB-task-manage NB-disabled">
<div class="NB-task-image"></div> <div class="NB-task-image"></div>
</div> </div>
</li>
<li class="task_button task_button_menu NB-task-manage NB-disabled">
<div class="NB-task-button-wrapper">
<div class="task_button_background"></div>
<div class="NB-task-image"></div>
</div>
</li>
</ul>
<div class="NB-taskbar-intelligence"> <div class="NB-taskbar-intelligence">
<div class="NB-intelligence-slider"> <div class="NB-intelligence-slider">
<ul class="segmented-control"> <ul class="segmented-control">
@ -150,7 +142,6 @@
</ul> </ul>
</div> </div>
</div> </div>
{# <div class="NB-taskbar-sidebar-toggle-close" title="Hide sidebar (shift + u)"></div> #}
</div> </div>
</div> </div>
</div> </div>