From 0ba63443a8f016b124befe8f0522e279c5f8c38d Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 21 Mar 2016 13:08:23 +0100 Subject: [PATCH] Added missing search link for mobile optimization --- com.woltlab.wcf/templates/pageHeaderUser.tpl | 14 +-- com.woltlab.wcf/templates/pageMenuMobile.tpl | 100 ++++++++++-------- .../js/WoltLab/WCF/Ui/Dropdown/Simple.js | 4 +- .../js/WoltLab/WCF/Ui/Page/Header/Fixed.js | 27 +++-- .../js/WoltLab/WCF/Ui/Page/Menu/Abstract.js | 21 +++- .../files/js/WoltLab/WCF/Ui/Page/Menu/User.js | 30 ------ .../files/style/layout/pageHeader.scss | 44 ++++++-- .../files/style/layout/pageHeaderSticky.scss | 67 +++++++----- 8 files changed, 180 insertions(+), 127 deletions(-) diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl index e32bd7d242..57c3d80e89 100644 --- a/com.woltlab.wcf/templates/pageHeaderUser.tpl +++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl @@ -162,13 +162,13 @@ {/capture}
-
+ <{if $__3rdPartyButtons|trim}section{else}div{/if} class="section"> {if $__3rdPartyButtons|trim}

{lang}wcf.user.login{/lang}

