left navigation fix and more button fix

Signed-off-by: Manish Bisht <manish.bisht490@gmail.com>

js/menu-resizer.js

@@ -26,6 +26,9 @@
         self.widthCalculator = widthCalculator;
         var windowWidth = $(window).width();
 
+        if (windowWidth < 768) {
+            $('#pma_navigation_resizer').css({'width': '0px'});
+        }
         // Sets the image for the left and right scroll indicator
         $(PMA_getImage('b_left.png').toString()).prependTo($('.scrollindicator--left'));
         $(PMA_getImage('b_right.png').toString()).prependTo($('.scrollindicator--right'));
@@ -103,9 +106,8 @@
         }
 
         // Overwrite resizer width on resize
-        $('#pma_navigation_resizer').css({'width': '3px'});
 
-        $('.navigationbar').css({'overflow': 'hidden'});
+
         // Now hide menu elements that don't fit into the menubar
         var hidden = false; // Whether we have hidden any tabs
         while (total_len >= wmax && --l >= 0) { // Process the tabs backwards
@@ -143,13 +145,16 @@
         if (windowWidth < 768) {
             $('.navigationbar').css({'width': navigationwidth - 60});
             $submenu.removeClass('shown');
+            $('.navigationbar').css({'overflow': 'hidden'});
         }
-        else if ($submenu_ul.find('li').length > 0) {
-            $submenu.addClass('shown');
-            $('.navigationbar').css({'width': 'auto'});
-        } else {
-            $submenu.removeClass('shown');
+        else {
             $('.navigationbar').css({'width': 'auto'});
+            $('.navigationbar').css({'overflow': 'visible'});
+            if ($submenu_ul.find('li').length > 0) {
+                $submenu.addClass('shown');
+            } else {
+                $submenu.removeClass('shown');
+            }
         }
         if (this.$container.find('> li').length == 1) {
             // If there is only the "More" tab left, then we need

js/navigation.js

@@ -1120,6 +1120,9 @@ var ResizeHandler = function () {
         var resizer_width = $resizer.width();
         var $collapser = $('#pma_navigation_collapser');
         var windowWidth = $(window).width();
+        if (pos > 240 && windowWidth > 768) {
+            pos = 241;
+        }
         $('#pma_navigation').width(pos);
         $('body').css('margin-' + this.left, pos + 'px');
         $("#floating_menubar, #pma_console")
@@ -1130,18 +1133,20 @@ var ResizeHandler = function () {
                 .css(this.left, pos + resizer_width)
                 .html(this.getSymbol(pos))
                 .prop('title', PMA_messages.strShowPanel);
-        } else if (windowWidth < 768) {
+        } else if (windowWidth > 768) {
+            $collapser
+                .css(this.left, pos)
+                .html(this.getSymbol(pos))
+                .prop('title', PMA_messages.strHidePanel);
+            $('#pma_navigation_resizer').css({'width': '3px'});
+        } else {
             $collapser
                 .css(this.left, windowWidth - 22)
                 .html(this.getSymbol(100))
                 .prop('title', PMA_messages.strHidePanel);
             $('#pma_navigation').width(windowWidth);
             $('body').css('margin-' + this.left, '0px');
-        } else {
-            $collapser
-                .css(this.left, pos)
-                .html(this.getSymbol(pos))
-                .prop('title', PMA_messages.strHidePanel);
+            $('#pma_navigation_resizer').css({'width': '0px'});
         }
         setTimeout(function () {
             $(window).trigger('resize');

themes/pmahomme/css/navigation.css.php

@@ -430,10 +430,10 @@ li.fast_filter.db_fast_filter {
 @media only screen and (max-width: 768px) {
     /* For mobile phones: */
     #pma_navigation {
-        width: 100%;
+        /*width: 100%;*/
     }
 
-    #pma_navigation_resizer {
+    /*#pma_navigation_resizer {
         width: 0;
-    }
+    }*/
 }