Pager is working again.

IPython/frontend/html/notebook/static/css/notebook.css

@@ -122,7 +122,7 @@ div#left_panel {
 }
 
 div#left_panel_splitter {
-    width: 7px;
+    width: 8px;
     top: 0px;
     left: 202px;
     margin: 0px;
@@ -131,7 +131,7 @@ div#left_panel_splitter {
 }
 
 div#notebook_panel {
-    margin: 0px 0px 0px 211px;
+    margin: 0px 0px 0px 209px;
     padding: 0px;
 }
 
@@ -139,14 +139,14 @@ div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
-    padding: 0px 0px;
+    padding: 0px 15px 15px 15px;
     margin: 0px
     background-color: white;
     font-size: 12pt;
 }
 
 div#pager_splitter {
-    height: 7px;
+    height: 8px;
 }
 
 div#pager {
@@ -161,7 +161,7 @@ div#pager {
 
 div.cell {
     width: 100%;
-    padding: 0px;
+    padding: 5px;
     /* This acts as a spacer between cells, that is outside the border */
     margin: 15px 0px 15px 0px;
 }

IPython/frontend/html/notebook/static/js/cell.js

@@ -20,23 +20,6 @@ var IPython = (function (IPython) {
     };
 
 
-    Cell.prototype.grow = function(element) {
-        // Grow the cell by hand. This is used upon reloading from JSON, when the
-        // autogrow handler is not called.
-        var dom = element.get(0);
-        var lines_count = 0;
-        // modified split rule from
-        // http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea/2036424#2036424
-        var lines = dom.value.split(/\r|\r\n|\n/);
-        lines_count = lines.length;
-        if (lines_count >= 1) {
-            dom.rows = lines_count;
-        } else {
-            dom.rows = 1;
-        }
-    };
-
-
     Cell.prototype.select = function () {
         this.element.addClass('ui-widget-content ui-corner-all');
         this.selected = true;

IPython/frontend/html/notebook/static/js/codecell.js

@@ -18,7 +18,7 @@ var IPython = (function (IPython) {
 
 
     CodeCell.prototype.create_element = function () {
-        var cell =  $('<div></div>').addClass('cell code_cell vbox');
+        var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt monospace-font'));
         var input_area = $('<div/>').addClass('input_area box-flex1');

IPython/frontend/html/notebook/static/js/notebook.js

@@ -81,6 +81,22 @@ var IPython = (function (IPython) {
                 };
             };
         });
+
+        this.element.bind('collapse_pager', function () {
+            var that_height = that.element.outerHeight(true);
+            var pager_height = $('div#pager').outerHeight(true);
+            var new_height = that_height + pager_height; 
+            console.log('collapse', that_height, pager_height, new_height);
+            that.element.animate({height : new_height + 'px'}, 'fast');
+        });
+
+        this.element.bind('expand_pager', function () {
+            var that_height = that.element.outerHeight(true);
+            var pager_height = $('div#pager').outerHeight(true);
+            var new_height = that_height - pager_height; 
+            console.log('expand', that_height, pager_height, new_height);
+            that.element.animate({height : new_height + 'px'}, 'fast');
+        });
     };
 
 

IPython/frontend/html/notebook/static/js/notebook_main.js

@@ -7,10 +7,11 @@
 $(document).ready(function () {
 
 
-    $('div#notebook_app').addClass('ui-widget ui-widget-content')
-    $('div#left_panel').addClass('ui-widget')
-    $('div#left_panel_splitter').addClass('ui-widget ui-widget-content')
-    $('div#notebook_panel').addClass('ui-widget')
+    $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content');
+    $('div#left_panel').addClass('border-box-sizing ui-widget');
+    $('div#left_panel_splitter').addClass('border-box-sizing ui-widget ui-state-default');
+    $('div#notebook_panel').addClass('border-box-sizing ui-widget');
+    $('div#notebook').addClass('border-box-sizing');
 
     $('div#left_panel_splitter').click(function () {
         $('div#left_panel').toggle('fast');
@@ -40,12 +41,16 @@ $(document).ready(function () {
         var win = $(window);
         var w = win.width();
         var h = win.height();
-        var app_height = h - 50;
-        $('div#notebook_app').height(app_height);
+        var header_height = $('div#header').outerHeight(true);
+        var app_height = h - header_height - 2;
+        var pager_height = $('div#pager').outerHeight(true);
+        var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
+        $('div#notebook_app').height(app_height + 2);
         $('div#left_panel').height(app_height);
         $('div#left_panel_splitter').height(app_height);
         $('div#notebook_panel').height(app_height);
-        $('div#notebook').height(app_height-211);
+        $('div#notebook').height(app_height-pager_height-pager_splitter_height);
+        console.log('resize: ', app_height);
     };
 
     $(window).resize(do_resize);

IPython/frontend/html/notebook/static/js/pager.js

@@ -10,22 +10,27 @@ var IPython = (function (IPython) {
     var Pager = function (pager_selector, pager_toggle_selector) {
         this.pager_element = $(pager_selector);
         this.pager_toggle_element = $(pager_toggle_selector);
+        this.expanded = true;
         this.style();
         this.bind_events();
-        this.collapse();
     };
 
 
     Pager.prototype.style = function () {
-        this.pager_toggle_element.addClass('ui-widget ui-widget-content')
-        this.pager_element.addClass('')
+        this.pager_toggle_element.addClass('border-box-sizing ui-widget ui-state-default');
+        this.pager_element.addClass('border-box-sizing ui-widget');
     };
 
 
     Pager.prototype.bind_events = function () {
         var that = this;
-        this.pager_toggle_element.click(function () {
-            that.pager_element.toggle('fast');
+
+        this.pager_element.bind('collapse_pager', function () {
+            that.pager_element.hide('fast');
+        });
+
+        this.pager_element.bind('expand_pager', function () {
+            that.pager_element.show('fast');
         });
 
         this.pager_toggle_element.hover(
@@ -36,16 +41,35 @@ var IPython = (function (IPython) {
                 that.pager_toggle_element.removeClass('ui-state-hover');
             }
         );
+
+        this.pager_toggle_element.click(function () {
+            that.toggle();
+        });
     };
 
 
     Pager.prototype.collapse = function () {
-        this.pager_element.hide('fast');
+        if (this.expanded === true) {
+            this.pager_element.add($('div#notebook')).trigger('collapse_pager');
+            this.expanded = false;
+        };
     };
 
 
     Pager.prototype.expand = function () {
-        this.pager_element.show('fast');
+        if (this.expanded !== true) {
+            this.pager_element.add($('div#notebook')).trigger('expand_pager');
+            this.expanded = true;
+        };
+    };
+
+
+    Pager.prototype.toggle = function () {
+        if (this.expanded === true) {
+            this.collapse();
+        } else {
+            this.expand();
+        };
     };
 
 

IPython/frontend/html/notebook/static/js/utils.js

@@ -32,6 +32,7 @@ IPython.utils = (function (IPython) {
             .replace(/`/g,'&'+'#96;')
     }
 
+
     //Map from terminal commands to CSS classes
     attrib = {
         "30":"cblack", "31":"cred",
@@ -63,9 +64,28 @@ IPython.utils = (function (IPython) {
         return txt.trim()
     }
 
+
+    grow = function(element) {
+        // Grow the cell by hand. This is used upon reloading from JSON, when the
+        // autogrow handler is not called.
+        var dom = element.get(0);
+        var lines_count = 0;
+        // modified split rule from
+        // http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea/2036424#2036424
+        var lines = dom.value.split(/\r|\r\n|\n/);
+        lines_count = lines.length;
+        if (lines_count >= 1) {
+            dom.rows = lines_count;
+        } else {
+            dom.rows = 1;
+        }
+    };
+
+
     return {
         uuid : uuid,
-        fixConsole : fixConsole
+        fixConsole : fixConsole,
+        grow : grow
     }
 
 }(IPython));

IPython/frontend/html/notebook/templates/notebook.html

@@ -6,9 +6,9 @@
 
     <title>IPython Notebook</title>
 
-    <!-- <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" /> -->
+    <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" />
     <!-- <link rel="stylesheet" href="static/jquery/css/themes/rocket/jquery-wijmo.css" type="text/css" /> -->
-    <link rel="stylesheet" href="static/jquery/css/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/css" />
+<!--    <link rel="stylesheet" href="static/jquery/css/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/css" />-->
 
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" charset="utf-8"></script>
     <!-- <script type='text/javascript' src='static/mathjax/MathJax.js?config=TeX-AMS_HTML' charset='utf-8'></script> -->