{/if}
- +
@@ -185,26 +185,26 @@
- +
{if $__wcf->getUserAuthenticationFactory()->getUserAuthentication()->supportsPersistentLogins()}
-
+
{/if} {event name='loginFields'}
- + {lang}wcf.user.lostPassword{/lang} - + {@SECURITY_TOKEN_INPUT_TAG}
-
+ {if $__3rdPartyButtons|trim}
diff --git a/com.woltlab.wcf/templates/pageMenuMobile.tpl b/com.woltlab.wcf/templates/pageMenuMobile.tpl index b247eedb8c..5da65b6a52 100644 --- a/com.woltlab.wcf/templates/pageMenuMobile.tpl +++ b/com.woltlab.wcf/templates/pageMenuMobile.tpl @@ -24,52 +24,58 @@ {@""|str_repeat:$menuItemNode->getOpenParentNodes()} {/if} {/foreach} - - - {hascontent} -
  • - - - TODO: page options - -
      - {content} - {if !$__pageOptions|empty} - {@$__pageOptions} - {/if} - - {event name='pageOptions'} - {/content} -
    -
    • - {/hascontent} - {hascontent} -
  • TODO: current location
    • -
  • - - - TODO: current location - -
      - {content} - {assign var=__breadcrumbsDepth value=0} - {foreach from=$__wcf->getBreadcrumbs() item=$breadcrumb} -
    1. - - - - {$breadcrumb->getLabel()} - - -
      2. - {assign var=__breadcrumbsDepth value=$__breadcrumbsDepth + 1} - {/foreach} - {/content} -
    -
    • - {/hascontent} + {hascontent} +
  • + + + TODO: page options + +
      + {content} + {if !$__pageOptions|empty} + {@$__pageOptions} + {/if} + + {event name='pageOptions'} + {/content} +
    +
    • + {/hascontent} + {hascontent} +
  • TODO: current location
    • +
  • + + + TODO: current location + +
      + {content} + {assign var=__breadcrumbsDepth value=0} + {foreach from=$__wcf->getBreadcrumbs() item=$breadcrumb} +
    1. + + + + {$breadcrumb->getLabel()} + + +
      2. + {assign var=__breadcrumbsDepth value=$__breadcrumbsDepth + 1} + {/foreach} + {/content} +
    +
    • + {/hascontent} + +
  • +
  • + + + {lang}wcf.global.search{/lang} + +
    • @@ -149,20 +155,20 @@ {event name='guestUserMenuItems'} - + {if $__wcf->getLanguage()->getLanguages()|count > 1}
  • {lang}wcf.user.language{/lang}
  • - + {$__wcf->getLanguage()}
      {foreach from=$__wcf->getLanguage()->getLanguages() item=__language}
    1. - + {$__language}
      2. diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js index 8d4208b347..14d0883580 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js @@ -85,7 +85,7 @@ define( var containerId = DomUtil.identify(dropdown); if (!_dropdowns.has(containerId)) { button.classList.add('jsDropdownEnabled'); - button.addEventListener('click', this._toggle.bind(this)); + button.addEventListener(WCF_CLICK_EVENT, this._toggle.bind(this)); _dropdowns.set(containerId, dropdown); _menus.set(containerId, menu); @@ -98,7 +98,7 @@ define( elData(button, 'target', containerId); if (isLazyInitialization) { - setTimeout(function() { Core.triggerEvent(button, 'click'); }, 10); + setTimeout(function() { Core.triggerEvent(button, WCF_CLICK_EVENT); }, 10); } }, diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js index bebf4b538a..6e512ee3c1 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js @@ -6,10 +6,10 @@ * @license GNU Lesser General Public License * @module WoltLab/WCF/Ui/Page/Header/Fixed */ -define(['Ui/CloseOverlay', 'Ui/SimpleDropdown'], function(UiCloseOverlay, UiSimpleDropdown) { +define(['Core', 'EventHandler', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/SimpleDropdown'], function(Core, EventHandler, UiCloseOverlay, UiScreen, UiSimpleDropdown) { "use strict"; - var _pageHeader, _pageHeaderContainer, _pageHeaderSearchInputContainer, _isFixed = false; + var _pageHeader, _pageHeaderContainer, _isFixed = false, _isMobile = false; /** * @exports WoltLab/WCF/Ui/Page/Header/Fixed @@ -21,10 +21,15 @@ define(['Ui/CloseOverlay', 'Ui/SimpleDropdown'], function(UiCloseOverlay, UiSimp init: function() { _pageHeader = elById('pageHeader'); _pageHeaderContainer = elById('pageHeaderContainer'); - _pageHeaderSearchInputContainer = elById('pageHeaderSearchInputContainer'); this._initStickyPageHeader(); this._initSearchBar(); + + UiScreen.on({ + match: function() { _isMobile = true; }, + unmatch: function() { _isMobile = false; }, + setup: function() { _isMobile = true; } + }); }, /** @@ -49,15 +54,23 @@ define(['Ui/CloseOverlay', 'Ui/SimpleDropdown'], function(UiCloseOverlay, UiSimp var searchInput = elById('pageHeaderSearchInput'); UiSimpleDropdown.registerCallback('pageHeaderSearchInputContainer', function() { - if (_isFixed && !_pageHeaderSearchInputContainer.classList.contains('open')) { - _pageHeaderSearchInputContainer.classList.add('open'); + if ((_isFixed || _isMobile) && !_pageHeader.classList.contains('searchBarOpen')) { + _pageHeader.classList.add('searchBarOpen'); searchInput.focus(); } }); UiCloseOverlay.add('WoltLab/WCF/Ui/Page/Header/Fixed', function() { - _pageHeaderSearchInputContainer.classList.remove('open'); + _pageHeader.classList.remove('searchBarOpen'); }); + + EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', (function(data) { + if (data.identifier === 'com.woltlab.wcf.search') { + data.handler.close(true); + + Core.triggerEvent(elById('pageHeaderSearchInput'), WCF_CLICK_EVENT); + } + }).bind(this)); }, /** @@ -71,7 +84,7 @@ define(['Ui/CloseOverlay', 'Ui/SimpleDropdown'], function(UiCloseOverlay, UiSimp _pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky'); _pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader'); - _pageHeaderSearchInputContainer.classList.remove('open'); + _pageHeader.classList.remove('searchBarOpen'); } }; }); 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 526c8035fa..82a3f831a3 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,7 +127,26 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Ui/Screen'] * @protected */ _initItem: function(item) { - var itemList = item.nextElementSibling, parent = item.parentNode, wrapper; + // check if it should contain a 'more' link w/ an external callback + var parent = item.parentNode; + var more = elData(parent, 'more'); + if (more) { + item.addEventListener(WCF_CLICK_EVENT, (function(event) { + event.preventDefault(); + event.stopPropagation(); + + EventHandler.fire(this._eventIdentifier, 'more', { + handler: this, + identifier: more, + item: item, + parent: parent + }); + }).bind(this)); + + return; + } + + var itemList = item.nextElementSibling, wrapper; if (itemList === null) { return; } diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/User.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/User.js index e816776c88..031ecbe6a6 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/User.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/User.js @@ -24,36 +24,6 @@ define(['Core', 'EventHandler', './Abstract'], function(Core, EventHandler, UiPa 'pageUserMenuMobile', '#pageHeader .userPanel' ); - }, - - /** - * Overrides the `_initItem()` method to check for special items that do not - * act as a link but instead trigger an event for external processing. - * - * @param {Element} item menu item - * @protected - */ - _initItem: function(item) { - // check if it should contain a 'more' link w/ an external callback - var parent = item.parentNode; - var more = elData(parent, 'more'); - if (more) { - item.addEventListener(WCF_CLICK_EVENT, (function(event) { - event.preventDefault(); - event.stopPropagation(); - - EventHandler.fire(this._eventIdentifier, 'more', { - handler: this, - identifier: more, - item: item, - parent: parent - }); - }).bind(this)); - - return; - } - - UiPageMenuUser._super.prototype._initItem.call(this, item); } }); diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss index 4fd4c647b5..9338468828 100644 --- a/wcfsetup/install/files/style/layout/pageHeader.scss +++ b/wcfsetup/install/files/style/layout/pageHeader.scss @@ -61,6 +61,7 @@ /* MAIN MENU */ .mainMenu .boxMenu { display: flex; + flex-wrap: wrap; > li { flex: 0 0 auto; @@ -267,15 +268,18 @@ /* SEARCH AREA */ .pageHeaderSearch { - margin-bottom: 15px; - text-align: right; - - .pageHeaderSearchLabel { - display: none; + @include large-screen-only { + margin-bottom: 15px; + text-align: right; + + .pageHeaderSearchLabel { + display: none; + } } } .pageHeaderSearchInputContainer { + display: inline-block; position: relative; &:hover { @@ -416,7 +420,33 @@ } } - .pageHeaderSearch { - display: none; + .pageHeader { + &.searchBarOpen { + .pageHeaderContainerLeft { + display: none; + } + + .pageHeaderContainerRight { + flex: 0 0 100%; + + .pageHeaderSearch { + flex: 0 0 100%; + + .pageHeaderSearchInput { + width: 100%; + } + } + + .userPanel { + display: none; + } + } + } + + &:not(.searchBarOpen) { + .pageHeaderSearch { + display: none; + } + } } } diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss index 5ea347ef16..64e5b427f1 100644 --- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss +++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss @@ -23,7 +23,7 @@ .layoutBoundary { - height: 50px; + min-height: 50px; // remove padding, the vertical alignment is done using `align-items` padding-bottom: 0; @@ -59,16 +59,21 @@ order: 2; margin: 0 20px; - .boxMenu > li > a { - align-items: center; - display: flex; + .boxMenu { + background-color: $wcfHeaderBackground; + padding-bottom: 5px; - > span { - flex: 0 0 auto; - } - - > .boxMenuLinkOutstandingItems { - margin-left: 5px; + > li > a { + align-items: center; + display: flex; + + > span { + flex: 0 0 auto; + } + + > .boxMenuLinkOutstandingItems { + margin-left: 5px; + } } } } @@ -83,15 +88,17 @@ order: 3; .pageHeaderSearchInput { - height: 50px; + height: 100%; width: 100%; } .pageHeaderSearchLabel { background-color: $wcfHeaderSearchBoxBackground; + bottom: 0; cursor: pointer; display: block; - height: 50px; + position: absolute; + top: 0; width: 50px; &:hover { @@ -104,32 +111,40 @@ font-family: FontAwesome; font-size: 28px; line-height: 32px; - position: relative; + position: absolute; right: 11px; - top: 9px; + top: 50%; + transform: translateY(-50%); } } } - .pageHeaderSearchInputContainer { - &.open { + &:not(.searchBarOpen) { + .pageHeaderSearch { + font-size: 0; + width: 50px; + } + + .pageHeaderSearchInput, + .pageHeaderSearchInputButton { + display: none; + } + } + + &.searchBarOpen { + .pageHeaderSearchInputContainer { bottom: 0; left: 0; position: absolute; right: 0; top: 0; - z-index: 100; - - ~ .pageHeaderSearchLabel { - visibility: hidden; - } + z-index: 100; } - &:not(.open) { - > .pageHeaderSearchInput, - > .pageHeaderSearchInputButton { - display: none; - } + .pageHeaderSearchLabel { + position: static; + visibility: hidden; + width: 50px; } } } -- 2.20.1