mirror of
https://github.com/viq/NewsBlur.git
synced 2025-09-18 21:43:31 +00:00
Dashboard widgets compress nicely. Feed taskbar reflows.
This commit is contained in:
Samuel Clay
parent
6199c0d27c
commit
03aba32805
6 changed files with 85 additions and 64 deletions
|
|
@ -90,16 +90,49 @@ body {
|
|||
/* = 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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.NB-account {
|
||||
float: left;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
width: 180px;
|
||||
margin: 0 0 32px 0;
|
||||
margin: 0 24px 32px 0;
|
||||
}
|
||||
|
||||
.NB-account .NB-module-header-login {
|
||||
|
|
@ -3276,7 +3309,6 @@ background: transparent;
|
|||
border-left: 1px solid #828282;
|
||||
}
|
||||
|
||||
.NB-taskbar .taskbar_nav_feeds,
|
||||
.NB-taskbar .taskbar_nav_view {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -3349,24 +3381,38 @@ background: transparent;
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.NB-taskbar .task_button.NB-disabled {
|
||||
.NB-taskbar .task_button.NB-disabled,
|
||||
.NB-feed-taskbar .NB-task-button.NB-disabled {
|
||||
opacity: .3;
|
||||
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;
|
||||
}
|
||||
.NB-taskbar .task_button.NB-task-manage .NB-task-image {
|
||||
left: 12px;
|
||||
.NB-feed-taskbar .NB-task-manage .NB-task-image {
|
||||
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 {
|
||||
right: 0;
|
||||
|
|
@ -3640,6 +3686,11 @@ form.opml_import_form input {
|
|||
margin: 0 0 32px;
|
||||
}
|
||||
|
||||
.NB-splash-modules {
|
||||
max-width: 750px;
|
||||
min-width: 500px;
|
||||
position: relative;
|
||||
}
|
||||
.NB-splash-info {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
|
|
@ -3958,11 +4009,11 @@ form.opml_import_form input {
|
|||
/* ======================= */
|
||||
|
||||
.NB-taskbar-intelligence {
|
||||
position: absolute;
|
||||
left: 90px;
|
||||
top: 6px;
|
||||
margin: 5px auto 0;
|
||||
font-size: 9px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.NB-taskbar-intelligence.NB-modal-slider {
|
||||
|
|
@ -3993,6 +4044,7 @@ form.opml_import_form input {
|
|||
}
|
||||
|
||||
.NB-intelligence-slider {
|
||||
display: inline-block;
|
||||
}
|
||||
.NB-intelligence-slider .segmented-control {
|
||||
float: left;
|
||||
|
|
@ -4690,7 +4742,7 @@ form.opml_import_form input {
|
|||
/* =========================== */
|
||||
|
||||
.NB-account .NB-module {
|
||||
margin: 24px 0 0;
|
||||
margin: 24px 0;
|
||||
padding: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
|
|
@ -4902,7 +4954,7 @@ form.opml_import_form input {
|
|||
/* ================== */
|
||||
|
||||
.NB-modules-center {
|
||||
margin: 24px 0 0 0px;
|
||||
margin: 24px 204px 0 0px;
|
||||
padding: 0 24px;
|
||||
max-width: 500px;
|
||||
float: left;
|
||||
|
|
@ -4912,12 +4964,6 @@ form.opml_import_form input {
|
|||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
.NB-modules-center {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============ */
|
||||
/* = Features = */
|
||||
/* ============ */
|
||||
|
|
|
|||
|
|
@ -197,7 +197,6 @@
|
|||
|
||||
apply_resizable_layout: function(refresh) {
|
||||
var story_anchor = this.model.preference('story_pane_anchor');
|
||||
var right_pane_hidden = !$('.right-pane').is(':visible');
|
||||
|
||||
if (refresh) {
|
||||
this.layout.contentLayout && this.layout.contentLayout.destroy();
|
||||
|
|
@ -310,15 +309,10 @@
|
|||
}
|
||||
this.layout.contentLayout = this.$s.$content_pane.layout(contentLayoutOptions);
|
||||
|
||||
if (!refresh) {
|
||||
$('.right-pane').hide();
|
||||
} else {
|
||||
if (refresh) {
|
||||
this.$s.$feed_stories.append(feed_stories_bin.children());
|
||||
this.$s.$story_titles.append(story_titles_bin.children());
|
||||
this.resize_window();
|
||||
if (right_pane_hidden) {
|
||||
$('.right-pane').hide();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -356,7 +350,7 @@
|
|||
var feed_pane_size = state.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() {
|
||||
var feed_pane_size = this.layout.outerLayout.state.west.size;
|
||||
this.model.preference('feed_pane_size', feed_pane_size);
|
||||
|
|
@ -408,10 +402,7 @@
|
|||
if (!$('.right-pane').is(':visible')) {
|
||||
resize = true;
|
||||
}
|
||||
$('.right-pane').show();
|
||||
$('#NB-splash,.NB-splash').hide();
|
||||
$('#NB-splash-overlay').hide();
|
||||
$('.NB-splash-bottom').hide();
|
||||
this.$s.$body.addClass('NB-show-reader');
|
||||
|
||||
if (resize) {
|
||||
this.$s.$layout.layout().resizeAll();
|
||||
|
|
@ -423,10 +414,7 @@
|
|||
|
||||
show_splash_page: function(skip_router) {
|
||||
this.reset_feed();
|
||||
$('.right-pane').hide();
|
||||
$('#NB-splash,.NB-splash').show();
|
||||
$('#NB-splash-overlay').show();
|
||||
$('.NB-splash-bottom').show();
|
||||
this.$s.$body.removeClass('NB-show-reader');
|
||||
|
||||
if (!skip_router) {
|
||||
NEWSBLUR.router.navigate('');
|
||||
|
|
|
|||
|
|
@ -14,14 +14,13 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
|
|||
left: 0
|
||||
}
|
||||
}, this.options, options);
|
||||
console.log(["options", options, this.options]);
|
||||
this.render();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var self = this;
|
||||
this._open = true;
|
||||
console.log(["popover render", this.$el, this.options]);
|
||||
|
||||
var $popover = $.make("div", { className: "NB-popover popover fade" }, [
|
||||
$.make('div', { className: "arrow" }),
|
||||
$.make('div', { className: "popover-inner" }, [
|
||||
|
|
@ -49,7 +48,6 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
|
|||
},
|
||||
|
||||
close: function(e, hide_callback) {
|
||||
console.log(["close", hide_callback, this.$el, $.support.transition, this.$el.hasClass('fade')]);
|
||||
var $el = this.$el;
|
||||
var self = this;
|
||||
if (_.isFunction(e)) hide_callback = e;
|
||||
|
|
@ -59,7 +57,6 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
|
|||
|
||||
function removeWithAnimation() {
|
||||
var timeout = setTimeout(function () {
|
||||
console.log(["transition timeout", $el]);
|
||||
$el.off($.support.transition.end);
|
||||
self._open = false;
|
||||
self.remove();
|
||||
|
|
@ -71,7 +68,6 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
|
|||
self._open = false;
|
||||
self.remove();
|
||||
hide_callback();
|
||||
console.log(["transition end", $el]);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ NEWSBLUR.Views.SidebarHeader = Backbone.View.extend({
|
|||
},
|
||||
|
||||
events: {
|
||||
'click .NB-feeds-header-dashboard' : 'show_splash_page'
|
||||
'click .NB-feeds-header-user-dashboard' : 'show_splash_page'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<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 class="NB-splash-modules">
|
||||
<div class="NB-modules-center">
|
||||
|
||||
{# {% render_interactions_module %} #}
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% render_feeds_skeleton %}
|
||||
|
|
|
|||
|
|
@ -112,27 +112,19 @@
|
|||
|
||||
<div class="left-south">
|
||||
<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-container">
|
||||
<div class="NB-callout-text"></div>
|
||||
<div class="NB-callout-arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="taskbar_nav taskbar_nav_feeds">
|
||||
<li class="task_button task_button_menu NB-task-add">
|
||||
<div class="NB-task-button-wrapper">
|
||||
<div class="task_button_background"></div>
|
||||
<div class="NB-task-image"></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-task-button NB-task-add">
|
||||
<div class="NB-task-image"></div>
|
||||
</div>
|
||||
<div class="NB-task-button NB-task-manage NB-disabled">
|
||||
<div class="NB-task-image"></div>
|
||||
</div>
|
||||
<div class="NB-taskbar-intelligence">
|
||||
<div class="NB-intelligence-slider">
|
||||
<ul class="segmented-control">
|
||||
|
|
@ -150,7 +142,6 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{# <div class="NB-taskbar-sidebar-toggle-close" title="Hide sidebar (shift + u)"></div> #}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue