Proper support for the admin panel search bar on mobile devices

See #2662

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index f527b3f7e8a7d1edb4757eac17b6429f255c065d..cc35dd1fd1df7f99822214b1ed4dc77699043dce 100644 (file)
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -1784,6 +1784,8 @@ WCF.ACP.Search = WCF.Search.Base.extend({
        _success: function(data) {
                this._super(data);
                
+               var search = elById('pageHeaderSearch');
+               this._list[0].style.setProperty('top', search.offsetTop + search.clientHeight + 'px', 'important');
                this._list.addClass('acpSearchDropdown');
        },
        

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index c03fb69b19e63456a92271d993d639f3e724a67e..4244f7f7d4e231b74fe506013cf16866963ee879 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -283,22 +283,54 @@ $wcfAcpSubMenuWidth: 300px;
 }
 
 @include screen-md-down {
+       .pageHeaderPanel > .layoutBoundary {
+               justify-content: normal;
+       }
+       
        .mainMenu {
+               margin-right: 10px;
                order: 1;
        }
        
-       .pageHeaderLogo {
-               order: 2;
+       .pageHeaderContainer:not(.pageHeaderContainerIsLogin) .pageHeaderLogo {
+               left: 50%;
+               position: absolute;
+               /* Half the image width is actually 27.5px, but this would also cause the browser's anti-aliasing to kick in. */
+               transform: translateX(-28px);
+       }
+       
+       .pageHeaderContainer.pageHeaderContainerIsLogin .pageHeaderLogo {
+               flex: 1 auto;
+               text-align: center;
        }
        
        .userPanel {
+               flex: 1 auto;
                order: 3;
+               pointer-events: none;
+               text-align: right;
+               
+               &::before {
+                       pointer-events: all;
+               }
        }
        
        .acpPageMenu,
        .acpPageSubMenu {
                display: none;
        }
+       
+       .pageHeaderMobileSearch {
+               order: 2;
+               
+               &::before {
+                       content: $fa-var-search;
+                       font-family: FontAwesome;
+                       font-size: 28px;
+                       line-height: 32px;
+                       padding: 5px 5px;
+               }
+       }
 }
 
 .main {
@@ -386,3 +418,26 @@ $wcfAcpSubMenuWidth: 300px;
 #uploadCoverPhoto > .button {
        vertical-align: top;
 }
+
+@include screen-md-down {
+       .pageHeaderSearch {
+               display: block;
+               top: 50px;
+       }
+}
+
+@include screen-sm-md {
+       .pageHeaderSearch .pageHeaderSearchInputContainer .pageHeaderSearchType {
+               flex: 0 auto;
+       }
+}
+
+@include screen-xs {
+       .pageHeaderSearchInputContainer > .dropdown {
+               flex: 1 auto;
+       }
+       
+       .pageHeaderSearchInput {
+               width: 100% !important;
+       }
+}

diff --git a/wcfsetup/install/files/acp/templates/pageHeader.tpl b/wcfsetup/install/files/acp/templates/pageHeader.tpl
index 37f2c202f5ae09259fe8a6393c982e9609f5bd81..e05b968e397c609101a7163536670fc2cbd7ff6e 100644 (file)
--- a/wcfsetup/install/files/acp/templates/pageHeader.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeader.tpl
@@ -1,4 +1,4 @@
-<div class="pageHeaderContainer">
+<div class="pageHeaderContainer{if !$__isLogin|empty} pageHeaderContainerIsLogin{/if}">
        <header id="pageHeader" class="pageHeader">
                <div id="pageHeaderPanel" class="pageHeaderPanel">
                        <div class="layoutBoundary">

diff --git a/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl b/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl
index 79c03829450bfc6bb81c258c4d8b99794ab4d89f..678f849ff06bc1fa55de6c04d163e9dbf6283f02 100644 (file)
--- a/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl
@@ -1,3 +1,3 @@
 <div id="mainMenu" class="mainMenu">
-       <!-- placeholder for mobile UI -->
+       <!-- Placeholder for the mobile UI. -->
 </div>

diff --git a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
index 08f750a0d4690e5fa7142c03468d12a22e9524d7..48f5dbe559de46256a2cf6a286b3ad5e53809373 100644 (file)
--- a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
@@ -1,3 +1,6 @@
+<div id="pageHeaderMobileSearch" class="pageHeaderMobileSearch">
+       <!-- Placeholder for the mobile UI. -->
+</div>
 <div id="pageHeaderSearch" class="pageHeaderSearch" data-disable-auto-focus="true">
        <div class="pageHeaderSearchInputContainer">
                <div id="pageHeaderSearchType" class="pageHeaderSearchType dropdown">
@@ -19,3 +22,16 @@
                </button>
        </div>
 </div>
+<script data-relocate="true">
+       (function() {
+               elById('pageHeaderMobileSearch').addEventListener('click', function() {
+                       this.classList.toggle('active');
+                       
+                       if (elById('pageHeaderSearch').classList.toggle('open')) {
+                               window.setTimeout(function() {
+                                       elById('pageHeaderSearchInput').focus();
+                               }, 100);
+                       }
+               });
+       })();
+</script>

diff --git a/wcfsetup/install/files/lib/system/style/StyleHandler.class.php b/wcfsetup/install/files/lib/system/style/StyleHandler.class.php
index 9a29e3e46dace29ead2975666da2e79c9dfaa08e..553503307a6f69bae7bb6a06600bd7e4ce8a6a17 100644 (file)
--- a/wcfsetup/install/files/lib/system/style/StyleHandler.class.php
+++ b/wcfsetup/install/files/lib/system/style/StyleHandler.class.php
@@ -246,6 +246,7 @@ class StyleHandler extends SingletonFactory {
         * if there is no default style.
         * 
         * @return Style|null
+        * @since 3.2
         */
        public function getDefaultStyle() {
                if (!RequestHandler::getInstance()->isACPRequest()) {