From: Alexander Ebert Date: Sun, 10 Apr 2016 11:51:13 +0000 (+0200) Subject: Improved page header visuals X-Git-Tag: 3.0.0_Beta_1~1939 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b413aa2ce869482c06e560981b1535d334307405;p=GitHub%2FWoltLab%2FWCF.git Improved page header visuals --- diff --git a/wcfsetup/install/files/js/WCF.Search.Message.js b/wcfsetup/install/files/js/WCF.Search.Message.js index 8e241d770f..1e906bc8d2 100644 --- a/wcfsetup/install/files/js/WCF.Search.Message.js +++ b/wcfsetup/install/files/js/WCF.Search.Message.js @@ -131,13 +131,12 @@ WCF.Search.Message.SearchArea = Class.extend({ if (this._searchArea.hasClass('dropdown')) { var $containerID = this._searchArea.wcfIdentify(); + var $dropdownMenu = WCF.Dropdown.getDropdownMenu($containerID); var $form = this._searchArea.find('form'); if ($form.length === 0) $form = this._searchArea.parent(); $form.submit(function() { // copy checkboxes and hidden fields into form - var $dropdownMenu = WCF.Dropdown.getDropdownMenu($containerID); - $dropdownMenu.find('input[type=hidden]').appendTo($form); $dropdownMenu.find('input[type=checkbox]:checked').each(function(index, input) { var $input = $(input); @@ -145,6 +144,34 @@ WCF.Search.Message.SearchArea = Class.extend({ $('').appendTo($form); }); }); + + var $enableFlexWidth = true; + require(['Ui/Screen'], function(UiScreen) { + UiScreen.on({ + match: function() { $enableFlexWidth = false; }, + unmatch: function() { $enableFlexWidth = true; }, + setup: function() { $enableFlexWidth = false; } + }) + }); + + $dropdownMenu.addClass('pageHeaderSearchDropdown'); + WCF.Dropdown.registerCallback($containerID, (function(containerID, action) { + if ($enableFlexWidth && action === 'open' && elById('pageHeader').classList.contains('sticky')) { + var width = elById('pageHeaderSearch').clientWidth + elById('topMenu').clientWidth; + if (width < 200) width = 200; + + this._searchArea.css('width', width + 'px'); + $dropdownMenu.css('width', width + 'px'); + } + else { + this._searchArea.css('width', ''); + $dropdownMenu.css('width', ''); + } + }).bind(this)); + + $(window).scroll((function () { + this._searchArea.css('width', ''); + }).bind(this)); } }, diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js b/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js index 2a6a7b440e..1ffff682d0 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js @@ -76,7 +76,7 @@ define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'ObjectMap', 'Ui/S _initElement: function(chooserId, element, languageId, languages, callback, allowEmptyValue) { var container = element.parentNode; container.classList.add('dropdown'); - var dropdownToggle = elCreate('div'); + var dropdownToggle = elCreate('a'); dropdownToggle.className = 'dropdownToggle boxFlag box24 inputPrefix'; container.insertBefore(dropdownToggle, element); diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss index a53d1578bc..621ba883d9 100644 --- a/wcfsetup/install/files/style/layout/pageHeader.scss +++ b/wcfsetup/install/files/style/layout/pageHeader.scss @@ -143,28 +143,36 @@ } @include large-screen-only { - .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 { + .pageHeader:not(.sticky) { + .mainMenu { background-color: $wcfHeaderMenuBackground; - bottom: 0; - content: ""; - left: -100%; - position: absolute; - top: 0; - width: 100%; + 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 { + padding-bottom: 10px; + padding-top: 10px; + width: 200px; } } } diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss index e93a010ae4..8bd28f7f5c 100644 --- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss +++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss @@ -83,7 +83,8 @@ } .pageHeaderSearch { - flex: 0 0 auto; + align-self: stretch; + flex: 0 0 50px; margin-bottom: 0; margin-left: 10px; order: 3; @@ -121,11 +122,6 @@ } &:not(.searchBarOpen) { - .pageHeaderSearch { - font-size: 0; - width: 50px; - } - .pageHeaderSearchInput, .pageHeaderSearchInputButton { display: none; @@ -134,17 +130,15 @@ &.searchBarOpen { .pageHeaderSearchInputContainer { - bottom: 0; - left: 0; + height: 100%; position: absolute; - right: 0; - top: 0; + top: 100%; + transform: translateX(-50px); z-index: 100; } .pageHeaderSearchLabel { - position: static; - visibility: hidden; + background-color: $wcfHeaderSearchBoxBackgroundActive; width: 50px; } } diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss index a8d9dfb9cf..ce7cc6d480 100644 --- a/wcfsetup/install/files/style/ui/dropdown.scss +++ b/wcfsetup/install/files/style/ui/dropdown.scss @@ -298,9 +298,16 @@ } .boxFlag > .box24, .boxFlag.box24 { + display: flex !important; min-height: 20px; } +@include large-screen-only { + .dropdownMenu.pageHeaderSearchDropdown { + transform: translateY(-10px); + } +} + @include small-screen-only { .dropdownMenu { left: 0 !important;