[galaxy-dev] [hg] galaxy 2477: Fix some display problems with the tabs. Somet...

15 Jul 2009

details:   http://www.bx.psu.edu/hg/galaxy/rev/d202e2f4b910
changeset: 2477:d202e2f4b910
user:      James Taylor <james@jamestaylor.org>
date:      Fri Jul 10 18:33:36 2009 -0400
description:
Fix some display problems with the tabs. Sometimes you just have to use tables....

5 file(s) affected in this change:

static/june_2007_style/blue/panel_layout.css
static/june_2007_style/panel_layout.css.tmpl
static/scripts/galaxy.panels.js
static/scripts/packed/galaxy.panels.js
templates/base_panels.mako

diffs (257 lines):

diff -r 14fd033f08eb -r d202e2f4b910 static/june_2007_style/blue/panel_layout.css

--- a/static/june_2007_style/blue/panel_layout.css	Fri Jul 10 16:21:19 2009 -0400
+++ b/static/june_2007_style/blue/panel_layout.css	Fri Jul 10 18:33:36 2009 -0400
@@ -35,7 +35,6 @@
     border-bottom: solid #999 1px;
     font-size: 90%;
 }
-
 
 #left, #left-border, #center, #right-border, #right
 {
@@ -272,16 +271,22 @@
     text-decoration: underline;
 }
 
-div.tab-group
+
+.tab-group
 {
     margin: 0;
     padding: 0 10px;
     height: 100%;
     white-space: nowrap;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+    cursor: default;
 }
 
-div.tab-group span.tab
+.tab-group .tab
 {
+    background: #2C3143; 
     position: relative;
     display: block;
     float: left;
@@ -292,17 +297,17 @@
     text-align: left;
 }
 
-div.tab-group > span.tab:hover > a
+.tab-group .tab:hover > a
 {
     color: gold !important;
 }
 
-div.tab-group > span.active
+.tab-group .active
 {
     background: rgb(1,1,1);
 }
 
