Fixed for various issues related to mobile optimization dropdowns

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index efd43dbe9c5117997610fb1203ed4ae6a7d6a312..95f8f58f28e979aa9243ba547a455639361b43b7 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -6090,6 +6090,7 @@ WCF.System.Mobile.UX = {
                this._initSearchBar();
                this._initButtonGroupNavigation();
                
+               WCF.CloseOverlayHandler.addCallback('WCF.System.Mobile.UX', $.proxy(this._closeMenus, this));
                WCF.DOMNodeInsertedHandler.addCallback('WCF.System.Mobile.UX', $.proxy(this._initButtonGroupNavigation, this));
        },
        
@@ -6133,19 +6134,18 @@ WCF.System.Mobile.UX = {
         */
        _initButtonGroupNavigation: function() {
                $('.buttonGroupNavigation:not(.jsMobileButtonGroupNavigation)').each(function(index, navigation) {
-                       var $navigation = $(navigation).addClass('jsMobileButtonGroupNavigation dropdown');
+                       var $navigation = $(navigation).addClass('jsMobileButtonGroupNavigation');// dropdown');
                        var $button = $('<a class="dropdownLabel"><span class="icon icon24 icon-list" /></a>').prependTo($navigation);
                        
-                       // convert button group into a dropdown menu
-                       var $dropdownMenu = $navigation.children('ul:eq(0)').addClass('dropdownMenu');//.removeClass('smallButtons buttonGroup');
-                       //var $links = $dropdownMenu.find('> li > a').removeClass('button jsTooltip').removeAttr('title');
-                       //$links.children('span.invisible').removeClass('invisible');
-                       //$links.children('span.icon').remove();
-                       
-                       WCF.Dropdown.initDropdown($button, false);
-                       
-                       $dropdownMenu.removeClass('dropdownMenu');
+                       $button.click(function() { $button.next().toggleClass('open'); return false; });
                });
+       },
+       
+       /**
+        * Closes menus.
+        */
+       _closeMenus: function() {
+               $('.jsMobileButtonGroupNavigation > ul.open').removeClass('open');
        }
 };
 

diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index 7641bf882c815685df7d1218198c54b06497062a..ebfb277384bd4a547a8ae02fb2063865e45a7427 100644 (file)
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -208,43 +208,45 @@ button.small,
                
                > ul {
                        display: none;
-               }
-       }
-       
-       #dropdownMenuContainer > ul.buttonGroup {
-               display: none;
-               font-size: 0;
-               position: absolute;
-               z-index: 450;
-               
-               &.dropdownOpen {
-                       display: block;
-               }
-               
-               > li {
-                       display: block;
-                       float: none;
-                       font-size: 0 !important;
-                       opacity: 1 !important;
-                       overflow: hidden;
+                       font-size: 0;
+                       position: absolute;
+                       right: -3px;
+                       top: 24px;
+                       z-index: 450;
                        
-                       &:not(:last-child) > a {
-                               border-bottom-width: 0;
+                       &.open {
+                               display: block;
                        }
                        
-                       > a {
-                               .button;
-                               
-                               border-radius: 0 !important;
-                               font-size: @wcfSmallFontSize;
+                       &.buttonGroup > li > .button {
+                               margin: 0;
+                       }
+                       
+                       > li {
+                               display: block;
+                               float: none;
+                               font-size: 0 !important;
+                               opacity: 1 !important;
                                overflow: hidden;
-                               text-overflow: ellipsis;
-                               width: 124px;
-                               white-space: nowrap;
-                               word-wrap: normal;
                                
-                               > span.invisible {
-                                       display: inline;
+                               &:not(:last-child) > a {
+                                       border-bottom-width: 0;
+                               }
+                               
+                               > a {
+                                       .button;
+                                       
+                                       border-radius: 0 !important;
+                                       font-size: @wcfSmallFontSize;
+                                       overflow: hidden;
+                                       text-overflow: ellipsis;
+                                       width: 124px;
+                                       white-space: nowrap;
+                                       word-wrap: normal;
+                                       
+                                       > span.invisible {
+                                               display: inline;
+                                       }
                                }
                        }
                }