details: http://www.bx.psu.edu/hg/galaxy/rev/b53985e5548c changeset: 2918:b53985e5548c user: James Taylor <james@jamestaylor.org> date: Fri Oct 23 18:49:18 2009 -0400 description: Tweaking trackster UI to fit Galaxy interface a little better (broke something with spacing though) 3 file(s) affected in this change: static/scripts/trackster.js static/trackster.css templates/tracks/browser.mako diffs (224 lines): diff -r 8f57bd9b180c -r b53985e5548c static/scripts/trackster.js --- a/static/scripts/trackster.js Fri Oct 23 14:57:08 2009 -0400 +++ b/static/scripts/trackster.js Fri Oct 23 18:49:18 2009 -0400 @@ -68,8 +68,8 @@ // Minimum width for usability width: Math.max( 12, ( ( this.high - this.low ) / this.span ) * $("#overview-viewport").width() ) }).show(); - $("#low").text( commatize(this.low) ); - $("#high").text( commatize(this.high) ); + $("#low").val( commatize(this.low) ); + $("#high").val( commatize(this.high) ); for ( var i = 0, len = this.tracks.length; i < len; i++ ) { this.tracks[i].draw(); } @@ -204,9 +204,11 @@ chrom: track.view.chrom, low: null, high: null, dataset_id: track.dataset_id }, function ( data ) { if (!data || data == "error") { - track.content_div.addClass("error").text(DATA_ERROR); + track.container_div.addClass("error"); + track.content_div.text(DATA_ERROR); } else if (data == "no data") { - track.content_div.addClass("nodata").text(DATA_NONE); + track.container_div.addClass("nodata"); + track.content_div.text(DATA_NONE); } else { track.content_div.css( "height", track.height_px + "px" ); track.min_value = data.min; @@ -298,9 +300,11 @@ high: track.view.max_high, dataset_id: track.dataset_id, chrom: track.view.chrom }, function ( data ) { if (data == "error") { - track.content_div.addClass("error").text(DATA_ERROR); + track.container_div.addClass("error"); + track.content_div.text(DATA_ERROR); } else if (data.length === 0 || data == "no data") { - track.content_div.addClass("nodata").text(DATA_NONE); + track.container_div.addClass("nodata"); + track.content_div.text(DATA_NONE); } else { track.content_div.css( "height", track.height_px + "px" ); track.values = data; diff -r 8f57bd9b180c -r b53985e5548c static/trackster.css --- a/static/trackster.css Fri Oct 23 14:57:08 2009 -0400 +++ b/static/trackster.css Fri Oct 23 18:49:18 2009 -0400 @@ -25,9 +25,25 @@ text-align: center; } +input { + font-size: 100%; +} + +#nav { + padding: 0.5em 0; + background:#cccccc; + background-image:url(style/panel_header_bg.png); + background-position:top center; + background-repeat:repeat-x;border-top:solid #999 1px; + color:#333;font-weight:bold; + } + + +/* #nav-controls { padding: 15px 0; } +*/ #nav-controls a { color: white; padding: 0.1em 0.4em; @@ -37,6 +53,8 @@ -webkit-border-radius: 1em; -moz-border-radius: 1em; } + +/* #low { margin-left: 0.1em; float: left; @@ -45,27 +63,30 @@ margin-right: 0.1em; float: right; } +*/ #overview { width: 100%; margin: 0px; - background: #333; color: white; } #overview-viewport { - height: 20px; + position: relative; + height: 14px; /* border-top: solid #666 1px;*/ /* border-bottom: solid #aaa 1px;*/ - background: #888; + background: white; + border: solid grey 1px; + margin: 5px; } #overview-box { position: absolute; - margin-top: 1px; - height: 16px; + margin-top: 0px; + height: 14px; + background: grey; background: #ddd url(images/visualization/draggable_horizontal.png) center center no-repeat; - border-style: outset; - border-width: 1px; + /*border-style: outset;*/ } #viewport { @@ -80,29 +101,25 @@ height: 100px; } .track { -/* border-top: solid gray 1px;*/ - border-bottom: solid gray 1px; +/* border-top: solid gray 1px; */ +/* border-bottom: solid gray 1px; */ } .track-header { text-align: center; + padding: 2px 0; } .track-content { overflow: hidden; + text-align: center; } -.track-content.error { - text-align: center; - padding-top: 10px; +.track.error { background-color: #ECB4AF; - height: 30px; } -.track-content.nodata { - text-align: center; - padding-top: 10px; +.track.nodata { background-color: #ddd; - height: 30px; } .loading { @@ -110,12 +127,21 @@ } .label-track { - font-weight: bold; - font-size: 10px; - background-color: #333; - color: white; + /* font-weight: bold; */ + /* font-size: 10px; */ + } .label-track .label { - border-left: solid gray 1px; - padding-left: 2px; + border-left: solid #999 1px; + padding: 1px; + display: inline-block; } + +#top-labeltrack { + border-bottom: solid #999 1px; +} + +#nav-labeltrack { + border-top: solid #999 1px; + border-bottom: solid #999 1px; +} diff -r 8f57bd9b180c -r b53985e5548c templates/tracks/browser.mako --- a/templates/tracks/browser.mako Fri Oct 23 14:57:08 2009 -0400 +++ b/templates/tracks/browser.mako Fri Oct 23 18:49:18 2009 -0400 @@ -105,25 +105,24 @@ <div id="content"> <div id="top-labeltrack"></div> <div id="viewport"></div> + <div id="nav-labeltrack"></div> </div> <div id="nav"> - <div id="nav-labeltrack"></div> + <div id="nav-controls"> + <form name="chr" id="chr" method="get"> + <select id="chrom" name="chrom" style="width: 15em;"> + <option value="">Loading</option> + </select> + <input id="low" size="12"></input>:<input id="high" size="12"></input> + ## <input type="hidden" name="dataset_ids" value="${dataset_ids}" /> + <input type="hidden" name="id" value="${id}" /> + <a href="#" onclick="javascript:view.zoom_in();view.redraw();">+</a> + <a href="#" onclick="javascript:view.zoom_out();view.redraw();">-</a> + </form> + </div> <div id="overview"> <div id="overview-viewport"> <div id="overview-box"></div> </div> </div> - <span id="low"></span> - <span id="high"></span> - <div id="nav-controls"> - <form name="chr" id="chr" method="get"> - <select id="chrom" name="chrom"> - <option value="">Loading</option> - </select> - ## <input type="hidden" name="dataset_ids" value="${dataset_ids}" /> - <input type="hidden" name="id" value="${id}" /> - <a href="#" onclick="javascript:view.zoom_in();view.redraw();">+</a> - <a href="#" onclick="javascript:view.zoom_out();view.redraw();">-</a> - </form> - </div> </div>