diff --git a/js/functions.js b/js/functions.js
index b5995f0f5..5ae2b6050 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -1735,3 +1735,96 @@ $(document).ready(function(){
}
});
+function menuResize()
+{
+ var cnt = $('#topmenu');
+ var wmax = cnt.width() - 5; // 5 px margin for jumping menu in Chrome
+ var submenu = cnt.find('.submenu');
+ var submenu_w = submenu.outerWidth(true);
+ var submenu_ul = submenu.find('ul');
+ var li = $('#topmenu > li');
+ var li2 = submenu_ul.find('li');
+ var more_shown = li2.length > 0;
+ var w = more_shown ? submenu_w : 0;
+
+ // hide menu items
+ var hide_start = 0;
+ for (var i = 0; i < li.length-1; i++) { // li.length-1: skip .submenu element
+ var el = $(li[i]);
+ var el_width = el.outerWidth(true);
+ el.data('width', el_width);
+ w += el_width;
+ if (w > wmax) {
+ w -= el_width;
+ if (w + submenu_w < wmax) {
+ hide_start = i;
+ } else {
+ hide_start = i-1;
+ w -= $(li[i-1]).data('width');
+ }
+ break;
+ }
+ }
+
+ if (hide_start > 0) {
+ for (var i = hide_start; i < li.length-1; i++) {
+ $(li[i])[more_shown ? 'prependTo' : 'appendTo'](submenu_ul);
+ }
+ submenu.show();
+ } else if (more_shown) {
+ w -= submenu_w;
+ // nothing hidden, maybe something can be restored
+ for (var i = 0; i < li2.length; i++) {
+ //console.log(li2[i], submenu_w);
+ w += $(li2[i]).data('width');
+ if (w+submenu_w < wmax ) {//|| (i == li2.length-1 && w < wmax)
+ $(li2[i]).insertBefore(submenu);
+ if (i == li2.length-1) {
+ submenu.hide();
+ }
+ continue;
+ }
+ break;
+ }
+ }
+ if (submenu.find('.tabactive').length) {
+ submenu.addClass('active').find('> a').removeClass('tab').addClass('tabactive');
+ } else {
+ submenu.removeClass('active').find('> a').addClass('tab').removeClass('tabactive');
+ }
+}
+
+$(function() {
+ // create submenu container
+ var link = $('')
+ .attr({href: '#', 'class': 'tab'})
+ .text('More')
+ .click(function(e) {
+ e.preventDefault();
+ });
+ var img = $('#topmenucontainer li:first-child').find('img');
+ if (img.length) {
+ img = img.clone();
+ img.attr('src', img.attr('src').replace(/\/[^\/]+$/, '/b_more.png')).prependTo(link);
+ }
+ var submenu = $('
')
+ .attr('class', 'submenu')
+ .append(link)
+ .append($('').append($('#topmenu li.subitem')))
+ .mouseenter(function() {
+ if ($(this).find('ul .tabactive').length == 0) {
+ $(this).addClass('submenuhover').find('> a').addClass('tabactive');
+ }
+ })
+ .mouseleave(function() {
+ if ($(this).find('ul .tabactive').length == 0) {
+ $(this).removeClass('submenuhover').find('> a').removeClass('tabactive');
+ }
+ })
+ .hide();
+ $('#topmenu').append(submenu);
+
+ // populate submenu and register resize event
+ $(window).resize(menuResize);
+ menuResize();
+});
diff --git a/js/tooltip.js b/js/tooltip.js
index c6661f21a..5bbdd9f8f 100644
--- a/js/tooltip.js
+++ b/js/tooltip.js
@@ -31,6 +31,9 @@ var myTooltipContainer = null;
*/
function PMA_TT_init()
{
+ if (!window.parent.getElementsByClassName) {
+ return;
+ }
// get all 'light bubbles' on page
var tooltip_icons = window.parent.getElementsByClassName('footnotemarker', document, 'sup');
var tooltip_count = tooltip_icons.length;
@@ -48,7 +51,7 @@ function PMA_TT_init()
document.body.appendChild(myTooltipContainer);
// capture mouse-events
- for (i = 0; i < tooltip_count; i++) {
+ for (var i = 0; i < tooltip_count; i++) {
window.parent.addEvent(tooltip_icons[i], 'mousemove', mouseMove);
window.parent.addEvent(tooltip_icons[i], 'mouseover', pmaTooltip);
window.parent.addEvent(tooltip_icons[i], 'mouseout', swapTooltip);
diff --git a/themes/darkblue_orange/css/theme_right.css.php b/themes/darkblue_orange/css/theme_right.css.php
index 09954d425..2059c255c 100644
--- a/themes/darkblue_orange/css/theme_right.css.php
+++ b/themes/darkblue_orange/css/theme_right.css.php
@@ -626,14 +626,44 @@ ul#topmenu li, ul#topmenu2 li {
}
/* default tab styles */
-ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive {
+ul#topmenu a, ul#topmenu span {
display: block;
margin: 0.2em 0.2em 0 0.2em;
padding: 0.2em 0.2em 0 0.2em;
white-space: nowrap;
}
-ul#topmenu2 .tab, ul#topmenu2 .tabactive {
+ul#topmenu ul a {
+ margin: 0;
+ padding-bottom: 0.2em;
+}
+
+ul#topmenu .submenu {
+ position: relative;
+}
+
+ul#topmenu ul {
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ right: 0;
+ list-style-type: none;
+ display: none;
+ -moz-box-shadow: 2px 2px 3px #666;
+ -webkit-box-shadow: 2px 2px 3px #666;
+ box-shadow: 2px 2px 3px #666;
+ border: 1px #666 solid;
+}
+
+ul#topmenu li:hover ul, ul#topmenu .submenuhover ul {
+ display: block;
+}
+
+ul#topmenu ul li {
+ width: 100%;
+}
+
+ul#topmenu2 a {
display: block;
margin: 0.1em;
padding: 0.2em;
@@ -676,29 +706,42 @@ ul#topmenu2 {
clear: both;
}
-ul#topmenu li {
+ul#topmenu > li {
border-bottom: 1pt solid black;
}
/* default tab styles */
-ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive {
- background-color: ;
- border: 1pt solid ;
- border-bottom: 0;
+ul#topmenu a, ul#topmenu span {
+ background-color: ;
+ border: 0 solid ;
+ border-width: 1pt 1pt 0 1pt;
-moz-border-radius: 0.4em 0.4em 0 0;
border-radius: 0.4em 0.4em 0 0;
}
+ul#topmenu ul a {
+ border-width: 1pt 0 0 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+
+ul#topmenu ul li:first-child a {
+ border-width: 0;
+}
+
/* enabled hover/active tabs */
-ul#topmenu a.tab:hover,
-ul#topmenu a.tabcaution:hover,
-ul#topmenu .tabactive,
-ul#topmenu .tabactive:hover {
+ul#topmenu > li > a:hover,
+ul#topmenu > li > .tabactive {
margin: 0;
padding: 0.2em 0.4em 0.2em 0.4em;
text-decoration: none;
}
+ul#topmenu ul a:hover,
+ul#topmenu ul .tabactive {
+ text-decoration: none;
+}
+
ul#topmenu a.tab:hover,
ul#topmenu .tabactive {
background-color: ;
@@ -713,7 +756,7 @@ ul#topmenu2 a.tabactive {
}
/* to be able to cancel the bottom border, use */
-ul#topmenu li.active {
+ul#topmenu > li.active {
border-bottom: 1pt solid ;
}
diff --git a/themes/darkblue_orange/img/b_more.png b/themes/darkblue_orange/img/b_more.png
new file mode 100644
index 000000000..161e0ff32
Binary files /dev/null and b/themes/darkblue_orange/img/b_more.png differ
diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php
index 73f57379d..b2a7aa190 100644
--- a/themes/original/css/theme_right.css.php
+++ b/themes/original/css/theme_right.css.php
@@ -601,14 +601,44 @@ ul#topmenu li, ul#topmenu2 li {
}
/* default tab styles */
-ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive {
+ul#topmenu a, ul#topmenu span {
display: block;
margin: 0.2em 0.2em 0 0.2em;
padding: 0.2em 0.2em 0 0.2em;
white-space: nowrap;
}
-ul#topmenu2 .tab, ul#topmenu2 .tabactive {
+ul#topmenu ul a {
+ margin: 0;
+ padding-bottom: 0.2em;
+}
+
+ul#topmenu .submenu {
+ position: relative;
+}
+
+ul#topmenu ul {
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ list-style-type: none;
+ display: none;
+ -moz-box-shadow: 2px 2px 3px #666;
+ -webkit-box-shadow: 2px 2px 3px #666;
+ box-shadow: 2px 2px 3px #666;
+ border: 1px #666 solid;
+}
+
+ul#topmenu li:hover ul, ul#topmenu .submenuhover ul {
+ display: block;
+}
+
+ul#topmenu ul li {
+ width: 100%;
+}
+
+ul#topmenu2 a {
display: block;
margin: 0.1em;
padding: 0.2em;
@@ -651,29 +681,42 @@ ul#topmenu2 {
clear: both;
}
-ul#topmenu li {
+ul#topmenu > li {
border-bottom: 1pt solid black;
}
/* default tab styles */
-ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive {
+ul#topmenu a, ul#topmenu span {
background-color: ;
- border: 1pt solid ;
- border-bottom: 0;
+ border: 0 solid ;
+ border-width: 1pt 1pt 0 1pt;
-moz-border-radius: 0.4em 0.4em 0 0;
border-radius: 0.4em 0.4em 0 0;
}
+ul#topmenu ul a {
+ border-width: 1pt 0 0 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+
+ul#topmenu ul li:first-child a {
+ border-width: 0;
+}
+
/* enabled hover/active tabs */
-ul#topmenu a.tab:hover,
-ul#topmenu a.tabcaution:hover,
-ul#topmenu .tabactive,
-ul#topmenu .tabactive:hover {
+ul#topmenu > li > a:hover,
+ul#topmenu > li > .tabactive {
margin: 0;
padding: 0.2em 0.4em 0.2em 0.4em;
text-decoration: none;
}
+ul#topmenu ul a:hover,
+ul#topmenu ul .tabactive {
+ text-decoration: none;
+}
+
ul#topmenu a.tab:hover,
ul#topmenu .tabactive {
background-color: ;
@@ -688,7 +731,7 @@ ul#topmenu2 a.tabactive {
}
/* to be able to cancel the bottom border, use */
-ul#topmenu li.active {
+ul#topmenu > li.active {
border-bottom: 1pt solid ;
}
diff --git a/themes/original/img/b_more.png b/themes/original/img/b_more.png
new file mode 100644
index 000000000..4a12e8cda
Binary files /dev/null and b/themes/original/img/b_more.png differ