-div.tab-group span.tab div.submenu {
+.tab-group .tab .submenu {
     display: none;
     position: absolute;
     z-index: 16000;
@@ -318,7 +323,8 @@
     -webkit-border-bottom-left-radius: 1em;
 }
 
-div.tab-group span.tab div.submenu ul {
+.tab-group .tab .submenu ul
+{
     display: block;
     margin: 0;
     padding: 0;
@@ -326,7 +332,8 @@
     background: #2C3143;
 }
 
-div.tab-group span.tab div.submenu ul li {
+.tab-group .tab .submenu ul li
+{
     display: block;
     padding: 0 1em;
     white-space: nowrap;
diff -r 14fd033f08eb -r d202e2f4b910 static/june_2007_style/panel_layout.css.tmpl
--- a/static/june_2007_style/panel_layout.css.tmpl	Fri Jul 10 16:21:19 2009 -0400
+++ b/static/june_2007_style/panel_layout.css.tmpl	Fri Jul 10 18:33:36 2009 -0400
@@ -35,7 +35,6 @@
     border-bottom: solid #999 1px;
     font-size: 90%;
 }
-
 
 #left, #left-border, #center, #right-border, #right
 {
@@ -274,16 +273,23 @@
     text-decoration: underline;
 }
 
-div.tab-group
+## Tabs
+
+.tab-group
 {
     margin: 0;
     padding: 0 10px;
     height: 100%;
     white-space: nowrap;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+    cursor: default;
 }
 
-div.tab-group span.tab
+.tab-group .tab
 {
+    background: ${masthead_bg}; 
     position: relative;
     display: block;
     float: left;
@@ -294,17 +300,17 @@
     text-align: left;
 }
 
-div.tab-group > span.tab:hover > a
+.tab-group .tab:hover > a
 {
     color: gold !important;
 }
 
-div.tab-group > span.active
+.tab-group .active
 {
     background: rgb(1,1,1);
 }
 
-div.tab-group span.tab div.submenu {
+.tab-group .tab .submenu {
     display: none;
     position: absolute;
     z-index: 16000;
@@ -320,7 +326,8 @@
     -webkit-border-bottom-left-radius: 1em;
 }
 
-div.tab-group span.tab div.submenu ul {
+.tab-group .tab .submenu ul
+{
     display: block;
     margin: 0;
     padding: 0;
@@ -328,7 +335,8 @@
     background: ${masthead_bg};
 }
 
-div.tab-group span.tab div.submenu ul li {
+.tab-group .tab .submenu ul li
+{
     display: block;
     padding: 0 1em;
     white-space: nowrap;
diff -r 14fd033f08eb -r d202e2f4b910 static/scripts/galaxy.panels.js
--- a/static/scripts/galaxy.panels.js	Fri Jul 10 16:21:19 2009 -0400
+++ b/static/scripts/galaxy.panels.js	Fri Jul 10 18:33:36 2009 -0400
@@ -216,8 +216,8 @@
 // Tab management
 	
 $(function() {
-    $("span.tab").each( function() {
-        var submenu = $(this).children( "div.submenu" );
+    $(".tab").each( function() {
+        var submenu = $(this).children( ".submenu" );
         if ( submenu.length > 0 ) {
             if ( $.browser.msie ) {
                 // Vile IE iframe hack -- even IE7 needs this
diff -r 14fd033f08eb -r d202e2f4b910 static/scripts/packed/galaxy.panels.js
--- a/static/scripts/packed/galaxy.panels.js	Fri Jul 10 16:21:19 2009 -0400
+++ b/static/scripts/packed/galaxy.panels.js	Fri Jul 10 18:33:36 2009 -0400
@@ -1,1 +1,1 @@
-function ensure_dd_helper(){if($("#DD-helper").length==0){$("<div id='DD-helper'/>").css({background:"white",opacity:0,zIndex:9000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_left_panel(h,c,e){var g=false;var f=null;var d=function(i){var j=i;if(i<0){i=0}$(h).css("width",i);$(e).css("left",j);$(c).css("left",i+7);if(document.recalc){document.recalc()}};var a=function(){if(g){$(e).removeClass("hover");$(e).animate({left:f},"fast");$(h).css("left",-f).show().animate({left:0},"fast",function(){d(f);$(e).removeClass("hidden")});g=false}else{f=$(e).position().left;$(c).css("left",$(e).innerWidth());if(document.recalc){document.recalc()}$(e).removeClass("hover");$(h).animate({left:-f},"fast");$(e).animate({left:-1},"fast",function(){$(this).addClass("hidden")});g=true}};$(e).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")}).bind("dragstart",function(i){$("#DD-helper").show()}).bind("dragend
 ",function(i){$("#DD-helper").hide()}).bind("drag",function(i){x=i.offsetX;x=Math.min(400,Math.max(100,x));if(g){$(h).css("left",0);$(e).removeClass("hidden");g=false}d(x)}).bind("dragclickonly",function(i){a()}).find("div").show();var b=function(i){if((g&&i=="show")||(!g&&i=="hide")){a()}};return{force_panel:b}}function make_right_panel(a,e,h){var j=false;var g=false;var c=null;var d=function(k){$(a).css("width",k);$(e).css("right",k+9);$(h).css("right",k).css("left","");if(document.recalc){document.recalc()}};var i=function(){if(j){$(h).removeClass("hover");$(h).animate({right:c},"fast");$(a).css("right",-c).show().animate({right:0},"fast",function(){d(c);$(h).removeClass("hidden")});j=false}else{c=$(document).width()-$(h).position().left-$(h).outerWidth();$(e).css("right",$(h).innerWidth()+1);if(document.recalc){document.recalc()}$(h).removeClass("hover");$(a).animate({right:-c},"fast");$(h).animate({right:-1},"fast",function(){$(this).addClass("hidden")});j=true}g=false}
 ;var b=function(k){var l=$(e).width()-(j?c:0);if(l<k){if(!j){i();g=true}}else{if(g){i();g=false}}};$(h).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")}).bind("dragstart",function(k){$("#DD-helper").show()}).bind("dragend",function(k){$("#DD-helper").hide()}).bind("drag",function(k){x=k.offsetX;w=$(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(j){$(a).css("right",0);$(h).removeClass("hidden");j=false}d(w-x-$(this).outerWidth())}).bind("dragclickonly",function(k){i()}).find("div").show();var f=function(k){if((j&&k=="show")||(!j&&k=="hide")){i()}};return{handle_minwidth_hint:b,force_panel:f}}function hide_modal(){$(".dialog-box-container").fadeOut(function(){$("#overlay").hide();$(".dialog-box").find(".body").children().remove()})}function show_modal(f,c,e,d){if(f){$(".dialog-box").find(".title").html(f);$(".dialog-box").find(".unified-panel-header").show()}else{$(".dialog-box").find(".unified-panel-header").hide()}var a=$(".dia
 log-box").find(".buttons").html("");if(e){$.each(e,function(b,g){a.append($("<button/>").text(b).click(g));a.append(" ")});a.show()}else{a.hide()}var a=$(".dialog-box").find(".extra_buttons").html("");if(d){$.each(d,function(b,g){a.append($("<button/>").text(b).click(g));a.append(" ")});a.show()}else{a.hide()}if(c=="progress"){c=$("<img src='../images/yui/rel_interstitial_loading.gif')' />")}$(".dialog-box").find(".body").html(c);if(!$(".dialog-box-container").is(":visible")){$("#overlay").show();$(".dialog-box-container").fadeIn()}}function show_in_overlay(c){var d=c.width||"600";var b=c.height||"400";var a=c.scroll||"auto";$("#overlay-background").bind("click.overlay",function(){hide_modal();$("#overlay-background").unbind("click.overlay")});show_modal(null,$("<div style='margin: -5px;'><iframe style='margin: 0; padding: 0;' src='"+c.url+"' width='"+d+"' height='"+b+"' scrolling='"+a+"' frameborder='0'></iframe></div>"))}$(function(){$("span.tab").each(function(){var a=$(t
 his).children("div.submenu");if(a.length>0){if($.browser.msie){a.prepend("<iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter:Alpha(Opacity='0');\"></iframe>")}$(this).hover(function(){a.show()},function(){a.hide()});a.click(function(){a.hide()})}})});function user_changed(a,b){if(a){$(".loggedin-only").show();$(".loggedout-only").hide();$("#user-email").text(a);if(b){$(".admin-only").show()}}else{$(".loggedin-only").hide();$(".loggedout-only").show();$(".admin-only").hide()}};
\ No newline at end of file
+function ensure_dd_helper(){if($("#DD-helper").length==0){$("<div id='DD-helper'/>").css({background:"white",opacity:0,zIndex:9000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_left_panel(h,c,e){var g=false;var f=null;var d=function(i){var j=i;if(i<0){i=0}$(h).css("width",i);$(e).css("left",j);$(c).css("left",i+7);if(document.recalc){document.recalc()}};var a=function(){if(g){$(e).removeClass("hover");$(e).animate({left:f},"fast");$(h).css("left",-f).show().animate({left:0},"fast",function(){d(f);$(e).removeClass("hidden")});g=false}else{f=$(e).position().left;$(c).css("left",$(e).innerWidth());if(document.recalc){document.recalc()}$(e).removeClass("hover");$(h).animate({left:-f},"fast");$(e).animate({left:-1},"fast",function(){$(this).addClass("hidden")});g=true}};$(e).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")}).bind("dragstart",function(i){$("#DD-helper").show()}).bind("dragend
 ",function(i){$("#DD-helper").hide()}).bind("drag",function(i){x=i.offsetX;x=Math.min(400,Math.max(100,x));if(g){$(h).css("left",0);$(e).removeClass("hidden");g=false}d(x)}).bind("dragclickonly",function(i){a()}).find("div").show();var b=function(i){if((g&&i=="show")||(!g&&i=="hide")){a()}};return{force_panel:b}}function make_right_panel(a,e,h){var j=false;var g=false;var c=null;var d=function(k){$(a).css("width",k);$(e).css("right",k+9);$(h).css("right",k).css("left","");if(document.recalc){document.recalc()}};var i=function(){if(j){$(h).removeClass("hover");$(h).animate({right:c},"fast");$(a).css("right",-c).show().animate({right:0},"fast",function(){d(c);$(h).removeClass("hidden")});j=false}else{c=$(document).width()-$(h).position().left-$(h).outerWidth();$(e).css("right",$(h).innerWidth()+1);if(document.recalc){document.recalc()}$(h).removeClass("hover");$(a).animate({right:-c},"fast");$(h).animate({right:-1},"fast",function(){$(this).addClass("hidden")});j=true}g=false}
 ;var b=function(k){var l=$(e).width()-(j?c:0);if(l<k){if(!j){i();g=true}}else{if(g){i();g=false}}};$(h).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")}).bind("dragstart",function(k){$("#DD-helper").show()}).bind("dragend",function(k){$("#DD-helper").hide()}).bind("drag",function(k){x=k.offsetX;w=$(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(j){$(a).css("right",0);$(h).removeClass("hidden");j=false}d(w-x-$(this).outerWidth())}).bind("dragclickonly",function(k){i()}).find("div").show();var f=function(k){if((j&&k=="show")||(!j&&k=="hide")){i()}};return{handle_minwidth_hint:b,force_panel:f}}function hide_modal(){$(".dialog-box-container").fadeOut(function(){$("#overlay").hide();$(".dialog-box").find(".body").children().remove()})}function show_modal(f,c,e,d){if(f){$(".dialog-box").find(".title").html(f);$(".dialog-box").find(".unified-panel-header").show()}else{$(".dialog-box").find(".unified-panel-header").hide()}var a=$(".dia
 log-box").find(".buttons").html("");if(e){$.each(e,function(b,g){a.append($("<button/>").text(b).click(g));a.append(" ")});a.show()}else{a.hide()}var a=$(".dialog-box").find(".extra_buttons").html("");if(d){$.each(d,function(b,g){a.append($("<button/>").text(b).click(g));a.append(" ")});a.show()}else{a.hide()}if(c=="progress"){c=$("<img src='../images/yui/rel_interstitial_loading.gif')' />")}$(".dialog-box").find(".body").html(c);if(!$(".dialog-box-container").is(":visible")){$("#overlay").show();$(".dialog-box-container").fadeIn()}}function show_in_overlay(c){var d=c.width||"600";var b=c.height||"400";var a=c.scroll||"auto";$("#overlay-background").bind("click.overlay",function(){hide_modal();$("#overlay-background").unbind("click.overlay")});show_modal(null,$("<div style='margin: -5px;'><iframe style='margin: 0; padding: 0;' src='"+c.url+"' width='"+d+"' height='"+b+"' scrolling='"+a+"' frameborder='0'></iframe></div>"))}$(function(){$(".tab").each(function(){var a=$(this)
 .children(".submenu");if(a.length>0){if($.browser.msie){a.prepend("<iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter:Alpha(Opacity='0');\"></iframe>")}$(this).hover(function(){a.show()},function(){a.hide()});a.click(function(){a.hide()})}})});function user_changed(a,b){if(a){$(".loggedin-only").show();$(".loggedout-only").hide();$("#user-email").text(a);if(b){$(".admin-only").show()}}else{$(".loggedin-only").hide();$(".loggedout-only").show();$(".admin-only").hide()}};
\ No newline at end of file
diff -r 14fd033f08eb -r d202e2f4b910 templates/base_panels.mako
--- a/templates/base_panels.mako	Fri Jul 10 16:21:19 2009 -0400
+++ b/templates/base_panels.mako	Fri Jul 10 18:33:36 2009 -0400
@@ -131,8 +131,10 @@
         %endif
     </div>
     
-    <div style="position: absolute; left: 50%;">
-    <div class="tab-group" style="position: relative; left: -50%;">
+    <div style="position: absolute; left: 0; width: 100%; text-align: center;">
+
+    <table class="tab-group" border="0" cellspacing="0" style="margin: auto;">
+	<tr>
     
     <%def name="tab( id, display, href, target='_parent', visible=True, extra_class='' )">
         <%
@@ -145,31 +147,31 @@
         if not visible:
             style = "display: none;"
         %>
-        <span class="${cls}" style="${style}"><a target="${target}" href="${href}">${display}</a></span>
+        <td class="${cls}" style="${style}"><a target="${target}" href="${href}">${display}</a></td>
     </%def>
     
     ${tab( "analysis", "Analyze Data", h.url_for( controller='root', action='index' ))}
-
+    
     ${tab( "workflow", "Workflow", h.url_for( controller='workflow', action='index' ))}
-
+    
     ${tab( "libraries", "Libraries", h.url_for( controller='library', action='index' ))}
         
     ${tab( "requests", "Requests", h.url_for( controller='requests', action='index' ), visible = (trans.user and trans.request_types)) }
 
     %if app.config.get_bool( 'enable_tracks', False ):
-    <span class="tab">
+    <td class="tab">
         Visualization
         <div class="submenu">
         <ul>
             <li><a href="${h.url_for( controller='tracks', action='index' )}">Build track browser</a></li>
         </ul>
         </div>
-    </span>
+    </td>
     %endif
 
     ${tab( "admin", "Admin", h.url_for( controller='admin', action='index' ), extra_class="admin-only", visible=( trans.user and app.config.is_admin_user( trans.user ) ) )}
     
-    <span class="tab">
+    <td class="tab">
         <a>Help</a>
         <div class="submenu">
         <ul>            
@@ -178,9 +180,9 @@
             <li><a target="_blank" href="${app.config.get( "screencasts_url", "http://g2.trac.bx.psu.edu/wiki/ScreenCasts" )}">Video tutorials (screencasts)</a></li>
         </ul>
         </div>
-    </span>
+    </td>
     
-    <span class="tab">
+    <td class="tab">
         <a>User</a>
         <%
         if trans.user:
@@ -219,9 +221,11 @@
             %endif
         </ul>
         </div>
-    </span>
+    </td>
     
-    </div>
+    </tr>
+    </table>
+    
     </div>
     
 </%def>

    

[galaxy-dev] [hg] galaxy 2477: Fix some display problems with the tabs. Somet...

Greg Von Kuster