details: http://www.bx.psu.edu/hg/galaxy/rev/9d0d6a33a435 changeset: 2921:9d0d6a33a435 user: Kanwei Li <kanwei@gmail.com> date: Mon Oct 26 19:47:27 2009 -0400 description: trackster: fix layout issue 2 file(s) affected in this change: static/trackster.css templates/tracks/browser.mako diffs (115 lines): diff -r fa0483a31237 -r 9d0d6a33a435 static/trackster.css --- a/static/trackster.css Mon Oct 26 15:05:20 2009 -0400 +++ b/static/trackster.css Mon Oct 26 19:47:27 2009 -0400 @@ -15,14 +15,10 @@ overflow: auto; } -#nav { +#nav-container { position: fixed; bottom: 0; width: 100%; - background: #333; - color: white; - font-weight: bold; - text-align: center; } input { @@ -36,14 +32,14 @@ background-position:top center; background-repeat:repeat-x;border-top:solid #999 1px; color:#333;font-weight:bold; - } +} -/* + #nav-controls { - padding: 15px 0; + text-align: center; } -*/ + #nav-controls a { color: white; padding: 0.1em 0.4em; @@ -77,14 +73,13 @@ /* border-top: solid #666 1px;*/ /* border-bottom: solid #aaa 1px;*/ background: white; - border: solid grey 1px; + border: solid gray 1px; margin: 5px; } #overview-box { position: absolute; margin-top: 0px; height: 14px; - background: grey; background: #ddd url(images/visualization/draggable_horizontal.png) center center no-repeat; /*border-style: outset;*/ } @@ -143,5 +138,4 @@ #nav-labeltrack { border-top: solid #999 1px; - border-bottom: solid #999 1px; } diff -r fa0483a31237 -r 9d0d6a33a435 templates/tracks/browser.mako --- a/templates/tracks/browser.mako Mon Oct 26 15:05:20 2009 -0400 +++ b/templates/tracks/browser.mako Mon Oct 26 19:47:27 2009 -0400 @@ -54,6 +54,7 @@ view.redraw(); }); + // To adjust the size of the viewport to fit the fixed-height footer $(window).resize( function( e ) { $("#viewport").height( $(window).height() - 120 ); view.redraw(); @@ -105,24 +106,26 @@ <div id="content"> <div id="top-labeltrack"></div> <div id="viewport"></div> +</div> +<div id="nav-container"> <div id="nav-labeltrack"></div> -</div> -<div id="nav"> - <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 id="nav"> + <div id="overview"> + <div id="overview-viewport"> + <div id="overview-box"></div> + </div> + </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 id="high" size="12" /> + ## <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> </div>