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 8e241d770f8eeccbd9afa05260f32b5675deb286..1e906bc8d28ed3161bd66e90426863b23ab56ab6 100644 (file)
--- 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({
                                        $('<input type="hidden" name="' + $input.attr('name') + '" value="' + $input.attr('value') + '" />').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 2a6a7b440ec0f4e5c34abd73aca69f7af7f1cdae..1ffff682d0e83e17912496485b8d71bc7304da66 100644 (file)
--- 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 a53d1578bc67d23a9437b85af1dd4009d6bf92ba..621ba883d92e1456f92ffd566f1d8f6079edbb91 100644 (file)
--- 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 e93a010ae4361be0fd043c15798c39f8abde2fec..8bd28f7f5c2725a9d935782c4f5fd8f3c3888ef4 100644 (file)
--- 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 a8d9dfb9cf1c46157271e161c1551be41a294fb6..ce7cc6d48020844ca5e8dfc5db7bddc7ea8ead2a 100644 (file)
--- 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;