From: Alexander Ebert Date: Thu, 3 Mar 2016 09:32:26 +0000 (+0100) Subject: Added basic mobile support for ACP X-Git-Tag: 3.0.0_Beta_1~2030^2~64 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=cbbb348c769e024483431e58135122a12eeb6ce2;p=GitHub%2FWoltLab%2FWCF.git Added basic mobile support for ACP --- diff --git a/com.woltlab.wcf/templates/headInclude.tpl b/com.woltlab.wcf/templates/headInclude.tpl index 88da640b5c..c684a3545b 100644 --- a/com.woltlab.wcf/templates/headInclude.tpl +++ b/com.woltlab.wcf/templates/headInclude.tpl @@ -1,8 +1,8 @@ - - - - -{if $allowSpidersToIndexThisPage|empty}{/if} + + + + +{if $allowSpidersToIndexThisPage|empty}{/if} {implode from=$__wcf->getMetaTagHandler() item=__metaTag glue="\n"}{@$__metaTag}{/implode} {event name='metaTags'} @@ -27,8 +27,8 @@ {event name='javascriptInclude'} - - + + diff --git a/wcfsetup/install/files/acp/templates/pageMenuMobile.tpl b/wcfsetup/install/files/acp/templates/pageMenuMobile.tpl new file mode 100644 index 0000000000..e47f368b84 --- /dev/null +++ b/wcfsetup/install/files/acp/templates/pageMenuMobile.tpl @@ -0,0 +1,78 @@ +{* main menu *} + + +{* user menu *} + diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Bootstrap.js b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Bootstrap.js index eb788acfed..7cf435c317 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Bootstrap.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Bootstrap.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLab/WCF/Acp/Bootstrap */ -define(['WoltLab/WCF/Bootstrap', './Ui/Page/Menu'], function(Bootstrap, UiPageMenu) { +define(['Core', 'WoltLab/WCF/Bootstrap', './Ui/Page/Menu'], function(Core, Bootstrap, UiPageMenu) { "use strict"; /** @@ -16,10 +16,16 @@ define(['WoltLab/WCF/Bootstrap', './Ui/Page/Menu'], function(Bootstrap, UiPageMe /** * Bootstraps general modules and frontend exclusive ones. * - * @param {Object} options bootstrap options + * @param {Object=} options bootstrap options */ setup: function(options) { - Bootstrap.setup(); + options = Core.extend({ + bootstrap: { + enableMobileMenu: true + } + }, options); + + Bootstrap.setup(options.bootstrap); UiPageMenu.init(); } }; diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js b/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js index 1300d76445..43a7925128 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js @@ -4,7 +4,7 @@ * and runs modules that are needed on page load. * * @author Tim Duesterhus - * @copyright 2001-2015 WoltLab GmbH + * @copyright 2001-2016 WoltLab GmbH * @license GNU Lesser General Public License * @module WoltLab/WCF/Bootstrap */ @@ -13,13 +13,13 @@ define( 'favico', 'enquire', 'perfect-scrollbar', 'WoltLab/WCF/Date/Time/Relative', 'Ui/SimpleDropdown', 'WoltLab/WCF/Ui/Mobile', 'WoltLab/WCF/Ui/TabMenu', 'WoltLab/WCF/Ui/FlexibleMenu', 'Ui/Dialog', 'WoltLab/WCF/Ui/Tooltip', 'WoltLab/WCF/Language', 'WoltLab/WCF/Environment', - 'WoltLab/WCF/Date/Picker', 'EventHandler' + 'WoltLab/WCF/Date/Picker', 'EventHandler', 'Core' ], function( favico, enquire, perfectScrollbar, DateTimeRelative, UiSimpleDropdown, UiMobile, UiTabMenu, UiFlexibleMenu, UiDialog, UiTooltip, Language, Environment, - DatePicker, EventHandler + DatePicker, EventHandler, Core ) { "use strict"; @@ -40,18 +40,26 @@ define( /** * @exports WoltLab/WCF/Bootstrap */ - var Bootstrap = { + return { /** * Initializes the core UI modifications and unblocks jQuery's ready event. + * + * @param {Object=} options initialization options */ - setup: function() { + setup: function(options) { + options = Core.extend({ + enableMobileMenu: true + }, options); + Environment.setup(); DateTimeRelative.setup(); DatePicker.init(); UiSimpleDropdown.setup(); - UiMobile.setup(); + UiMobile.setup({ + enableMobileMenu: options.enableMobileMenu + }); UiTabMenu.setup(); //UiFlexibleMenu.setup(); UiDialog.setup(); @@ -80,6 +88,4 @@ define( }, 20); } }; - - return Bootstrap; }); diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js index ff41be0b28..1c63da83ff 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js @@ -7,14 +7,15 @@ * @module WoltLab/WCF/Ui/Mobile */ define( - [ 'Environment', 'Language', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'], - function(Environment, Language, DomChangeListener, UiCloseOverlay, UiScreen, UiPageMenuMain, UiPageMenuUser) + [ 'Core', 'Environment', 'Language', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'], + function(Core, Environment, Language, DomChangeListener, UiCloseOverlay, UiScreen, UiPageMenuMain, UiPageMenuUser) { "use strict"; var _buttonGroupNavigations = null; var _enabled = false; var _main = null; + var _options = {}; var _pageMenuMain = null; var _pageMenuUser = null; var _sidebar = null; @@ -24,9 +25,15 @@ define( */ return { /** - * Initializes the mobile UI using enquire.js. + * Initializes the mobile UI. + * + * @param {Object=} options initialization options */ - setup: function() { + setup: function(options) { + _options = Core.extend({ + enableMobileMenu: true + }, options); + _buttonGroupNavigations = elByClass('buttonGroupNavigation'); _main = elById('main'); _sidebar = elBySel('#main > div > div > .sidebar', _main); @@ -52,8 +59,10 @@ define( enable: function() { _enabled = true; - _pageMenuMain.enable(); - _pageMenuUser.enable(); + if (_options.enableMobileMenu) { + _pageMenuMain.enable(); + _pageMenuUser.enable(); + } }, /** @@ -62,8 +71,10 @@ define( disable: function() { _enabled = false; - _pageMenuMain.disable(); - _pageMenuUser.disable(); + if (_options.enableMobileMenu) { + _pageMenuMain.disable(); + _pageMenuUser.disable(); + } }, _init: function() { @@ -165,8 +176,10 @@ define( }, _initMobileMenu: function() { - _pageMenuMain = new UiPageMenuMain(); - _pageMenuUser = new UiPageMenuUser(); + if (_options.enableMobileMenu) { + _pageMenuMain = new UiPageMenuMain(); + _pageMenuUser = new UiPageMenuUser(); + } }, _closeAllMenus: function() { diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js index 46ad9b68a6..526c8035fa 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js @@ -127,13 +127,27 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Ui/Screen'] * @protected */ _initItem: function(item) { - var itemList = item.nextElementSibling; + var itemList = item.nextElementSibling, parent = item.parentNode, wrapper; if (itemList === null) { return; } + // handle static items with an icon-type button next to it (acp menu) + if (itemList.nodeName !== 'OL' && itemList.classList.contains('menuOverlayItemLinkIcon')) { + // add wrapper + wrapper = elCreate('span'); + wrapper.className = 'menuOverlayItemWrapper'; + parent.insertBefore(wrapper, item); + wrapper.appendChild(item); + + while (wrapper.nextElementSibling) { + wrapper.appendChild(wrapper.nextElementSibling); + } + + return; + } + var isLink = (elAttr(item, 'href') !== '#'); - var parent = item.parentNode; var parentItemList = parent.parentNode; var itemTitle = elData(itemList, 'title'); @@ -147,7 +161,7 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Ui/Screen'] elData(itemList, 'title', itemTitle); } - var callbackLink = this._showItemList.bind(this, item), wrapper; + var callbackLink = this._showItemList.bind(this, item); if (isLink) { wrapper = elCreate('span'); wrapper.className = 'menuOverlayItemWrapper'; diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss index c48120ab05..c7ba512486 100644 --- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss +++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss @@ -18,6 +18,10 @@ top: 0; right: 0; z-index: 301; + + @include small-screen-only { + max-width: 100vw; + } } @include large-screen-only { diff --git a/wcfsetup/install/files/style/ui/menuMobile.scss b/wcfsetup/install/files/style/ui/menuMobile.scss index 5615ef45b2..fa51ed543f 100644 --- a/wcfsetup/install/files/style/ui/menuMobile.scss +++ b/wcfsetup/install/files/style/ui/menuMobile.scss @@ -26,6 +26,7 @@ .menuOverlayMobile { bottom: 0; left: 0; + max-width: 100vw; overflow: hidden; position: fixed; right: 0;