Fixed vertical widget labels

This commit is contained in:
Jonathan Frederic 2013-10-30 13:08:17 -07:00
parent a1a86bb8c4
commit c77bbdf01f
6 changed files with 36 additions and 22 deletions

View File

@ -11,7 +11,7 @@ require(["notebook/js/widget"], function(){
this.$el = $('<div />')
.addClass('widget-hbox-single');
this.$label = $('<div />')
.addClass('widget-label')
.addClass('widget-hlabel')
.appendTo(this.$el)
.hide();
this.$checkbox = $('<input />')

View File

@ -12,7 +12,7 @@ require(["notebook/js/widget"], function(){
.html('');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
.addClass('widget-hlabel')
.hide();
this.$buttongroup = $('<div />')
.addClass('widget_item')
@ -90,7 +90,7 @@ require(["notebook/js/widget"], function(){
.html('');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
.addClass('widget-hlabel')
.hide();
this.$container = $('<div />')
.appendTo(this.$el)
@ -172,7 +172,7 @@ require(["notebook/js/widget"], function(){
.html('');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
.addClass('widget-hlabel')
.hide();
this.$buttongroup = $('<div />')
.addClass('btn-group')

View File

@ -30,7 +30,7 @@ require(["notebook/js/widget"], function(){
.html('');
this.$label = $('<div />')
.appendTo(this.$el)
.addClass('widget-label')
.addClass('widget-hlabel')
.hide();
this.$textbox = $('<textarea />')
.attr('rows', 5)
@ -79,7 +79,7 @@ require(["notebook/js/widget"], function(){
.addClass('widget-hbox-single')
.html('');
this.$label = $('<div />')
.addClass('widget-label')
.addClass('widget-hlabel')
.appendTo(this.$el)
.hide();
this.$textbox = $('<input type="text" />')

View File

@ -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;
}
}
}

View File

@ -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;}

View File

@ -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;}