Updated layout
authorAlexander Ebert <ebert@woltlab.com>
Sat, 10 Sep 2016 15:12:03 +0000 (17:12 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Sat, 10 Sep 2016 15:12:15 +0000 (17:12 +0200)
13 files changed:
com.woltlab.wcf/templates/pageHeader.tpl
com.woltlab.wcf/templates/pageHeaderSearch.tpl
com.woltlab.wcf/templates/pageHeaderUser.tpl
wcfsetup/install/files/acp/style/layout.scss
wcfsetup/install/files/acp/templates/pageHeader.tpl
wcfsetup/install/files/js/WCF.js
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
wcfsetup/install/files/js/require.config.js
wcfsetup/install/files/style/layout/pageHeader.scss
wcfsetup/install/files/style/layout/pageHeaderSticky.scss [deleted file]
wcfsetup/install/files/style/ui/dropdownInteractive.scss
wcfsetup/install/files/style/ui/message.scss
wcfsetup/setup/db/install.sql

index 5c3deff7c3db0a27b3c634322ebc548203c4010e..b6be88d0349af282ec87e3972bda37aefdf1ccd9 100644 (file)
@@ -1,17 +1,21 @@
 <div id="pageHeaderContainer" class="pageHeaderContainer">
        <header id="pageHeader" class="pageHeader">
-               <div>
+               <div id="pageHeaderPanel" class="pageHeaderPanel">
                        <div class="layoutBoundary">
-                               {include file='pageHeaderLogo'}
-                               
-                               {include file='pageHeaderSearch'}
-                               
                                {include file='pageHeaderMenu'}
                                
                                {include file='pageHeaderUser'}
                        </div>
                </div>
                
+               <div id="pageHeaderFacade" class="pageHeaderFacade">
+                       <div class="layoutBoundary">
+                               {include file='pageHeaderLogo'}
+                               
+                               {include file='pageHeaderSearch'}
+                       </div>
+               </div>
+               
                {* TODO: this should be moved somewhere else and turned into an option *}
                <script data-relocate="true">
                        require(['WoltLabSuite/Core/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
index 739d783b1829cf038c35213c42afe5a3a8c8e231..32f3909c33a06974ea44d4ef64cfc6b6d98c99bd 100644 (file)
@@ -64,8 +64,6 @@
                        
                        {@SECURITY_TOKEN_INPUT_TAG}
                </div>
-               
-               <label for="pageHeaderSearchInput" class="pageHeaderSearchLabel"></label>
        </form>
 </div>
 
index 12dc3ef1311b3e0084c0b6db42aa5cfa9ffa8acf..1fdec3449eaa8795018b4badafb8451f8abee097 100644 (file)
@@ -1,5 +1,10 @@
 <nav id="topMenu" class="userPanel">
        <ul class="userPanelItems">
+               <!-- page search -->
+               <li class="jsOnly">
+                       <a href="#" id="userPanelSearchButton" class="jsTooltip" title="{lang}wcf.global.search{/lang}"><span class="icon icon32 fa-search"></span> <span>{lang}wcf.global.search{/lang}</span></a>
+               </li>
+               
                {if $__wcf->user->userID}
                        <!-- user menu -->
                        <li id="userMenu">
index b22129013e69da2c70d1f40d311c3b94dcb51485..f5c3672bdf253a9f3b63ac3665c4ef86108b139e 100644 (file)
@@ -7,9 +7,6 @@ $wcfAcpMenuWidth: 150px;
 }
 
 .pageContainer {
-       /* required for sticky page header */
-       padding-top: 50px;
-       
        @include screen-lg {
                min-width: 1240px;
        }
@@ -17,17 +14,6 @@ $wcfAcpMenuWidth: 150px;
 
 /* page header */
 .pageHeaderContainer {
-       box-shadow: 0 0 10px rgba(0, 0, 0, .6);
-       left: 0;
-       position: fixed;
-       right: 0;
-       top: 0;
-       z-index: 300;
-       
-       .pageHeader {
-               min-height: 0;
-       }
-       
        @include screen-lg {
                .pageHeader .layoutBoundary {
                        background-color: rgb(44, 62, 80);
@@ -49,6 +35,7 @@ $wcfAcpMenuWidth: 150px;
                        
                        .pageHeaderLogoSmall {
                                display: inline;
+                               max-height: 30px;
                        }
                        
                        > a {
@@ -255,6 +242,18 @@ $wcfAcpMenuWidth: 150px;
 }
 
 @include screen-md-down {
+       .mainMenu {
+               order: 1;
+       }
+       
+       .pageHeaderLogo {
+               order: 2;
+       }
+       
+       .userPanel {
+               order: 3;
+       }
+       
        .acpPageMenu,
        .acpPageSubMenu {
                display: none;
index 6ded76cc798e53bc853440a1100b509d5408353b..37f2c202f5ae09259fe8a6393c982e9609f5bd81 100644 (file)
@@ -1,6 +1,6 @@
 <div class="pageHeaderContainer">
        <header id="pageHeader" class="pageHeader">
-               <div>
+               <div id="pageHeaderPanel" class="pageHeaderPanel">
                        <div class="layoutBoundary">
                                {include file='pageHeaderLogo'}
                                
index e19b619bef5cbb1d7dc07bec61aad26abfe16d68..2460648d9deb148d054b2323a38f5939ab0f4c66 100755 (executable)
@@ -1150,12 +1150,8 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
                
                this._pointer = $('<span class="elementPointer"><span /></span>').appendTo(this._container);
                
-               require(['Environment', 'EventHandler'], (function(Environment, EventHandler) {
+               require(['Environment'], (function(Environment) {
                        if (Environment.platform() === 'desktop') {
-                               EventHandler.add('com.woltlab.wcf.pageHeaderFixed', 'change', (function (data) {
-                                       this.render();
-                               }).bind(this));
-                               
                                if ($itemContainer !== null) {
                                        // use jQuery scrollbar on desktop, mobile browsers have a similar display built-in
                                        $itemContainer.perfectScrollbar({
@@ -1262,19 +1258,12 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
         * Renders the dropdown.
         */
        render: function() {
-               require(['Dom/Util', 'Ui/Alignment', 'Ui/Screen'], (function (DomUtil, UiAlignment, UiScreen) {
+               require(['Ui/Alignment', 'Ui/Screen'], (function (UiAlignment, UiScreen) {
                        if (UiScreen.is('screen-lg')) {
-                               this._container[0].classList.remove('interactiveDropdownFixed');
-                               
                                UiAlignment.set(this._container[0], this._triggerElement[0], {
                                        horizontal: 'right',
                                        pointer: true
                                });
-                               
-                               if (DomUtil.getFixedParent(this._triggerElement[0]) !== null) {
-                                       this._container[0].classList.add('interactiveDropdownFixed');
-                                       this._container[0].style.setProperty('top', this._triggerElement[0].clientHeight + 'px', '');
-                               }
                        }
                        else {
                                this._container.css({
index 90c9a085cc7b0dfa887a6995914eab41b54c8b70..85b9ff34a135ea22fad4e0eff72e3cf650da26a6 100644 (file)
@@ -6,11 +6,12 @@
  * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module     WoltLabSuite/Core/Ui/Page/Header/Fixed
  */
-define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/SimpleDropdown'], function(Core, EventHandler, UiAlignment, UiCloseOverlay, UiScreen, UiSimpleDropdown) {
+define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/Scroll', 'Ui/SimpleDropdown'], function(Core, EventHandler, UiAlignment, UiCloseOverlay, UiScreen, UiScroll, UiSimpleDropdown) {
        "use strict";
        
-       var _pageHeader, _pageHeaderContainer, _searchInputContainer, _triggerHeight;
-       var _isFixed = false, _isMobile = false;
+       var _callbackScroll = null;
+       var _pageHeader, _pageHeaderContainer, _searchInput, _searchInputContainer;
+       var _isMobile = false;
        
        /**
         * @exports     WoltLabSuite/Core/Ui/Page/Header/Fixed
@@ -23,61 +24,15 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
                        _pageHeader = elById('pageHeader');
                        _pageHeaderContainer = elById('pageHeaderContainer');
                        
-                       this._initStickyPageHeader();
                        this._initSearchBar();
                        
                        UiScreen.on('screen-md-down', {
-                               match: this._toggleMobile.bind(this, true),
-                               unmatch: this._toggleMobile.bind(this, false),
-                               setup: this._toggleMobile.bind(this, true)
+                               match: function () { _isMobile = true; },
+                               unmatch: function () { _isMobile = false; },
+                               setup: function () { _isMobile = true; }
                        });
                },
                
-               /**
-                * Toggles mobile flag.
-                * 
-                * @param       {boolean}       isMobile        true if this viewport equals at least a tablet
-                * @protected
-                */
-               _toggleMobile: function (isMobile) {
-                       _isMobile = isMobile;
-                       
-                       this._rebuildPageHeader(false);
-               },
-               
-               /**
-                * Rebuilds the page header min-height property on viewport change.
-                * 
-                * @protected
-                */
-               _rebuildPageHeader: function () {
-                       var clientHeight = _pageHeader.clientHeight;
-                       
-                       if (!clientHeight) {
-                               _pageHeader.style.removeProperty('min-height');
-                               clientHeight = _pageHeader.clientHeight;
-                       }
-                       
-                       if (clientHeight) {
-                               _pageHeader.style.setProperty('min-height', clientHeight + 'px');
-                       }
-               },
-               
-               /**
-                * Enforces a min-height for the original header's location to prevent collapsing
-                * when setting the header to `position: fixed`.
-                * 
-                * @protected
-                */
-               _initStickyPageHeader: function() {
-                       this._rebuildPageHeader(true);
-                       
-                       _triggerHeight = _pageHeader.clientHeight - elBySel('.mainMenu', _pageHeader).clientHeight;
-                       
-                       this._scroll();
-                       window.addEventListener('scroll', this._scroll.bind(this));
-               },
-               
                /**
                 * Provides the collapsible search bar.
                 * 
@@ -89,29 +44,63 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
                                event.stopPropagation();
                        });
                        
-                       var searchInput = elById('pageHeaderSearchInput');
+                       _searchInput = elById('pageHeaderSearchInput');
+                       
+                       var userPanelSearchButton = elById('userPanelSearchButton');
+                       var pageHeaderFacade = elById('pageHeaderFacade');
                        
-                       var searchLabel = elBySel('.pageHeaderSearchLabel');
                        _searchInputContainer = elById('pageHeaderSearchInputContainer');
                        
                        var menu = elById('topMenu');
-                       searchLabel.addEventListener(WCF_CLICK_EVENT, function() {
-                               if ((_isFixed || _isMobile) && !_pageHeader.classList.contains('searchBarOpen')) {
+                       userPanelSearchButton.addEventListener(WCF_CLICK_EVENT, (function(event) {
+                               event.preventDefault();
+                               event.stopPropagation();
+                               
+                               var facadeHeight = pageHeaderFacade.clientHeight;
+                               var scrollTop = window.pageYOffset;
+                               var skipScrollHandler = false;
+                               var isVisible = !_isMobile && (facadeHeight > scrollTop);
+                               
+                               if (!isVisible && !_pageHeader.classList.contains('searchBarOpen')) {
                                        UiAlignment.set(_searchInputContainer, menu, {
                                                horizontal: 'right'
                                        });
                                        
                                        _pageHeader.classList.add('searchBarOpen');
-                                       WCF.Dropdown.Interactive.Handler.closeAll();
-                                       searchInput.focus();
+                                       _searchInput.focus();
                                }
-                       });
+                               else if (!_isMobile) {
+                                       if (scrollTop) {
+                                               // setting focus could lead to the search bar to be
+                                               // hidden behind the fixed panel
+                                               UiScroll.element(elById('top'), function () {
+                                                       _searchInput.focus();
+                                               });
+                                       }
+                                       else {
+                                               _searchInput.focus();
+                                       }
+                                       
+                                       skipScrollHandler = true;
+                               }
+                               
+                               WCF.Dropdown.Interactive.Handler.closeAll();
+                               
+                               if (!skipScrollHandler && !_isMobile && _callbackScroll === null) {
+                                       _callbackScroll = (function () {
+                                               if (pageHeaderFacade.clientHeight > window.pageYOffset) {
+                                                       this._closeSearchBar();
+                                               }
+                                       }).bind(this);
+                                       window.addEventListener('scroll', _callbackScroll);
+                               }
+                       }).bind(this));
                        
-                       UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', function() {
+                       UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', (function() {
                                if (_pageHeader.classList.contains('searchBarForceOpen')) return;
                                
-                               _pageHeader.classList.remove('searchBarOpen');
-                       });
+                               this._closeSearchBar();
+                       }).bind(this));
                        
                        EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', (function(data) {
                                if (data.identifier === 'com.woltlab.wcf.search') {
@@ -122,30 +111,18 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
                        }).bind(this));
                },
                
-               /**
-                * Updates the page header state after scrolling.
-                * 
-                * @protected
-                */
-               _scroll: function() {
-                       if (_isMobile) return;
+               _closeSearchBar: function () {
+                       _pageHeader.classList.remove('searchBarOpen');
                        
-                       var wasFixed = _isFixed;
+                       ['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
+                               _searchInputContainer.style.removeProperty(propertyName);
+                       });
                        
-                       _isFixed = (window.pageYOffset > _triggerHeight);
+                       _searchInput.blur();
                        
-                       if (_isFixed !== wasFixed) {
-                               _pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky');
-                               _pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader');
-                               
-                               EventHandler.fire('com.woltlab.wcf.pageHeaderFixed', 'change', { isFixed: _isFixed });
-                               
-                               if (!_isFixed && wasFixed) {
-                                       _pageHeader.classList.remove('searchBarOpen');
-                                       ['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
-                                               _searchInputContainer.style.removeProperty(propertyName);
-                                       });
-                               }
+                       if (_callbackScroll !== null) {
+                               window.removeEventListener('scroll', _callbackScroll);
+                               _callbackScroll = null;
                        }
                }
        };
index ed1e519a898fe26c5b9c79a8b64866b6298432e2..e0c2be8ad60478cd2ec9a6d21cdea8f017c6b277 100644 (file)
@@ -36,6 +36,7 @@ requirejs.config({
                        'Ui/Notification': 'WoltLabSuite/Core/Ui/Notification',
                        'Ui/ReusableDropdown': 'WoltLabSuite/Core/Ui/Dropdown/Reusable',
                        'Ui/Screen': 'WoltLabSuite/Core/Ui/Screen',
+                       'Ui/Scroll': 'WoltLabSuite/Core/Ui/Scroll',
                        'Ui/SimpleDropdown': 'WoltLabSuite/Core/Ui/Dropdown/Simple',
                        'Ui/TabMenu': 'WoltLabSuite/Core/Ui/TabMenu',
                        'Upload': 'WoltLabSuite/Core/Upload',
index 4e0ef2c2036ff48928dbd84708dc8ceb4463ae86..8527b9d2ba8889c483780247a38e409e77f29d1d 100644 (file)
        .icon {
                color: $wcfHeaderText;
        }
+       
+       /* reserved space for `.pageHeaderPanel` */
+       padding-top: 50px;
 }
 
-.pageHeader {
-       min-height: 52px;
-}
-
-.pageHeader .layoutBoundary {
-       display: flex;
+.pageHeaderPanel {
+       box-shadow: 0 0 10px rgba(0, 0, 0, .6);
+       left: 0;
+       position: fixed;
+       right: 0;
+       top: 0;
+       z-index: 300;
+       
+       &::after {
+               border-bottom: 1px solid $wcfHeaderMenuLinkBackgroundActive;
+               bottom: 0;
+               content: "";
+               display: block;
+               left: 0;
+               pointer-events: none;
+               position: absolute;
+               right: 0;
+       }
+       
+       > .layoutBoundary {
+               display: flex;
+       }
        
        @include screen-md-down {
-               padding: 10px;
+               background-color: $wcfHeaderBackground;
+               
+               > .layoutBoundary {
+                       padding: 9px 10px;
+               }
        }
        
        @include screen-lg {
-               align-items: center;
-               flex-wrap: wrap;
-               padding-top: 30px;
-               padding-bottom: 0;
+               background-color: $wcfHeaderMenuBackground;
        }
 }
 
-/* LOGO */
-.pageHeaderLogo {
-       @include screen-lg {
-               flex: 0 0 50%;
-               margin-bottom: 30px;
+.pageHeaderFacade {
+       > .layoutBoundary {
+               align-items: center;
+               display: flex;
                
-               .pageHeaderLogoSmall {
-                       display: none;
+               @include screen-lg {
+                       align-items: center;
+                       padding-bottom: 40px;
+                       padding-top: 40px;
+               }
+               
+               @include screen-md-down {
+                       height: 50px;
+                       justify-content: center;
+                       left: 60px;
+                       padding: 9px 0;
+                       position: fixed;
+                       right: 60px;
+                       top: 0;
+                       width: auto;
+                       z-index: 301;
                }
-       }
-       
-       .pageHeaderLogoLarge {
-               max-width: 100%;
-       }
-       
-       .pageHeaderLogoSmall {
-               max-height: 30px;
        }
 }
 
        }
 }
 
-@include screen-lg {
-       .pageHeader:not(.sticky) {
-               .mainMenu {
-                       background-color: $wcfHeaderMenuBackground;
-                       position: relative;
-                       
-                       /* The `box-shadow` and the `::before` are used to create a full-width
-                          color stripe that matches the height of the main menu. This trick is
-                          used to allows us to have all elements in the header share a common
-                          ancestor in order to easily move elements with flexbox' `order` property.
-                          
-                          The `box-shadow` is a neat hack because an `::after` element would
-                          increase the page width unless we set `overflow: hidden` to the entire
-                          page header which is bad for multiple reasons. */
-                       box-shadow: 900px 0 0 0 $wcfHeaderMenuBackground;
-                       
-                       &::before {
-                               background-color: $wcfHeaderMenuBackground;
-                               bottom: 0;
-                               content: "";
-                               left: -100%;
-                               position: absolute;
-                               top: 0;
-                               width: 100%;
-                       }
-               }
-       }
-       
-       .pageHeaderSearchInputContainer .pageHeaderSearchInput {
-               width: 250px;
-       }
-}
-
 /* user panel */
 .userPanel {
        background-color: $wcfHeaderMenuBackground;
        }
 }
 
+/* LOGO */
+.pageHeaderLogo {
+       @include screen-lg {
+               flex: 0 0 50%;
+               
+               .pageHeaderLogoLarge {
+                       max-width: 100%;
+               }
+               
+               .pageHeaderLogoSmall {
+                       display: none;
+               }
+       }
+       
+       @include screen-md-down {
+               .pageHeaderLogoLarge {
+                       display: none;
+               }
+               
+               .pageHeaderLogoSmall {
+                       max-height: 30px;
+               }
+       }
+}
+
 /* SEARCH AREA */
 .pageHeaderSearch {
        @include screen-lg {
                flex: 0 0 50%;
-               margin-bottom: 30px;
                text-align: right;
                
                .pageHeaderSearchLabel {
 }
 
 .pageHeaderSearchInputContainer {
-       background-color: $wcfHeaderSearchBoxBackground;
-       border-radius: 2px;
-       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        display: inline-flex;
-       padding: 3px;
        position: relative;
        
        .pageHeaderSearchType {
                display: flex;
                
                > .button {
+                       align-items: center;
+                       background-color: $wcfHeaderMenuLinkBackground;
                        border-radius: 2px 0 0 2px;
+                       color: $wcfHeaderMenuLink;
+                       display: flex;
                        max-width: 200px;
                        min-width: 140px;
                        overflow: hidden;
                                right: 8px;
                        }
                }
-       }
-       
-       .pageHeaderSearchInputButton {
-               border-radius: 0 2px 2px 0;
-               padding: 4px 7px;
+               
+               > .button:hover,
+               &.dropdownOpen > .button {
+                       background: $wcfHeaderMenuLinkBackgroundActive;
+                       color: $wcfHeaderMenuLinkActive;
+               }
        }
        
        .pageHeaderSearchInput {
-               background-color: transparent;
+               background-color: $wcfHeaderSearchBoxBackground;
                border-width: 0;
                color: $wcfHeaderSearchBoxText;
+               padding-bottom: 8px;
+               padding-top: 8px;
+               width: 250px;
                
                &:focus,
                &:hover {
-                       background-color: transparent;
+                       background-color: $wcfHeaderSearchBoxBackgroundActive;
                        color: $wcfHeaderSearchBoxTextActive;
                        
-                       /* set placeholder color */
+                       /* set placeholder color, do not chain these with a comma
+                          as an unrecognized value causes the instruction to be
+                          discarded in entirety */
                        &::-webkit-input-placeholder { /* WebKit browsers */
                                color: $wcfHeaderSearchBoxPlaceholderActive;
                        }
                        }
                }
                
-               /* set placeholder color */
+               /* set placeholder color, do not chain these with a comma
+                  as an unrecognized value causes the instruction to be
+                  discarded in entirety */
                &::-webkit-input-placeholder { /* WebKit browsers */
                        color: $wcfHeaderSearchBoxPlaceholder;
                }
                        display: none;
                }
        }
+       
+       .pageHeaderSearchInputButton {
+               background-color: $wcfHeaderMenuLinkBackground;
+               border-radius: 0 2px 2px 0;
+               color: $wcfHeaderMenuLink;
+               padding: 4px 9px;
+               
+               &:hover {
+                       background: $wcfHeaderMenuLinkBackgroundActive;
+                       color: $wcfHeaderMenuLinkActive;
+               }
+       }
 }
 
-@include screen-md-down {
-       .pageHeader > div > div {
-               padding-bottom: 10px;
-               padding-top: 10px;
-       }
-       
-       .pageHeaderLogo {
-               flex: 1 1 auto;
-               margin: 0 10px;
-               order: 2;
-               text-align: center;
+@include screen-lg {
+       .searchBarOpen .pageHeaderSearchInputContainer {
+               position: fixed;
+               top: 50px !important;
                
-               .pageHeaderLogoLarge {
-                       display: none;
+               .pageHeaderSearchType > .button {
+                       border-top-left-radius: 0;
                }
                
-               .pageHeaderLogoSmall {
-                       display: inline;
+               .pageHeaderSearchInputButton {
+                       border-top-right-radius: 0;
                }
        }
+}
+
+@include screen-md-down {
+       .pageHeaderPanel > .layoutBoundary {
+               /* pushes buttons to the left / right corner */
+               justify-content: space-between;
+       }
        
        .userPanel {
                flex: 0 0 auto;
-               order: 3;
                
                &::before {
                        content: $fa-var-user;
        
        .mainMenu {
                flex: 0 0 auto;
-               order: 1;
                
                &::before {
                        content: $fa-var-bars;
                }
        }
        
-       .pageHeaderSearch:not(.open) {
-               display: none;
+       .pageHeaderSearch {
+               left: 0;
+               position: fixed;
+               right: 0;
+               top: 50px !important;
+               
+               .pageHeaderSearchInputContainer {
+                       border-radius: 0;
+                       display: flex;
+                       flex-wrap: wrap;
+                       
+                       .pageHeaderSearchType {
+                               flex: 0 0 100%;
+                               
+                               > .button {
+                                       border-radius: 0;
+                                       max-width: unset;
+                                       min-width: unset;
+                                       padding-bottom: 8px;
+                                       padding-top: 8px;
+                                       width: 100%;
+                               }
+                       }
+                       
+                       .pageHeaderSearchInput {
+                               flex: 1 1 auto;
+                       }
+                       
+                       .pageHeaderSearchInputButton {
+                               border-radius: 0;
+                       }
+               }
+               
+               &:not(.open) {
+                       display: none;
+               }
+       }
+}
+
+@include screen-xs {
+       .pageHeaderPanel,
+       .pageHeaderFacade {
+               transition: transform .12s linear;
+       }
+       
+       .redactorActive .pageHeaderPanel,
+       .redactorActive .pageHeaderFacade {
+               transform: translateY(-120%);
        }
 }
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
deleted file mode 100644 (file)
index 2671fb6..0000000
+++ /dev/null
@@ -1,216 +0,0 @@
-.pageHeader > div {
-       /* huge performance increase when scrolling */
-       will-change: transform;
-}
-
-@include screen-lg {
-       .pageHeaderContainer.stickyPageHeader {
-               z-index: 300;
-       }
-       
-       .pageHeader.sticky {
-               > div {
-                       background-color: $wcfHeaderMenuBackground;
-                       box-shadow: 0 0 10px rgba(0, 0, 0, .6);
-                       left: 0;
-                       position: fixed;
-                       top: 0;
-                       right: 0;
-                       z-index: 301;
-               }
-               
-               
-               .layoutBoundary {
-                       flex-wrap: nowrap;
-                       min-height: 50px;
-                       
-                       // remove padding, the vertical alignment is done using `align-items`
-                       padding-bottom: 0;
-                       padding-top: 0;
-               }
-               
-               .pageHeaderContainerLeft,
-               .pageHeaderContainerRight {
-                       align-items: center;
-                       flex-direction: row;
-                       justify-content: flex-start;
-               }
-               
-               .pageHeaderContainerRight {
-                       min-width: 200px;
-                       position: relative;
-               }
-               
-               .pageHeaderLogo {
-                       display: none;
-                       flex: 0 0 auto;
-                       margin-bottom: 0;
-                       order: 1;
-                       
-                       > a > .pageHeaderLogoLarge {
-                               display: none;
-                       }
-                       
-                       > a > .pageHeaderLogoSmall {
-                               display: block;
-                       }
-               }
-               
-               .mainMenu {
-                       flex: 1 1 auto;
-                       margin-right: 20px;
-                       order: 2;
-                       
-                       .boxMenu {
-                               > li > a {
-                                       align-items: center;
-                                       display: flex;
-                                       
-                                       > span {
-                                               flex: 0 0 auto;
-                                       }
-                                       
-                                       > .boxMenuLinkOutstandingItems {
-                                               margin-left: 5px;
-                                       }
-                               }
-                       }
-               }
-               
-               .userPanel {
-                       flex: 0 0 auto;
-                       order: 4;
-               }
-               
-               .pageHeaderSearch {
-                       flex: 0 0 62px;
-                       margin-bottom: 0;
-                       margin-left: 10px;
-                       order: 3;
-                       
-                       .pageHeaderSearchLabel {
-                               background: $wcfHeaderMenuLinkBackground;
-                               color: $wcfHeaderMenuLink;
-                               cursor: pointer;
-                               display: block;
-                               height: 50px;
-                               position: relative;
-                               width: 62px;
-                               
-                               &:hover {
-                                       background: $wcfHeaderMenuLinkBackgroundActive;
-                                       color: $wcfHeaderMenuLinkActive;
-                               }
-                               
-                               &::before {
-                                       color: inherit;
-                                       content: $fa-var-search;
-                                       display: block;
-                                       font-family: FontAwesome;
-                                       font-size: 28px;
-                                       line-height: 32px;
-                                       position: absolute;
-                                       right: 18px;
-                                       top: 50%;
-                                       transform: translateY(-50%);
-                               }
-                       }
-               }
-               
-               &:not(.searchBarOpen) .pageHeaderSearchInputContainer {
-                       display: none;
-               }
-               
-               &.searchBarOpen .pageHeaderSearchInputContainer {
-                       position: absolute;
-                       
-                       // Regular top calculation does not work because one of the parents
-                       // is set to `position: fixed`, screwing up the entire calculation.
-                       // We can work around this by using a relative top value of 100%
-                       // which equals the total height of the parent container.
-                       top: 100% !important;
-               }
-               
-               
-       }
-}
-
-// force sticky header on mobile, there is no difference when scrolled
-// all the way up and it might flicker when scrolling due to the inconsistent
-// scroll event being fired
-@include screen-md-down {
-       .pageHeaderContainer {
-               z-index: 300;
-               
-               // touch browser allow to scroll past the page top before they bounce back,
-               // but in that case the original background color is visible
-               background-color: transparent;
-       }
-       
-       .pageHeader {
-               flex-wrap: nowrap;
-               
-               > div {
-                       background-color: $wcfHeaderBackground;
-                       box-shadow: 0 0 10px rgba(0, 0, 0, .6);
-                       left: 0;
-                       max-width: 100vw;
-                       position: fixed;
-                       top: 0;
-                       right: 0;
-                       z-index: 301;
-               }
-       }
-       
-       .boxesHero {
-               background-color: $wcfHeaderBackground;
-       }
-}
-
-@include screen-xs {
-       .pageHeader > div {
-               transition: transform .12s ease-in-out;
-       }
-       
-       .redactorActive .pageHeader > div {
-               transform: translateY(-120%);
-       }
-}
-
-@include screen-md-down {
-       .pageHeaderSearch.open {
-               left: 0;
-               position: absolute;
-               right: 0;
-               
-               .pageHeaderSearchInputContainer {
-                       border-radius: 0;
-                       display: flex;
-                       flex-wrap: wrap;
-                       
-                       .pageHeaderSearchType {
-                               flex: 0 0 100%;
-                               margin-bottom: 3px;
-                               
-                               > .button {
-                                       border-radius: 0;
-                                       max-width: unset;
-                                       min-width: unset;
-                                       width: 100%;
-                                       
-                                       // input field is larger on iOS
-                                       align-items: center;
-                                       display: flex;
-                               }
-                       }
-                       
-                       .pageHeaderSearchInput {
-                               flex: 1 1 auto;
-                       }
-                       
-                       .pageHeaderSearchInputButton {
-                               border-radius: 0;
-                       }
-               }
-       }
-}
index 425519fd2d3116056e74329276b2cd0185f318c1..8af16261549d48456f34961f0f90bc1d9be81ec7 100644 (file)
@@ -52,9 +52,8 @@
        }
        
        @include screen-lg {
-               &.interactiveDropdownFixed {
-                       position: fixed;
-               }
+               position: fixed;
+               top: 50px !important;
        }
 }
 
index f52b324778f5b8cdbcd68ae9d8768435adb007ce..9edbb8c90b478b43d5075f4c47f5031b0fad6a27 100644 (file)
@@ -34,6 +34,7 @@
        }
        
        > .anchorFixedHeader:target {
+               margin-top: -50px;
                pointer-events: none;
                position: relative;
                z-index: 10;
                &::after {
                        content: "";
                        display: block;
+                       height: 50px;
                }
                
                > .message {
                        pointer-events: all;
-               }
-               
-               @include screen-md-down {
-                       margin-top: -52px;
-                       
-                       &::after {
-                               height: 52px;
-                       }
-                       
-                       > .message {
-                               transform: translateY(52px);
-                       }
-               }
-               
-               @include screen-lg {
-                       margin-top: -50px;
-                       
-                       &::after {
-                               height: 50px;
-                       }
-                       
-                       > .message {
-                               transform: translateY(50px);
-                       }
+                       transform: translateY(50px);
                }
        }
        
index 6ba2f05043c74cf010f3eff83aa5db92828e99f0..c1504defb584eda25f2eb55f41cf4ce8bcb170c0 100644 (file)
@@ -2080,14 +2080,14 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderM
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLinkActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackground', 'rgba(19, 34, 48, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackgroundActive', 'rgba(55, 73, 95, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackgroundActive', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBorder', 'rgba(55, 73, 95, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(66, 66, 66, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(66, 66, 66, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholder', 'rgba(169, 169, 169, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholderActive', 'rgba(169, 169, 169, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackground', 'rgba(241, 246, 251, 1)');