-<base href="{$baseHref}" />
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<meta name="format-detection" content="telephone=no" />
-{if $allowSpidersToIndexThisPage|empty}<meta name="robots" content="noindex,nofollow" />{/if}
+<base href="{$baseHref}">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="format-detection" content="telephone=no">
+{if $allowSpidersToIndexThisPage|empty}<meta name="robots" content="noindex,nofollow">{/if}
{implode from=$__wcf->getMetaTagHandler() item=__metaTag glue="\n"}{@$__metaTag}{/implode}
{event name='metaTags'}
{event name='javascriptInclude'}
<!-- Icons -->
-<link rel="icon" href="{@$__wcf->getFavicon()}" type="image/x-icon" />
-<link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png" />
+<link rel="icon" href="{@$__wcf->getFavicon()}" type="image/x-icon">
+<link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png">
<script data-relocate="true">
//<![CDATA[
right: 0;
top: 0;
- .pageHeader > div > div {
- height: 50px;
- padding: 10px 10px 10px 0;
- }
-
- .pageHeaderLogo {
- flex: 0 0 120px;
- margin: 0;
- order: 1;
- text-align: center;
+ @include large-screen-only {
+ .pageHeader .layoutBoundary {
+ height: 50px;
+ padding: 10px 10px 10px 0;
+ }
- .pageHeaderLogoLarge {
- display: none;
+ .pageHeaderLogo {
+ flex: 0 0 120px;
+ margin: 0;
+ order: 1;
+ text-align: center;
+
+ .pageHeaderLogoLarge {
+ display: none;
+ }
+
+ .pageHeaderLogoSmall {
+ display: inline;
+ }
}
- .pageHeaderLogoSmall {
- display: inline;
+ .mainMenu {
+ flex: 0 0 auto;
+ order: 2;
}
- }
-
- .mainMenu {
- flex: 0 0 auto;
- order: 2;
- }
-
- .pageHeaderSearch {
- flex: 0 0 auto;
- order: 3;
- .pageHeaderSearchInput {
- border-width: 0 !important;
- height: 50px;
- width: 300px;
+ .pageHeaderSearch {
+ flex: 0 0 auto;
+ margin-bottom: 0;
+ order: 3;
+
+ // force to take up the full available height
+ position: relative;
+ top: -10px;
+
+ .pageHeaderSearchInput {
+ border-width: 0 !important;
+ height: 50px;
+ width: 300px;
+ }
+ }
+
+ .userPanel {
+ flex: 1 1 auto;
+ order: 4;
}
}
- .userPanel {
- flex: 1 1 auto;
- order: 4;
+ @include small-screen-only {
+ max-width: 100vw;
}
}
flex: 1 0 auto;
}
-.acpPageMenu .icon, .acpPageSubMenu .icon {
- color: inherit;
-}
-
-.acpPageMenu {
- background-color: rgb(52, 73, 94);
- flex: 0 0 120px;
- text-align: center;
- overflow: hidden;
+@include large-screen-only {
+ .acpPageMenu .icon, .acpPageSubMenu .icon {
+ color: inherit;
+ }
- .acpPageMenuLink {
- color: rgb(192, 192, 192);
- display: block;
- padding: 20px 10px;
+ .acpPageMenu {
+ background-color: rgb(52, 73, 94);
+ flex: 0 0 120px;
+ text-align: center;
+ overflow: hidden;
- &.active {
- background-color: rgb(65, 86, 107);
- color: rgb(255, 255, 255);
+ .acpPageMenuLink {
+ color: rgb(192, 192, 192);
+ display: block;
+ padding: 20px 10px;
+
+ &.active {
+ background-color: rgb(65, 86, 107);
+ color: rgb(255, 255, 255);
+
+ > .icon {
+ transform: scale(1);
+ }
+ }
> .icon {
- transform: scale(1);
+ transform: scale(.8);
+ transition: transform .12s linear;
}
}
- > .icon {
- transform: scale(.8);
- transition: transform .12s linear;
+ .acpPageMenuItemLabel {
+ display: block;
+ margin-top: 5px;
}
}
- .acpPageMenuItemLabel {
- display: block;
- margin-top: 5px;
- }
-}
-
-
-.acpPageSubMenu {
- background-color: rgb(65, 86, 107);
- flex: 0 0 auto;
-}
-
-.acpPageSubMenuCategoryList{
- flex: 0 0 300px;
- overflow: hidden;
- width: 300px;
-
- &:not(.active) {
- display: none;
+ .acpPageSubMenu {
+ background-color: rgb(65, 86, 107);
+ flex: 0 0 auto;
}
- > .acpPageSubMenuCategory {
- margin-top: 20px;
- padding-left: 20px;
+ .acpPageSubMenuCategoryList {
+ flex: 0 0 300px;
+ overflow: hidden;
+ width: 300px;
- > span {
- color: rgb(169, 169, 169);
+ &:not(.active) {
+ display: none;
+ }
+
+ > .acpPageSubMenuCategory {
+ margin-top: 20px;
+ padding-left: 20px;
+
+ > span {
+ color: rgb(169, 169, 169);
+ display: block;
+ padding: 5px 20px;
+ text-transform: uppercase;
+ }
+ }
+
+ .acpPageSubMenuLink,
+ .acpPageSubMenuIcon {
+ color: rgb(255, 255, 255);
display: block;
+ overflow: hidden;
padding: 5px 20px;
- text-transform: uppercase;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
- }
-
- .acpPageSubMenuLink,
- .acpPageSubMenuIcon {
- color: rgb(255, 255, 255);
- display: block;
- overflow: hidden;
- padding: 5px 20px;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .acpPageSubMenuLink:hover,
- .acpPageSubMenuLink:hover ~ .acpPageSubMenuIcon:not(.active),
- .acpPageSubMenuIcon:hover {
- background-color: rgb(52, 73, 94);
- }
-
- .acpPageSubMenuLinkWrapper {
- display: flex;
- > .acpPageSubMenuLink {
- flex: 1 1 auto;
+ .acpPageSubMenuLink:hover,
+ .acpPageSubMenuLink:hover ~ .acpPageSubMenuIcon:not(.active),
+ .acpPageSubMenuIcon:hover {
+ background-color: rgb(52, 73, 94);
}
- > .acpPageSubMenuIcon {
- flex: 0 0 auto;
+ .acpPageSubMenuLinkWrapper {
+ display: flex;
+
+ > .acpPageSubMenuLink {
+ flex: 1 1 auto;
+ }
+
+ > .acpPageSubMenuIcon {
+ flex: 0 0 auto;
+ }
+ }
+
+ .acpPageSubMenuItemList > .active > a,
+ .acpPageSubMenuLink.active,
+ .acpPageSubMenuLink.active ~ .acpPageSubMenuIcon,
+ .acpPageSubMenuIcon.active {
+ background-color: rgb(255, 255, 255) !important;
+ color: rgb(44, 62, 80) !important;
}
}
-
- .acpPageSubMenuItemList > .active > a,
- .acpPageSubMenuLink.active,
- .acpPageSubMenuLink.active ~ .acpPageSubMenuIcon,
- .acpPageSubMenuIcon.active {
- background-color: rgb(255, 255, 255) !important;
- color: rgb(44, 62, 80) !important;
+}
+
+@include small-screen-only {
+ .acpPageMenu,
+ .acpPageSubMenu {
+ display: none;
}
}
.main {
flex: 1 1 auto;
- padding: 40px 0 40px 20px;
+
+ @include large-screen-only {
+ padding: 40px 0 40px 20px;
+ }
+
+ @include small-screen-only {
+ padding: 20px 0;
+ }
}
.pageFooter {
{include file='pageFooter'}
</div>
+
+{include file='pageMenuMobile'}
{event name='footer'}
<!DOCTYPE html>
<html dir="{@$__wcf->getLanguage()->getPageDirection()}" lang="{@$__wcf->getLanguage()->getFixedLanguageCode()}">
<head>
- <base href="{$baseHref}" />
- <meta charset="utf-8" />
- <meta name="robots" content="noindex" />
+ <base href="{$baseHref}">
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="robots" content="noindex">
<title>{if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if}</title>
<!-- Stylesheets -->
{event name='stylesheets'}
<!-- Icons -->
- <link rel="shortcut icon" href="{@$__wcf->getPath()}images/favicon.ico" />
- <link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png" />
+ <link rel="shortcut icon" href="{@$__wcf->getPath()}images/favicon.ico">
+ <link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png">
<script>
var SID_ARG_2ND = '{@SID_ARG_2ND_NOT_ENCODED}';
{event name='javascriptLanguageImport'}
});
- AcpBootstrap.setup();
+ AcpBootstrap.setup({
+ bootstrap: {
+ enableMobileMenu: {if $__isLogin|empty}true{else}false{/if}
+ }
+ });
});
});
</script>
--- /dev/null
+{* main menu *}
+<div id="pageMainMenuMobile" class="pageMainMenuMobile menuOverlayMobile" data-page-logo="{$__wcf->getPath()}images/default-logo.png">
+ <ol class="menuOverlayItemList" data-title="TODO: menu">
+ <li class="menuOverlayTitle">TODO: menu</li>
+ {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_sectionMenuItem}
+ <li class="menuOverlayItem">
+ <a href="#" class="menuOverlayItemLink box24{if $_sectionMenuItem->menuItem|in_array:$_activeMenuItems} active{/if}">
+ <span class="icon icon24 {$_sectionMenuItem->icon}"></span>
+ <span class="menuOverlayItemTitle">{@$_sectionMenuItem}</span>
+ </a>
+ <ol class="menuOverlayItemList">
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($_sectionMenuItem->menuItem) item=_menuItemCategory}
+ <li class="menuOverlayTitle">{@$_menuItemCategory}</li>
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItemCategory->menuItem) item=_menuItem}
+ {assign var=_subMenuItems value=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem)}
+
+ {if $_subMenuItems|empty}
+ <li class="menuOverlayItem{if $_menuItem->menuItem|in_array:$_activeMenuItems} active{/if}"><a href="{$_menuItem->getLink()}" class="menuOverlayItemLink">{@$_menuItem}</a></li>
+ {else}
+ {if $_menuItem->menuItem === 'wcf.acp.menu.link.option.category'}
+ {* handle special option categories *}
+ {foreach from=$_subMenuItems item=_subMenuItem}
+ <li class="menuOverlayItem{if $_subMenuItem->menuItem|in_array:$_activeMenuItems} active{/if}"><a href="{$_subMenuItem->getLink()}" class="menuOverlayItemLink">{@$_subMenuItem}</a></li>
+ {/foreach}
+ {else}
+ <li class="menuOverlayItem">
+ <a href="{$_menuItem->getLink()}" class="menuOverlayItemLink{if $_menuItem->menuItem|in_array:$_activeMenuItems && $_activeMenuItems[0] === $_menuItem->menuItem} active{/if}">{@$_menuItem}</a>
+
+ {foreach from=$_subMenuItems item=_subMenuItem}
+ <a href="{$_subMenuItem->getLink()}" class="menuOverlayItemLinkIcon{if $_subMenuItem->menuItem|in_array:$_activeMenuItems} active{/if}"><span class="icon icon24 {$_subMenuItem->icon}"></span></a>
+ {/foreach}
+ </li>
+ {/if}
+ {/if}
+ {/foreach}
+ {/foreach}
+ </ol>
+ </li>
+ {/foreach}
+ </ol>
+</div>
+
+{* user menu *}
+<div id="pageUserMenuMobile" class="pageUserMenuMobile menuOverlayMobile" data-page-logo="{$__wcf->getPath()}images/default-logo.png">
+ <ol class="menuOverlayItemList" data-title="TODO: user menu">
+ <li class="menuOverlayTitle">TODO: user menu</li>
+ <li class="menuOverlayItem">
+ <a href="#" class="menuOverlayItemLink box24">
+ <span class="icon icon24 fa-home"></span>
+ <span class="menuOverlayItemTitle">{lang}wcf.global.jumpToPage{/lang}</span>
+ </a>
+ <ol class="menuOverlayItemList">
+ {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=_menuItem}
+ <li class="menuOverlayItem"><a href="{$_menuItem->getProcessor()->getLink()}" class="menuOverlayItemLink">{lang}{$_menuItem->menuItem}{/lang}</a></li>
+ {/foreach}
+ </ol>
+ </li>
+ <li class="menuOverlayItem">
+ <a href="#" class="menuOverlayItemLink box24">
+ <span class="icon icon24 fa-info"></span>
+ <span class="menuOverlayItemTitle">WoltLab®</span>
+ </a>
+ <ol class="menuOverlayItemList">
+ <li class="menuOverlayItem"><a href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com"|rawurlencode}" class="menuOverlayItemLink"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.website{/lang}</a></li>
+ <li class="menuOverlayItem"><a href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://community.woltlab.com"|rawurlencode}" class="menuOverlayItemLink"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.forums{/lang}</a></li>
+ <li class="menuOverlayItem"><a href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com/ticket-add/"|rawurlencode}" class="menuOverlayItemLink"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.tickets{/lang}</a></li>
+ <li class="menuOverlayItem"><a href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://pluginstore.woltlab.com"|rawurlencode}" class="menuOverlayItemLink"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.pluginStore{/lang}</a></li>
+ </ol>
+ </li>
+ <li class="menuOverlayTitle">{$__wcf->user->username}</li>
+ <li class="menuOverlayItem">
+ <a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="menuOverlayItemLink box24">
+ <span class="icon icon24 fa-sign-out"></span>
+ <span class="menuOverlayItemTitle">{lang}wcf.user.logout{/lang}</span>
+ </a>
+ </li>
+ </ol>
+</div>
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
* @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";
/**
/**
* 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();
}
};
* 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 <http://opensource.org/licenses/lgpl-license.php>
* @module WoltLab/WCF/Bootstrap
*/
'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";
/**
* @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();
}, 20);
}
};
-
- return Bootstrap;
});
* @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;
*/
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);
enable: function() {
_enabled = true;
- _pageMenuMain.enable();
- _pageMenuUser.enable();
+ if (_options.enableMobileMenu) {
+ _pageMenuMain.enable();
+ _pageMenuUser.enable();
+ }
},
/**
disable: function() {
_enabled = false;
- _pageMenuMain.disable();
- _pageMenuUser.disable();
+ if (_options.enableMobileMenu) {
+ _pageMenuMain.disable();
+ _pageMenuUser.disable();
+ }
},
_init: function() {
},
_initMobileMenu: function() {
- _pageMenuMain = new UiPageMenuMain();
- _pageMenuUser = new UiPageMenuUser();
+ if (_options.enableMobileMenu) {
+ _pageMenuMain = new UiPageMenuMain();
+ _pageMenuUser = new UiPageMenuUser();
+ }
},
_closeAllMenus: function() {
* @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');
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';
top: 0;
right: 0;
z-index: 301;
+
+ @include small-screen-only {
+ max-width: 100vw;
+ }
}
@include large-screen-only {
.menuOverlayMobile {
bottom: 0;
left: 0;
+ max-width: 100vw;
overflow: hidden;
position: fixed;
right: 0;
projects / GitHub / WoltLab / WCF.git / commitdiff