Fixing up the statistics modal. New style, moving around feed selector, and making it expand gracefully on load.

media/css/reader.css

@@ -1475,7 +1475,7 @@ a.NB-splash-link:hover {
 }
 
 .NB-modal .NB-modal-subtitle {
-    margin:10px 0 0;
+    margin:12px 0 0;
     padding:8px 12px;
     font-size: 14px;
     position: relative;
@@ -2481,9 +2481,9 @@ background: transparent;
 }
 
 .NB-modal-statistics .NB-statistics-stat {
-    background-color: #E0FFE0;
+    border: 1px solid #e6e6e6;
     clear: both;
-    margin: 24px 0 12px;
+    margin: 24px 0 0;
     overflow: hidden;
     padding: 10px 0;
 }
@@ -2521,8 +2521,12 @@ background: transparent;
   width: 325px;
 }
 .NB-modal-statistics .NB-modal-feed-chooser-container {
-  margin: 6px 0 12px;
+  margin: 3px 0 12px;
 }
 .NB-modal-statistics .NB-modal-feed-chooser-container .NB-modal-feed-chooser {
-    width: 100%;
-}
+  margin: 0 0 12px;
+}
+
+.NB-modal-statistics .NB-modal-loading {
+  margin: 6px 8px 0;
+}

media/js/newsblur/reader.js

@@ -654,7 +654,7 @@
                     $('.folder', e.target).tsort('.folder_title');
                     self.save_feed_order();
                     ui.item.css({'backgroundColor': '#D7DDE6'})
-                           .animate({'backgroundColor': '#F67066'}, {'duration': 700})
+                           .animate({'backgroundColor': '#F0F076'}, {'duration': 800})
                            .animate({'backgroundColor': '#D7DDE6'}, {'duration': 1000});
                 }
             });
@@ -1903,7 +1903,7 @@
                     $.make('li', { className: 'NB-menu-manage-feed NB-menu-manage-feed-stats' }, [
                         $.make('div', { className: 'NB-menu-manage-image' }),
                         $.make('div', { className: 'NB-menu-manage-title' }, 'Site statistics'),
-                        $.make('div', { className: 'NB-menu-manage-subtitle' }, 'Popularity, load times, and history.')
+                        $.make('div', { className: 'NB-menu-manage-subtitle' }, 'Popularity, load times, history.')
                     ]),
                     $.make('li', { className: 'NB-menu-manage-feed NB-menu-manage-feed-mark-read' }, [
                         $.make('div', { className: 'NB-menu-manage-image' }),

media/js/newsblur/reader_classifier.js

@@ -556,17 +556,6 @@ var classifier = {
     
     open_modal: function() {
         var self = this;
-
-        var $holder = $.make('div', { className: 'NB-modal-holder' })
-            .append(this.$modal)
-            .appendTo('body')
-            .css({'visibility': 'hidden', 'display': 'block', 'width': 600});
-        var height = $('.NB-classifier', $holder).outerHeight(true);
-        $holder.css({'visibility': 'visible', 'display': 'none'});
-        var w = $.modal.impl.getDimensions();
-        if (height > w[0] - 70) {
-            height = w[0] - 70;
-        }
         
         this.$modal.modal({
             'minWidth': 600,

media/js/newsblur/reader_statistics.js

@@ -14,9 +14,13 @@ NEWSBLUR.ReaderStatistics = function(feed_id, options) {
 NEWSBLUR.ReaderStatistics.prototype = {
     
     runner: function() {
+        var self = this;
+        
         this.make_modal();
         this.open_modal();
-        this.get_stats();
+        setTimeout(function() {
+            self.get_stats();
+        }, 50);
         
         this.$modal.bind('change', $.rescope(this.handle_change, this));
     },
@@ -25,16 +29,16 @@ NEWSBLUR.ReaderStatistics.prototype = {
         var self = this;
         
         this.$modal = $.make('div', { className: 'NB-modal-statistics NB-modal' }, [
+            $.make('div', { className: 'NB-modal-feed-chooser-container'}, [
+                this.make_feed_chooser()
+            ]),
             $.make('div', { className: 'NB-modal-loading' }),
             $.make('h2', { className: 'NB-modal-title' }, 'Statistics & History'),
             $.make('h2', { className: 'NB-modal-subtitle' }, [
                 $.make('img', { className: 'NB-modal-feed-image feed_favicon', src: this.google_favicon_url + this.feed.feed_link }),
                 $.make('span', { className: 'NB-modal-feed-title' }, this.feed.feed_title)
             ]),
-            $.make('div', { className: 'NB-modal-statistics-info' }),
-            $.make('div', { className: 'NB-modal-feed-chooser-container'}, [
-                this.make_feed_chooser()
-            ])
+            $.make('div', { className: 'NB-modal-statistics-info' })
         ]);
     },
         
@@ -51,6 +55,7 @@ NEWSBLUR.ReaderStatistics.prototype = {
 
         this.$modal.modal({
             'minWidth': 600,
+            'minHeight': 425,
             'overlayClose': true,
             'autoResize': true,
             'onOpen': function (dialog) {
@@ -61,6 +66,7 @@ NEWSBLUR.ReaderStatistics.prototype = {
             },
             'onShow': function(dialog) {
                 $('#simplemodal-container').corner('6px');
+                $.modal.impl.setPosition();
             },
             'onClose': function(dialog) {
                 dialog.data.hide().empty().remove();