Overhauled/improved mobile menu
authorMarcel Werk <burntime@woltlab.com>
Thu, 25 Aug 2016 16:24:30 +0000 (18:24 +0200)
committerMarcel Werk <burntime@woltlab.com>
Thu, 25 Aug 2016 16:24:35 +0000 (18:24 +0200)
com.woltlab.wcf/templates/pageMenuMobile.tpl
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
wcfsetup/install/files/style/ui/menuMobile.scss

index 94405ea432044a8dec7d5a8f28f5b1a4e255ddb5..3d8f130db9c2197a5ae8bde377fa4414b31daf26 100644 (file)
                                        {/if}
                {/foreach}
                <li class="menuOverlayItemSpacer"></li>
+               <li class="menuOverlayItem" data-more="com.woltlab.wcf.search">
+                       <a href="#" class="menuOverlayItemLink box24">
+                               <span class="icon icon24 fa-search"></span>
+                               <span class="menuOverlayItemTitle">{lang}wcf.global.search{/lang}</span>
+                       </a>
+               </li>                   
                <li class="menuOverlayItem" id="pageMainMenuMobilePageOptionsContainer">
                        <a href="#" class="menuOverlayItemLink box24">
                                <span class="icon icon24 fa-gears"></span>
                        {/content}
                {/hascontent}
                
-               <li class="menuOverlayItemSpacer"></li>
-               <li class="menuOverlayItem" data-more="com.woltlab.wcf.search">
-                       <a href="#" class="menuOverlayItemLink box24">
-                               <span class="icon icon24 fa-search"></span>
-                               <span class="menuOverlayItemTitle">{lang}wcf.global.search{/lang}</span>
-                       </a>
-               </li>
+               
        </ol>
 </div>
 
index 67ecd6f5a4c36ee685e0336a0dbc9106ae1fc002..5617598f17588743eecbe7d9266e518372d06355 100644 (file)
@@ -31,7 +31,7 @@ define(['Core', 'Dom/Traverse', './Abstract'], function(Core, DomTraverse, UiPag
                        if (_container !== null) {
                                _list = DomTraverse.childByClass(_container, 'menuOverlayItemList');
                                _navigationList = elBySel('.jsPageNavigationIcons');
-                               _spacer = _container.nextElementSibling;
+                               //_spacer = _container.nextElementSibling;
                                
                                // remove placeholder item
                                elRemove(DomTraverse.childByClass(_list, 'jsMenuOverlayItemPlaceholder'));
@@ -74,11 +74,11 @@ define(['Core', 'Dom/Traverse', './Abstract'], function(Core, DomTraverse, UiPag
                                }
                                
                                elShow(_container);
-                               elShow(_spacer);
+                               //elShow(_spacer);
                        }
                        else {
                                elHide(_container);
-                               elHide(_spacer);
+                               //elHide(_spacer);
                        }
                        
                        return true;
@@ -91,7 +91,7 @@ define(['Core', 'Dom/Traverse', './Abstract'], function(Core, DomTraverse, UiPag
                        
                        if (_hasItems) {
                                elHide(_container);
-                               elHide(_spacer);
+                               //elHide(_spacer);
                                
                                var item, link, title = DomTraverse.childByClass(_list, 'menuOverlayTitle');
                                while (item = title.nextElementSibling) {
index 753f83472d0d79295a3048c1076ca74bc1b717b8..1497020f57efcd57ed3bd0f2b1002d78503d5ea4 100644 (file)
 }
 
 .menuOverlayItemSpacer {
-       margin-top: 20px;
+       margin-top: 25px;
        
        /* avoid successive spacers piling up */
        & + .menuOverlayItemSpacer {
        }
        
        &.menuOverlayItemLinkMore::after {
-               color: rgb(204, 204, 204);
+               color: #fff;
                content: $fa-var-angle-right;
                display: block;
                font-family: FontAwesome;
-               font-size: 24px;
+               font-size: 18px;
                position: absolute;
-               right: 10px;
+               right: 18px;
                top: 50%;
                transform: translateY(-50%);
        }