{if PACKAGE_ID}
<li id="userMenu" class="dropdown">
<a class="dropdownToggle" data-toggle="userMenu">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</a>
- <ul class="dropdownMenu">
+ <ul class="dropdownMenu" data-dropdown-alignment-horizontal="right">
{* TODO: this was copied straight from the frontend *}
<li><a href="{link controller='User' object=$__wcf->user forceFrontend=true}{/link}" class="box32">
<div>{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</div>
<li id="jumpToPage" class="dropdown">
<a href="{link forceFrontend=true}{/link}" class="dropdownToggle" data-toggle="jumpToPage"><span class="icon icon32 fa-home"></span> <span>{lang}wcf.global.jumpToPage{/lang}</span></a>
- <ul class="dropdownMenu">
+ <ul class="dropdownMenu" data-dropdown-alignment-horizontal="right">
{foreach from=$__wcf->getFrontendMenu()->getMenuItemNodeList() item=_menuItem}
{if !$_menuItem->getMenuItem()->parentItemID && $_menuItem->getMenuItem()->getPage()}
<li><a href="{$_menuItem->getMenuItem()->getPage()->getLink()}">{$_menuItem->getMenuItem()->getPage()}</a></li>
<li id="woltlab" class="dropdown">
<a class="dropdownToggle" data-toggle="woltlab"><span class="icon icon32 fa-info"></span> <span>WoltLab®</span></a>
- <ul class="dropdownMenu">
+ <ul class="dropdownMenu" data-dropdown-alignment-horizontal="right">
<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.website{/lang}</a></li>
<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://community.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.forums{/lang}</a></li>
<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com/ticket-add/"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.tickets{/lang}</a></li>
-/* @TODO */
-.interactiveDropdown { display: none; }
-/* @TODO END */
-
.pageHeaderContainer {
background-color: $wcfHeaderBackground;
color: $wcfHeaderText;
}
}
+ &.dropdownOpen > a,
&.open > a {
background: linear-gradient(to top, $wcfHeaderMenuBackground 0%, $wcfHeaderMenuBackgroundActive 50%);
color: $wcfHeaderMenuLinkActive;
/* styling for interactive dropdowns (currently only used in the user panel) */
.interactiveDropdown {
background-color: $wcfContentBackground;
- border: 1px solid $wcfDropdownBorder;
- box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
+ border-radius: 2px;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
color: $wcfContentText;
- display: block;
pointer-events: all;
position: absolute;
visibility: hidden;
left: -200%;
> .elementPointer {
- border-color: $wcfDropdownBorder transparent;
- border-style: solid;
- border-width: 0 10px 10px;
- content: "";
- display: block;
- position: absolute;
- z-index: 100;
-
- > span {
- border-color: $wcfSidebarBackground transparent;
- border-style: solid;
- border-width: 0 10px 10px;
- content: "";
- display: block;
- position: absolute;
- top: 1px;
- z-index: 101;
- }
-
- &.left {
- left: 15px;
-
- > span {
- left: -10px;
- }
- }
-
- &.right {
- right: 15px;
-
- > span {
- right: -10px;
- }
- }
+ display: none;
}
&.interactiveDropdownUserMenu > .interactiveDropdownItemsContainer {
overflow: visible;
max-height: none;
}
-
- @include small-screen-only {
- > .elementPointer {
- display: none;
- }
- }
}
/* drop down header */