Fixed mobile navigation button/dropdown

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
index 2aeb1e2e2846c796c09e4239524105cb77122c7b..5863867684b1e6b1a554f44de53cbdb4b14c235f 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
@@ -108,26 +108,28 @@ define(
                                if (navigation.classList.contains('jsMobileButtonGroupNavigation')) continue;
                                else navigation.classList.add('jsMobileButtonGroupNavigation');
                                
+                               navigation.parentNode.classList.add('hasMobileNavigation');
+                               
                                var button = elCreate('a');
-                               button.classList.add('dropdownLabel');
+                               button.className = 'dropdownLabel';
                                
                                var span = elCreate('span');
-                               span.className = 'icon icon24 fa-list';
+                               span.className = 'icon icon24 fa-ellipsis-v';
                                button.appendChild(span);
                                
-                               (function(button) {
-                                       button.addEventListener(WCF_CLICK_EVENT, function(ev) {
-                                               var next = button.nextElementSibling;
-                                               if (next !== null) {
-                                                       next.classList.toggle('open');
-                                                       
-                                                       ev.stopPropagation();
-                                                       return false;
-                                               }
+                               var list = elBySel('.buttonList', navigation);
+                               list.addEventListener(WCF_CLICK_EVENT, function(event) {
+                                       event.stopPropagation();
+                               });
+                               
+                               (function(navigation, button) {
+                                       button.addEventListener(WCF_CLICK_EVENT, function(event) {
+                                               event.preventDefault();
+                                               event.stopPropagation();
                                                
-                                               return true;
+                                               navigation.classList.toggle('open');
                                        });
-                               })(button);
+                               })(navigation, button);
                                
                                navigation.insertBefore(button, navigation.firstChild);
                        }
@@ -153,7 +155,7 @@ define(
                },
                
                _closeAllMenus: function() {
-                       elBySelAll('.jsMobileButtonGroupNavigation > ul.open, .boxMenu.open', null, function (menu) {
+                       elBySelAll('.jsMobileButtonGroupNavigation.open, .boxMenu.open', null, function (menu) {
                                menu.classList.remove('open');
                        });
                }

diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index cf343a2be379e965355088395f51196b6778ef1c..afbbc8a8150947b3fe8ed163fbcc06270c07a8e9 100644 (file)
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -45,48 +45,90 @@
                }
        }
        
-       .buttonGroupNavigation {
-               opacity: 0;
-               position: absolute;
-               right: 20px;
-               top: 18px;
-               transition: opacity .12s;
+       @include screen-md-down {
+               .hasMobileNavigation > .containerHeadline > h3 {
+                       padding-right: 30px;
+               }
                
-               > ul {
-                       background-color: $wcfContentBackground;
-                       border: 1px solid rgba(0, 0, 0, .15);
-                       border-radius: 6px;
+               .buttonGroupNavigation {
+                       position: absolute;
+                       right: 0;
+                       top: 14px;
                        
-                       > li {
-                               margin-right: 0;
+                       &.open {
+                               left: 0;
                                
-                               &:not(:last-child) {
-                                       border-right: 1px solid rgba(0, 0, 0, .15);
+                               > .buttonList {
+                                       display: block;
+                                       visibility: visible;
                                }
+                       }
+                       
+                       > .dropdownLabel {
+                               left: calc(100% - 24px);
+                               position: relative;
+                       }
+                       
+                       > .buttonList {
+                               @extend .dropdownMenu;
                                
-                               > a {
-                                       display: inline-block;
-                                       padding: 3px 5px;
-                                       
-                                       > .icon {
-                                               color: rgba(0, 0, 0, .5);
+                               position: static !important;
+                               top: 0;
+                               
+                               > li {
+                                       .invisible {
+                                               display: inline;
+                                               padding-left: 5px;
                                        }
                                }
+                       }
+               }
+       }
+       
+       @include screen-lg {
+               .buttonGroupNavigation {
+                       opacity: 0;
+                       position: absolute;
+                       right: 20px;
+                       top: 18px;
+                       transition: opacity .12s;
+                       
+                       > ul {
+                               background-color: $wcfContentBackground;
+                               border: 1px solid rgba(0, 0, 0, .15);
+                               border-radius: 6px;
                                
-                               &.active,
-                               &:hover {
+                               > li {
+                                       margin-right: 0;
+                                       
+                                       &:not(:last-child) {
+                                               border-right: 1px solid rgba(0, 0, 0, .15);
+                                       }
+                                       
                                        > a {
+                                               display: inline-block;
+                                               padding: 3px 5px;
+                                               
                                                > .icon {
-                                                       color: $wcfContentText;
+                                                       color: rgba(0, 0, 0, .5);
+                                               }
+                                       }
+                                       
+                                       &.active,
+                                       &:hover {
+                                               > a {
+                                                       > .icon {
+                                                               color: $wcfContentText;
+                                                       }
                                                }
                                        }
                                }
                        }
                }
-       }
-       
-       &:hover .buttonGroupNavigation {
-               opacity: 1;
+               
+               &:hover .buttonGroupNavigation {
+                       opacity: 1;
+               }
        }
 }