From 642ef9ed3858f82e29a012d4168d557af1a93b97 2013-04-24 17:50:10 From: Min RK Date: 2013-04-24 17:50:10 Subject: [PATCH] Merge pull request #3174 from Carreau/simple-class Simple less classes Simplify class handeling in js/css Instead of setting several class (e.g: `cell vbox`) per dom element, use less to embed the definition of `vbox` into `cell`. This should allow : - more easy theming. - responsive css on nbviewer There are many other places where this can be done. --- diff --git a/IPython/frontend/html/notebook/static/css/style.min.css b/IPython/frontend/html/notebook/static/css/style.min.css index 0247533..4a93da0 100644 --- a/IPython/frontend/html/notebook/static/css/style.min.css +++ b/IPython/frontend/html/notebook/static/css/style.min.css @@ -853,7 +853,8 @@ a.label:hover,a.badge:hover{color:#ffffff;text-decoration:none;cursor:pointer;} .vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;} .reverse{-webkit-box-direction:reverse;-moz-box-direction:reverse;box-direction:reverse;} .box-flex0{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;} -.box-flex1,.box-flex{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;} +.box-flex1{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;} +.box-flex{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;} .box-flex2{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;} .box-group1{-webkit-box-flex-group:1;-moz-box-flex-group:1;box-flex-group:1;} .box-group2{-webkit-box-flex-group:2;-moz-box-flex-group:2;box-flex-group:2;} @@ -887,10 +888,10 @@ div#pager_splitter{height:8px;} #pager_container{position:relative;} div#pager{padding:15px;overflow:auto;display:none;} div.ui-widget-content{border:1px solid #ababab;outline:none;} -.cell{border:1px solid transparent;}.cell.selected{border-radius:4px;border:thin #ababab solid;} +.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}.cell.selected{border-radius:4px;border:thin #ababab solid;} div.cell{width:100%;padding:5px 5px 5px 0px;margin:2px 0px 2px 0px;outline:none;} div.prompt{width:11ex;padding:0.4em;margin:0px;font-family:monospace;text-align:right;line-height:1.231;} -div.input{page-break-inside:avoid;} +div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;} div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;} div.input_prompt{color:navy;border-top:1px solid transparent;} div.output_wrapper{margin-top:5px;margin-left:5px;width:100%;position:relative;} @@ -899,9 +900,9 @@ div.output_collapsed{margin-right:5px;} div.out_prompt_overlay{height:100%;padding:0px;position:absolute;border-radius:4px;} div.out_prompt_overlay:hover{box-shadow:inset 0 0 1px #000;background:rgba(240, 240, 240, 0.5);} div.output_prompt{color:darkred;margin:0 5px 0 -5px;} -div.output_area{padding:0px;page-break-inside:avoid;} +div.output_area{padding:0px;page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;} div.output_area pre{font-family:monospace;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;color:black;} -div.output_subarea{padding:0.44em 0.4em 0.4em 1px;} +div.output_subarea{padding:0.44em 0.4em 0.4em 1px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;} div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231;} div.output_stream{padding-top:0.0em;padding-bottom:0.0em;} div.output_stderr{background:#fdd;} diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js index 2bad0a2..a280ed2 100644 --- a/IPython/frontend/html/notebook/static/js/codecell.js +++ b/IPython/frontend/html/notebook/static/js/codecell.js @@ -106,12 +106,12 @@ var IPython = (function (IPython) { CodeCell.prototype.create_element = function () { IPython.Cell.prototype.create_element.apply(this, arguments); - var cell = $('
').addClass('cell border-box-sizing code_cell vbox'); + var cell = $('
').addClass('cell border-box-sizing code_cell'); cell.attr('tabindex','2'); this.celltoolbar = new IPython.CellToolbar(this); - var input = $('
').addClass('input hbox'); + var input = $('
').addClass('input'); var vbox = $('
').addClass('vbox box-flex1') input.append($('
').addClass('prompt input_prompt')); vbox.append(this.celltoolbar.element); diff --git a/IPython/frontend/html/notebook/static/js/outputarea.js b/IPython/frontend/html/notebook/static/js/outputarea.js index 469e9a1..5a11dd2 100644 --- a/IPython/frontend/html/notebook/static/js/outputarea.js +++ b/IPython/frontend/html/notebook/static/js/outputarea.js @@ -240,7 +240,7 @@ var IPython = (function (IPython) { OutputArea.prototype.create_output_area = function () { - var oa = $("
").addClass("hbox output_area"); + var oa = $("
").addClass("output_area"); if (this.prompt_area) { oa.append($('
').addClass('prompt')); } @@ -345,7 +345,7 @@ var IPython = (function (IPython) { OutputArea.prototype.append_html = function (html, element) { - var toinsert = $("
").addClass("box-flex1 output_subarea output_html rendered_html"); + var toinsert = $("
").addClass("output_subarea output_html rendered_html"); toinsert.append(html); element.append(toinsert); }; @@ -353,7 +353,7 @@ var IPython = (function (IPython) { OutputArea.prototype.append_javascript = function (js, container) { // We just eval the JS code, element appears in the local scope. - var element = $("
").addClass("box-flex1 output_subarea"); + var element = $("
").addClass("output_subarea"); container.append(element); // Div for js shouldn't be drawn, as it will add empty height to the area. container.hide(); @@ -376,7 +376,7 @@ var IPython = (function (IPython) { OutputArea.prototype.append_text = function (data, element, extra_class) { - var toinsert = $("
").addClass("box-flex1 output_subarea output_text"); + var toinsert = $("
").addClass("output_subarea output_text"); // escape ANSI & HTML specials in plaintext: data = utils.fixConsole(data); data = utils.fixCarriageReturn(data); @@ -390,7 +390,7 @@ var IPython = (function (IPython) { OutputArea.prototype.append_svg = function (svg, element) { - var toinsert = $("
").addClass("box-flex1 output_subarea output_svg"); + var toinsert = $("
").addClass("output_subarea output_svg"); toinsert.append(svg); element.append(toinsert); }; @@ -424,7 +424,7 @@ var IPython = (function (IPython) { OutputArea.prototype.append_png = function (png, element) { - var toinsert = $("
").addClass("box-flex1 output_subarea output_png"); + var toinsert = $("
").addClass("output_subarea output_png"); var img = $("").attr('src','data:image/png;base64,'+png); this._dblclick_to_reset_size(img); toinsert.append(img); @@ -433,7 +433,7 @@ var IPython = (function (IPython) { OutputArea.prototype.append_jpeg = function (jpeg, element) { - var toinsert = $("
").addClass("box-flex1 output_subarea output_jpeg"); + var toinsert = $("
").addClass("output_subarea output_jpeg"); var img = $("").attr('src','data:image/jpeg;base64,'+jpeg); this._dblclick_to_reset_size(img); toinsert.append(img); @@ -444,7 +444,7 @@ var IPython = (function (IPython) { OutputArea.prototype.append_latex = function (latex, element) { // This method cannot do the typesetting because the latex first has to // be on the page. - var toinsert = $("
").addClass("box-flex1 output_subarea output_latex"); + var toinsert = $("
").addClass("output_subarea output_latex"); toinsert.append(latex); element.append(toinsert); }; diff --git a/IPython/frontend/html/notebook/static/js/textcell.js b/IPython/frontend/html/notebook/static/js/textcell.js index 8b6a006..0219da5 100644 --- a/IPython/frontend/html/notebook/static/js/textcell.js +++ b/IPython/frontend/html/notebook/static/js/textcell.js @@ -71,7 +71,7 @@ var IPython = (function (IPython) { */ TextCell.prototype.create_element = function () { IPython.Cell.prototype.create_element.apply(this, arguments); - var cell = $("
").addClass('cell text_cell border-box-sizing vbox'); + var cell = $("
").addClass('cell text_cell border-box-sizing'); cell.attr('tabindex','2'); this.celltoolbar = new IPython.CellToolbar(this); diff --git a/IPython/frontend/html/notebook/static/less/flexible-box-model.less b/IPython/frontend/html/notebook/static/less/flexible-box-model.less index 53988ed..0e52d70 100644 --- a/IPython/frontend/html/notebook/static/less/flexible-box-model.less +++ b/IPython/frontend/html/notebook/static/less/flexible-box-model.less @@ -56,12 +56,18 @@ box-flex: 0; } -.box-flex1, .box-flex { +.box-flex1 { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } +.box-flex { + .box-flex1(); +} + + + .box-flex2 { -webkit-box-flex: 2; -moz-box-flex: 2; diff --git a/IPython/frontend/html/notebook/static/less/notebook.less b/IPython/frontend/html/notebook/static/less/notebook.less index ee85e4f..eb88ea0 100644 --- a/IPython/frontend/html/notebook/static/less/notebook.less +++ b/IPython/frontend/html/notebook/static/less/notebook.less @@ -171,6 +171,7 @@ div.ui-widget-content { .cell { border: 1px solid transparent; + .vbox(); &.selected { .corner-all; @@ -207,6 +208,7 @@ div.prompt { div.input { page-break-inside: avoid; + .hbox(); } /* input_area and input_prompt must match in top border and margin for alignment */ @@ -272,6 +274,7 @@ div.output_prompt { div.output_area { padding: 0px; page-break-inside: avoid; + .hbox(); } @@ -291,6 +294,7 @@ div.output_area pre { the prompt div. */ div.output_subarea { padding: 0.44em 0.4em 0.4em 1px; + .box-flex1(); } /* The rest of the output_* classes are for special styling of the different