From ae5c232b10922fe04269cfc163690b2ca960c8ae Mon Sep 17 00:00:00 2001 From: James Taylor Date: Fri, 23 Oct 2009 18:49:18 -0400 Subject: [PATCH] Tweaking trackster UI to fit Galaxy interface a little better (broke something with spacing though) --- static/scripts/trackster.js | 16 +++++--- static/trackster.css | 72 ++++++++++++++++++++++++----------- templates/tracks/browser.mako | 27 +++++++------ 3 files changed, 72 insertions(+), 43 deletions(-) diff --git a/static/scripts/trackster.js b/static/scripts/trackster.js index 475fc147714..8d8b22dc643 100644 --- a/static/scripts/trackster.js +++ b/static/scripts/trackster.js @@ -68,8 +68,8 @@ $.extend( View.prototype, { // 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 @@ $.extend( LineTrack.prototype, TiledTrack.prototype, { 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 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, { 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 --git a/static/trackster.css b/static/trackster.css index 19f2a0fe0bb..23cf29791a3 100644 --- a/static/trackster.css +++ b/static/trackster.css @@ -25,9 +25,25 @@ body { 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 @@ body { -webkit-border-radius: 1em; -moz-border-radius: 1em; } + +/* #low { margin-left: 0.1em; float: left; @@ -45,27 +63,30 @@ body { 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 @@ body { 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 @@ body { } .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 --git a/templates/tracks/browser.mako b/templates/tracks/browser.mako index 1865ad1d276..8aa2d775592 100644 --- a/templates/tracks/browser.mako +++ b/templates/tracks/browser.mako @@ -105,25 +105,24 @@ ${h.js( "jquery", "jquery.event.drag", "jquery.mousewheel", "lrucache", "trackst
+