Various style improvements
authorAlexander Ebert <ebert@woltlab.com>
Mon, 18 Apr 2016 08:18:42 +0000 (10:18 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 18 Apr 2016 08:18:42 +0000 (10:18 +0200)
wcfsetup/install/files/acp/style/layout.scss
wcfsetup/install/files/acp/templates/pageHeaderUser.tpl
wcfsetup/install/files/style/layout/pageHeader.scss
wcfsetup/install/files/style/ui/dropdownInteractive.scss

index 6693cf1aa1f6ca87e8118b2f6e22268aceafa43e..9e3b8a3f199b9cc3bcf2ffe77438a1cfc4c77a10 100644 (file)
@@ -56,7 +56,7 @@
                        .pageHeaderSearchInput {
                                border-width: 0 !important;
                                height: 50px;
-                               width: 300px;
+                               width: 300px !important;
                        }
                }
                
index 9ba2ce34da74fba0efaa5c61c44258dde17b1fd5..162f4db5066825423f17ac1d2fc4ed567c8d7527 100644 (file)
@@ -4,7 +4,7 @@
                        {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>
@@ -26,7 +26,7 @@
                                
                                <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>
@@ -45,7 +45,7 @@
                        <li id="woltlab" class="dropdown">
                                <a class="dropdownToggle" data-toggle="woltlab"><span class="icon icon32 fa-info"></span> <span>WoltLab&reg;</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>
index c1b005a3b310ce5052525a5bd7dfa6935300033a..e91bd20aac648853c8534edddbaa3297b85a8450 100644 (file)
@@ -1,7 +1,3 @@
-/* @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;
index df2daf285e516a9c81d263ab6c10993720192877..fa9d750fdc003bccf6fee55200fb086ea5f945cb 100644 (file)
@@ -5,10 +5,9 @@
 /* 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 */