{/capture}
<form method="post" action="{link controller='Login'}{/link}">
- <section class="section">
+ <{if $__3rdPartyButtons|trim}section{else}div{/if} class="section">
{if $__3rdPartyButtons|trim}<h2 class="sectionTitle">{lang}wcf.user.login{/lang}</h2>{/if}
<dl>
<dt><label for="username">{lang}wcf.user.usernameOrEmail{/lang}</label></dt>
<dd>
- <input type="text" id="username" name="username" value="" required="required" class="long" />
+ <input type="text" id="username" name="username" value="" required="required" class="long">
</dd>
</dl>
<dl>
<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
<dd>
- <input type="password" id="password" name="password" value="" class="long" />
+ <input type="password" id="password" name="password" value="" class="long">
</dd>
</dl>
{if $__wcf->getUserAuthenticationFactory()->getUserAuthentication()->supportsPersistentLogins()}
<dl>
<dt></dt>
- <dd><label><input type="checkbox" id="useCookies" name="useCookies" value="1" checked="checked" /> {lang}wcf.user.useCookies{/lang}</label></dd>
+ <dd><label><input type="checkbox" id="useCookies" name="useCookies" value="1" checked="checked"> {lang}wcf.user.useCookies{/lang}</label></dd>
</dl>
{/if}
{event name='loginFields'}
<div class="formSubmit">
- <input type="submit" id="loginSubmitButton" name="submitButton" value="{lang}wcf.user.button.login{/lang}" accesskey="s" />
+ <input type="submit" id="loginSubmitButton" name="submitButton" value="{lang}wcf.user.button.login{/lang}" accesskey="s">
<a class="button" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a>
- <input type="hidden" name="url" value="{$__wcf->session->requestURI}" />
+ <input type="hidden" name="url" value="{$__wcf->session->requestURI}">
{@SECURITY_TOKEN_INPUT_TAG}
</div>
- </section>
+ </{if $__3rdPartyButtons|trim}section{else}div{/if}>
{if $__3rdPartyButtons|trim}
<section class="section">
{@"</ol></li>"|str_repeat:$menuItemNode->getOpenParentNodes()}
{/if}
{/foreach}
- </ol>
- </li>
- {hascontent}
- <li class="menuOverlayItem">
- <a href="#" class="menuOverlayItemLink box24">
- <span class="icon icon24 fa-gears"></span>
- <span class="menuOverlayItemTitle">TODO: page options</span>
- </a>
- <ol class="menuOverlayItemList">
- {content}
- {if !$__pageOptions|empty}
- {@$__pageOptions}
- {/if}
-
- {event name='pageOptions'}
- {/content}
- </ol>
- </li>
- {/hascontent}
- {hascontent}
- <li class="menuOverlayTitle">TODO: current location</li>
- <li class="menuOverlayItem">
- <a href="#" class="menuOverlayItemLink box24">
- <span class="icon icon24 fa-cogs"></span>
- <span class="menuOverlayItemTitle">TODO: current location</span>
- </a>
- <ol class="menuOverlayItemList">
- {content}
- {assign var=__breadcrumbsDepth value=0}
- {foreach from=$__wcf->getBreadcrumbs() item=$breadcrumb}
- <li class="menuOverlayItem">
- <a href="{$breadcrumb->getURL()}" class="menuOverlayItemLink">
- <span class="menuOverlayItemTitle"{if $__breadcrumbsDepth} style="padding-left: {$__breadcrumbsDepth * 10}px" {/if}>
- <span class="icon icon24 fa-{if $__breadcrumbsDepth}caret-right{else}home{/if}"></span>
- {$breadcrumb->getLabel()}
- </span>
- </a>
- </li>
- {assign var=__breadcrumbsDepth value=$__breadcrumbsDepth + 1}
- {/foreach}
- {/content}
- </ol>
- </li>
- {/hascontent}
</ol>
</li>
+ {hascontent}
+ <li class="menuOverlayItem">
+ <a href="#" class="menuOverlayItemLink box24">
+ <span class="icon icon24 fa-gears"></span>
+ <span class="menuOverlayItemTitle">TODO: page options</span>
+ </a>
+ <ol class="menuOverlayItemList">
+ {content}
+ {if !$__pageOptions|empty}
+ {@$__pageOptions}
+ {/if}
+
+ {event name='pageOptions'}
+ {/content}
+ </ol>
+ </li>
+ {/hascontent}
+ {hascontent}
+ <li class="menuOverlayTitle">TODO: current location</li>
+ <li class="menuOverlayItem">
+ <a href="#" class="menuOverlayItemLink box24">
+ <span class="icon icon24 fa-cogs"></span>
+ <span class="menuOverlayItemTitle">TODO: current location</span>
+ </a>
+ <ol class="menuOverlayItemList">
+ {content}
+ {assign var=__breadcrumbsDepth value=0}
+ {foreach from=$__wcf->getBreadcrumbs() item=$breadcrumb}
+ <li class="menuOverlayItem">
+ <a href="{$breadcrumb->getURL()}" class="menuOverlayItemLink">
+ <span class="menuOverlayItemTitle"{if $__breadcrumbsDepth} style="padding-left: {$__breadcrumbsDepth * 10}px" {/if}>
+ <span class="icon icon24 fa-{if $__breadcrumbsDepth}caret-right{else}home{/if}"></span>
+ {$breadcrumb->getLabel()}
+ </span>
+ </a>
+ </li>
+ {assign var=__breadcrumbsDepth value=$__breadcrumbsDepth + 1}
+ {/foreach}
+ {/content}
+ </ol>
+ </li>
+ {/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>
</li>
{event name='guestUserMenuItems'}
-
+
{if $__wcf->getLanguage()->getLanguages()|count > 1}
<li class="menuOverlayItemSpacer"></li>
<li class="menuOverlayTitle">{lang}wcf.user.language{/lang}</li>
<li class="menuOverlayItem">
<a href="#" class="menuOverlayItemLink box24">
- <img src="{$__wcf->getLanguage()->getIconPath()}">
+ <img src="{$__wcf->getLanguage()->getIconPath()}" alt="">
<span class="menuOverlayItemTitle">{$__wcf->getLanguage()}</span>
</a>
<ol class="menuOverlayItemList" data-title="{lang}wcf.user.language{/lang}">
{foreach from=$__wcf->getLanguage()->getLanguages() item=__language}
<li class="menuOverlayItem" data-more="com.woltlab.wcf.language" data-language-id="{@$__language->languageID}">
<a href="#" class="menuOverlayItemLink box24">
- <img src="{$__language->getIconPath()}">
+ <img src="{$__language->getIconPath()}" alt="">
<span class="menuOverlayItemTitle">{$__language}</span>
</a>
</li>
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);
elData(button, 'target', containerId);
if (isLazyInitialization) {
- setTimeout(function() { Core.triggerEvent(button, 'click'); }, 10);
+ setTimeout(function() { Core.triggerEvent(button, WCF_CLICK_EVENT); }, 10);
}
},
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
* @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
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; }
+ });
},
/**
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));
},
/**
_pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky');
_pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader');
- _pageHeaderSearchInputContainer.classList.remove('open');
+ _pageHeader.classList.remove('searchBarOpen');
}
};
});
* @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;
}
'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);
}
});
/* MAIN MENU */
.mainMenu .boxMenu {
display: flex;
+ flex-wrap: wrap;
> li {
flex: 0 0 auto;
/* 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 {
}
}
- .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;
+ }
+ }
}
}
.layoutBoundary {
- height: 50px;
+ min-height: 50px;
// remove padding, the vertical alignment is done using `align-items`
padding-bottom: 0;
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;
+ }
}
}
}
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 {
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;
}
}
}
projects / GitHub / WoltLab / WCF.git / commitdiff