diff --git a/js/menu-resizer.js b/js/menu-resizer.js
index 99293dd3e0c..d4913d9d530 100644
--- a/js/menu-resizer.js
+++ b/js/menu-resizer.js
@@ -24,59 +24,63 @@
var self = this;
self.$container = $container;
self.widthCalculator = widthCalculator;
- // Sets the image for the left and right scroll indicator
- $(PMA_getImage('b_right.png').toString()).prependTo($('.scrollindicator--right'));
- $(PMA_getImage('b_left.png').toString()).prependTo($('.scrollindicator--left'));
+ var windowWidth = $(window).width();
- // Set the width of the navigation bar without scroll indicator
- $('.navigationbar').css({'width': widthCalculator.call($container) - 58});
+ if (windowWidth < 768) {
+ // Sets the image for the left and right scroll indicator
+ $(PMA_getImage('b_right.png').toString()).prependTo($('.scrollindicator--right'));
+ $(PMA_getImage('b_left.png').toString()).prependTo($('.scrollindicator--left'));
- // Scroll the navigation bar on click
- $('.scrollindicator--right')
- .click(function () {
- $('.navigationbar').scrollLeft($('.navigationbar').scrollLeft() + 10);
- });
- $('.scrollindicator--left')
- .click(function () {
- $('.navigationbar').scrollLeft($('.navigationbar').scrollLeft() - 10);
- });
- // create submenu container
- var link = $('', {href: '#', 'class': 'tab nowrap'})
- .text(PMA_messages.strMore)
- .on('click', false); // same as event.preventDefault()
- var img = $container.find('li img');
- if (img.length) {
- $(PMA_getImage('b_more.png').toString()).prependTo(link);
+ // Set the width of the navigation bar without scroll indicator
+ $('.navigationbar').css({'width': widthCalculator.call($container) - 58});
+
+ // Scroll the navigation bar on click
+ $('.scrollindicator--right')
+ .click(function () {
+ $('.navigationbar').scrollLeft($('.navigationbar').scrollLeft() + 70);
+ });
+ $('.scrollindicator--left')
+ .click(function () {
+ $('.navigationbar').scrollLeft($('.navigationbar').scrollLeft() - 70);
+ });
+ } else {
+ // create submenu container
+ var link = $('', {href: '#', 'class': 'tab nowrap'})
+ .text(PMA_messages.strMore)
+ .on('click', false); // same as event.preventDefault()
+ var img = $container.find('li img');
+ if (img.length) {
+ $(PMA_getImage('b_more.png').toString()).prependTo(link);
+ }
+ var $submenu = $('
', {'class': 'submenu'})
+ .append(link)
+ .append($(''))
+ .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');
+ }
+ });
+ $container.children('.clearfloat').remove();
+ $container.append($submenu).append("");
}
- //$('.navigation').css({'width': $('#topmenucontainer').width() - 50});
- /*var $submenu = $('', {'class': 'submenu'})
- .append(link)
- .append($(''))
- .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');
- }
- });*/
- //$container.children('.clearfloat').remove();
- //$container.append($submenu).append("");
setTimeout(function () {
self.resize();
}, 4);
}
MenuResizer.prototype.resize = function () {
var wmax = this.widthCalculator.call(this.$container);
- $('.navigationbar').css({'width': wmax - 58});
+ var windowWidth = $(window).width();
var $submenu = this.$container.find('.submenu:last');
var submenu_w = $submenu.outerWidth(true);
var $submenu_ul = $submenu.find('ul');
@@ -125,7 +129,10 @@
}
}
// Show/hide the "More" tab as needed
- if ($submenu_ul.find('li').length > 0) {
+ if (windowWidth < 768) {
+ $('.navigationbar').css({'width': wmax - 58});
+ }
+ else if ($submenu_ul.find('li').length > 0) {
$submenu.addClass('shown');
} else {
$submenu.removeClass('shown');
diff --git a/themes/pmahomme/css/common.css.php b/themes/pmahomme/css/common.css.php
index e213f606c85..b211c040c48 100644
--- a/themes/pmahomme/css/common.css.php
+++ b/themes/pmahomme/css/common.css.php
@@ -915,7 +915,6 @@
list-style-type: none;
margin: 0;
padding: 0;
- display: flex;
}
ul#topmenu2 {
@@ -942,16 +941,8 @@
border-top: 1px solid #aaa;
}
-.navigationbar {
- display: inline-flex;
- margin: 0 !important;
- border-radius: 0 !important;
- overflow: hidden;
-}
-
.scrollindicator {
- padding: 7px;
- cursor: pointer;
+ display: none;
}
/* default tab styles */
@@ -3566,4 +3557,23 @@
padding-: 1px;
padding-: 1px;
}
+
+ ul#topmenu,
+ ul#topmenu2,
+ ul.tabs {
+ display: flex;
+ }
+
+ .navigationbar {
+ display: inline-flex;
+ margin: 0 !important;
+ border-radius: 0 !important;
+ overflow: hidden;
+ }
+
+ .scrollindicator {
+ padding: 7px;
+ cursor: pointer;
+ display: inline;
+ }
}
\ No newline at end of file