diff --git a/IPython/html/static/notebook/js/widgets/bool.js b/IPython/html/static/notebook/js/widgets/bool.js index 1592c60..991e135 100644 --- a/IPython/html/static/notebook/js/widgets/bool.js +++ b/IPython/html/static/notebook/js/widgets/bool.js @@ -11,7 +11,7 @@ require(["notebook/js/widget"], function(){ this.$el = $('
') .addClass('widget-hbox-single'); this.$label = $('') - .addClass('widget-label') + .addClass('widget-hlabel') .appendTo(this.$el) .hide(); this.$checkbox = $('') diff --git a/IPython/html/static/notebook/js/widgets/float_range.js b/IPython/html/static/notebook/js/widgets/float_range.js index 55561cc..2f7170b 100644 --- a/IPython/html/static/notebook/js/widgets/float_range.js +++ b/IPython/html/static/notebook/js/widgets/float_range.js @@ -11,7 +11,7 @@ require(["notebook/js/widget"], function(){ .html(''); this.$label = $('') .appendTo(this.$el) - .addClass('widget-label') + .addClass('widget-hlabel') .hide(); this.$slider = $('') .slider({}) @@ -46,14 +46,21 @@ require(["notebook/js/widget"], function(){ .addClass('widget-vslider'); this.$el .removeClass('widget-hbox-single') - .addClass('widget-hbox-vsingle'); + .addClass('widget-vbox-single'); + this.$label + .removeClass('widget-hlabel') + .addClass('widget-vlabel'); + } else { this.$slider_container .removeClass('widget-vslider') .addClass('widget-hslider'); this.$el - .removeClass('widget-hbox-vsingle') + .removeClass('widget-vbox-single') .addClass('widget-hbox-single'); + this.$label + .removeClass('widget-vlabel') + .addClass('widget-hlabel'); } var description = this.model.get('description'); @@ -86,7 +93,7 @@ require(["notebook/js/widget"], function(){ .html(''); this.$label = $('') .appendTo(this.$el) - .addClass('widget-label') + .addClass('widget-hlabel') .hide(); this.$textbox = $('') .addClass('input') diff --git a/IPython/html/static/notebook/js/widgets/int_range.js b/IPython/html/static/notebook/js/widgets/int_range.js index 0dac0a4..bfc7bd3 100644 --- a/IPython/html/static/notebook/js/widgets/int_range.js +++ b/IPython/html/static/notebook/js/widgets/int_range.js @@ -11,7 +11,7 @@ require(["notebook/js/widget"], function(){ .html(''); this.$label = $('') .appendTo(this.$el) - .addClass('widget-label') + .addClass('widget-hlabel') .hide(); this.$slider = $('') .slider({}) @@ -46,14 +46,21 @@ require(["notebook/js/widget"], function(){ .addClass('widget-vslider'); this.$el .removeClass('widget-hbox-single') - .addClass('widget-hbox-vsingle'); + .addClass('widget-vbox-single'); + this.$label + .removeClass('widget-hlabel') + .addClass('widget-vlabel'); + } else { this.$slider_container .removeClass('widget-vslider') .addClass('widget-hslider'); this.$el - .removeClass('widget-hbox-vsingle') + .removeClass('widget-vbox-single') .addClass('widget-hbox-single'); + this.$label + .removeClass('widget-vlabel') + .addClass('widget-hlabel'); } var description = this.model.get('description'); @@ -85,7 +92,7 @@ require(["notebook/js/widget"], function(){ .html(''); this.$label = $('') .appendTo(this.$el) - .addClass('widget-label') + .addClass('widget-hlabel') .hide(); this.$textbox = $('') .addClass('input') diff --git a/IPython/html/static/notebook/js/widgets/selection.js b/IPython/html/static/notebook/js/widgets/selection.js index 5e9c80c..7480306 100644 --- a/IPython/html/static/notebook/js/widgets/selection.js +++ b/IPython/html/static/notebook/js/widgets/selection.js @@ -12,7 +12,7 @@ require(["notebook/js/widget"], function(){ .html(''); this.$label = $('') .appendTo(this.$el) - .addClass('widget-label') + .addClass('widget-hlabel') .hide(); this.$buttongroup = $('') .addClass('widget_item') @@ -90,7 +90,7 @@ require(["notebook/js/widget"], function(){ .html(''); this.$label = $('') .appendTo(this.$el) - .addClass('widget-label') + .addClass('widget-hlabel') .hide(); this.$container = $('') .appendTo(this.$el) @@ -172,7 +172,7 @@ require(["notebook/js/widget"], function(){ .html(''); this.$label = $('') .appendTo(this.$el) - .addClass('widget-label') + .addClass('widget-hlabel') .hide(); this.$buttongroup = $('') .addClass('btn-group') diff --git a/IPython/html/static/notebook/js/widgets/string.js b/IPython/html/static/notebook/js/widgets/string.js index 5da0216..02395a8 100644 --- a/IPython/html/static/notebook/js/widgets/string.js +++ b/IPython/html/static/notebook/js/widgets/string.js @@ -30,7 +30,7 @@ require(["notebook/js/widget"], function(){ .html(''); this.$label = $('') .appendTo(this.$el) - .addClass('widget-label') + .addClass('widget-hlabel') .hide(); this.$textbox = $('') .attr('rows', 5) @@ -79,7 +79,7 @@ require(["notebook/js/widget"], function(){ .addClass('widget-hbox-single') .html(''); this.$label = $('') - .addClass('widget-label') + .addClass('widget-hlabel') .appendTo(this.$el) .hide(); this.$textbox = $('') diff --git a/IPython/html/static/notebook/less/widgetarea.less b/IPython/html/static/notebook/less/widgetarea.less index 46fa708..4048543 100644 --- a/IPython/html/static/notebook/less/widgetarea.less +++ b/IPython/html/static/notebook/less/widgetarea.less @@ -10,7 +10,7 @@ .vbox(); .box-flex2(); - .widget-label { + .widget-hlabel { min-width: 10ex; padding-right: 8px; text-align: right; @@ -18,6 +18,12 @@ padding-top: 3px; } + .widget-vlabel { + text-align: center; + vertical-align: text-bottom; + padding-bottom: 5px; + } + .widget-hslider { padding-left: 8px; padding-right: 5px; @@ -47,18 +53,18 @@ .widget-vslider { border: 1px solid #CCCCCC; background: #FFFFFF; - height: 100%; width: 5px; margin-left: 12px; padding-bottom: 14px; .corner-all(); + height: 250px; .ui-slider { border: 0px !important; background: none !important; margin-left: -4px; - height: 100%; margin-top: 5px; + height: 100%; .ui-slider-handle { width: 28px !important; @@ -86,22 +92,26 @@ .border-box-sizing(); } - .widget-hbox { - .hbox(); + .widget-box { .start(); .widget-container(); margin: 5px; } + .widget-hbox { + .widget-box(); + .hbox(); + } + .widget-hbox-single { .widget-hbox(); height: 30px; } - .widget-hbox-vsingle { - .widget-hbox(); + .widget-vbox-single { + .widget-box(); + .vbox(); width: 30px; - height: 250px; } } } diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index b986382..3a0d2de 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -166,10 +166,12 @@ h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;} .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);} .widget-area{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;}.widget-area .widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;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%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}.widget-area .widget-subarea .widget-label{min-width:10ex;padding-right:8px;text-align:right;vertical-align:text-top;padding-top:3px;} -.widget-area .widget-subarea .widget-slider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-slider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-slider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;} +.widget-area .widget-subarea .widget-hslider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-hslider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;} +.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;height:100%;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;height:100%;margin-top:5px;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;} .widget-area .widget-subarea .widget-text{width:350px;margin-bottom:0px;} .widget-area .widget-subarea .widget-numeric-text{width:150px;} .widget-area .widget-subarea .widget-combo-btn{min-width:138px;height:30px;} -.widget-area .widget-subarea .widget-container{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} -.widget-area .widget-subarea .widget-hbox{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;} -.widget-area .widget-subarea .widget-hbox-single{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;height:30px;} +.widget-area .widget-subarea .widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} +.widget-area .widget-subarea .widget-hbox{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;} +.widget-area .widget-subarea .widget-hbox-single{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;height:30px;} +.widget-area .widget-subarea .widget-hbox-vsingle{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;width:30px;height:250px;} diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index d739f9a..2ee2a9c 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -1585,10 +1585,12 @@ span#checkpoint_status,span#autosave_status{font-size:small;} .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;} .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);} .widget-area{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;}.widget-area .widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;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%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}.widget-area .widget-subarea .widget-label{min-width:10ex;padding-right:8px;text-align:right;vertical-align:text-top;padding-top:3px;} -.widget-area .widget-subarea .widget-slider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-slider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-slider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;} +.widget-area .widget-subarea .widget-hslider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-hslider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;} +.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;height:100%;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;height:100%;margin-top:5px;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;} .widget-area .widget-subarea .widget-text{width:350px;margin-bottom:0px;} .widget-area .widget-subarea .widget-numeric-text{width:150px;} .widget-area .widget-subarea .widget-combo-btn{min-width:138px;height:30px;} -.widget-area .widget-subarea .widget-container{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} -.widget-area .widget-subarea .widget-hbox{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;} -.widget-area .widget-subarea .widget-hbox-single{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;height:30px;} +.widget-area .widget-subarea .widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} +.widget-area .widget-subarea .widget-hbox{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;} +.widget-area .widget-subarea .widget-hbox-single{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;height:30px;} +.widget-area .widget-subarea .widget-hbox-vsingle{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;width:30px;height:250px;}