From c426f8d40d9d247e97b6fb6e6331fc4352c75f85 Mon Sep 17 00:00:00 2001 From: Matthias BUSSONNIER Date: Sat, 2 Feb 2013 14:02:22 +0100 Subject: [PATCH 1/3] fix celltoolbar layout on FF --- .../html/notebook/static/css/celltoolbar.css | 50 +++++++++++-------- .../html/notebook/static/js/celltoolbar.js | 8 +-- .../html/notebook/static/js/codecell.js | 8 +-- 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/IPython/frontend/html/notebook/static/css/celltoolbar.css b/IPython/frontend/html/notebook/static/css/celltoolbar.css index f3320a609..3d1b5339e 100644 --- a/IPython/frontend/html/notebook/static/css/celltoolbar.css +++ b/IPython/frontend/html/notebook/static/css/celltoolbar.css @@ -3,21 +3,15 @@ .celltoolbar { border: thin solid #CFCFCF; - margin-left: 0px; border-bottom: none; - margin:0; - padding:0; background : #EEE; border-top-right-radius: 3px; border-top-left-radius: 3px; + width:100%; + -webkit-box-pack: end; + height:20px; } -.celltoolbar div{ - line-height: 0; - margin:0; - padding:0; - } - .no_input_radius { border-top-right-radius: 0px; @@ -33,12 +27,19 @@ } .ctb_hideshow { - display: none; + display:none; + vertical-align:bottom; + padding-right: 2px; +} + +.celltoolbar > div { + padding-top: 0px; } .ctb_area { margin:0; padding:0; + width:100%; } @@ -47,10 +48,10 @@ all or one cell's toolbars. */ .ctb_show.ctb_hideshow, .ctb_show .ctb_hideshow { - display: block; + display:block; } -.ctb_show .ctb_hideshow + div > div.input_area, +.ctb_show .input_area, .ctb_show .ctb_hideshow + div.text_cell_input { border-top-right-radius: 0px; border-top-left-radius: 0px; @@ -62,28 +63,34 @@ all or one cell's toolbars. } .button_container { - float: right; - padding-bottom: 1px; + margin-top:0; + margin-bottom:0; } .button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{ border-radius : 0 0 0 0; border : none; + margin:0; } .celltoolbar .button_container select { margin: 10px; - margin-top: 0px; + margin-top: 1px; margin-bottom: 0px; + padding:0; font-size: 87%; - height:18px; - display:inline; width:auto; + display:inline-block; + height:18px; + line-height:18px; + vertical-align:top; } .celltoolbar label{ - display:inline; - line-height:13px; + display:inline-block; + height:15px; + line-height:15px; + vertical-align:top; } .celltoolbar label span { @@ -97,7 +104,8 @@ all or one cell's toolbars. } -.celltoolbar ui-button { +.celltoolbar .ui-button { border: none; + vertical-align:top; + height:20px; } - diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js index f85688c11..91166a619 100644 --- a/IPython/frontend/html/notebook/static/js/celltoolbar.js +++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js @@ -35,14 +35,10 @@ var IPython = (function (IPython) { CellToolbar.prototype.create_element = function () { this.inner_element = $('
'); - var ctb_element = $('
').addClass('celltoolbar') + var ctb_element = $('
').addClass('celltoolbar hbox reverse') .append(this.inner_element); - ctb_element.addClass('box-flex1'); - var ctb_area = $('
').addClass('ctb_area hbox'); - var ctb_prompt = $('
').addClass('ctb_prompt prompt'); - ctb_area.append(ctb_prompt).append(ctb_element); this.element = $('
').addClass('ctb_hideshow') - .append(ctb_area); + .append(ctb_element); }; diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js index cadc3c036..9d41eed6f 100644 --- a/IPython/frontend/html/notebook/static/js/codecell.js +++ b/IPython/frontend/html/notebook/static/js/codecell.js @@ -64,11 +64,12 @@ var IPython = (function (IPython) { cell.attr('tabindex','2'); this.celltoolbar = new IPython.CellToolbar(this); - cell.append(this.celltoolbar.element); var input = $('
').addClass('input hbox'); + var vbox = $('
').addClass('vbox box-flex1') input.append($('
').addClass('prompt input_prompt')); - var input_area = $('
').addClass('input_area box-flex1'); + vbox.append(this.celltoolbar.element); + var input_area = $('
').addClass('input_area'); this.code_mirror = CodeMirror(input_area.get(0), { indentUnit : 4, mode: 'python', @@ -78,7 +79,8 @@ var IPython = (function (IPython) { onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this), matchBrackets: true }); - input.append(input_area); + vbox.append(input_area); + input.append(vbox); var output = $('
'); cell.append(input).append(output); this.element = cell; From 9ba887ed95aa3565dff029758961e7b79bde4925 Mon Sep 17 00:00:00 2001 From: Matthias BUSSONNIER Date: Tue, 5 Feb 2013 09:40:32 +0100 Subject: [PATCH 2/3] fix button css --- IPython/frontend/html/notebook/static/css/celltoolbar.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/IPython/frontend/html/notebook/static/css/celltoolbar.css b/IPython/frontend/html/notebook/static/css/celltoolbar.css index 3d1b5339e..c008f596c 100644 --- a/IPython/frontend/html/notebook/static/css/celltoolbar.css +++ b/IPython/frontend/html/notebook/static/css/celltoolbar.css @@ -67,12 +67,10 @@ all or one cell's toolbars. margin-bottom:0; } -.button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{ - border-radius : 0 0 0 0; - border : none; - margin:0; -} +.ui-button { + min-width:30px; +} .celltoolbar .button_container select { margin: 10px; margin-top: 1px; From 93b5ea9d86428c3a90f126cab7f37db3b59545bb Mon Sep 17 00:00:00 2001 From: Matthias BUSSONNIER Date: Tue, 5 Feb 2013 09:49:54 +0100 Subject: [PATCH 3/3] remove one useless element --- IPython/frontend/html/notebook/static/js/celltoolbar.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js index 91166a619..79a83e7c2 100644 --- a/IPython/frontend/html/notebook/static/js/celltoolbar.js +++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js @@ -34,11 +34,9 @@ var IPython = (function (IPython) { CellToolbar.prototype.create_element = function () { - this.inner_element = $('
'); - var ctb_element = $('
').addClass('celltoolbar hbox reverse') - .append(this.inner_element); + this.inner_element = $('
').addClass('celltoolbar hbox reverse') this.element = $('
').addClass('ctb_hideshow') - .append(ctb_element); + .append(this.inner_element); };