Overhauled the layout of the mobile header

diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
index a729dfb88421dc17c3baf44d1277597963ecbf93..0483f63b8d7a47020b0465e8efa5d7584b986324 100644 (file)
--- a/com.woltlab.wcf/templates/pageHeaderSearch.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
@@ -20,6 +20,10 @@
 
 {event name='settings'}
 
+<a href="#" id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" role="button" tabindex="0" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
+       <span class="icon icon32 fa-search" aria-hidden="true"></span>
+</a>
+
 <div id="pageHeaderSearch" class="pageHeaderSearch">
        <form method="post" action="{@$__searchLink}">
                <div id="pageHeaderSearchInputContainer" class="pageHeaderSearchInputContainer">

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index cd1dea80d88ca4c0dffb71c7ba9075dc10e67271..c334ad7b0fec79fe32b5b98932dcefc8ce7771ab 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -30,14 +30,6 @@
                display: flex;
        }
 
-       @include screen-md-down {
-               background-color: $wcfHeaderBackground;
-
-               > .layoutBoundary {
-                       padding: 9px 10px;
-               }
-       }
-
        @include screen-lg {
                background-color: $wcfHeaderMenuBackground;
        }
@@ -58,26 +50,11 @@
                        padding-bottom: 30px;
                        padding-top: 30px;
                }
-
-               @include screen-md-down {
-                       height: 50px;
-                       -webkit-justify-content: center;
-                       justify-content: center;
-                       left: 60px;
-                       padding: 9px 0;
-                       position: fixed;
-                       right: 60px;
-                       top: 0;
-                       width: auto;
-                       z-index: 301;
-               }
        }
 }
 
 /* MAIN MENU */
 .mainMenu {
-       flex: 1;
-       margin-right: 20px;
        position: relative;
 
        .boxMenu {
@@ -223,6 +200,11 @@
                justify-content: flex-end;
                right: 0;
        }
+
+       @include screen-lg {
+               flex: 1;
+               margin-right: 20px;
+       }
 }
 
 /* Hack for a font rendering issue in Safari on menu hover */
@@ -331,6 +313,7 @@
                        max-height: 30px;
                        max-width: 100%;
                        object-fit: contain;
+                       width: auto;
                }
        }
 }
@@ -341,6 +324,12 @@
        position: fixed;
 }
 
+@include screen-lg {
+       .pageHeaderSearchMobile {
+               display: none;
+       }
+}
+
 .searchBarOpen .pageHeaderSearch {
        display: block;
 
@@ -458,16 +447,41 @@
 }
 
 @include screen-md-down {
-       .pageHeaderPanel > .layoutBoundary {
-               /* pushes buttons to the left / right corner */
-               -webkit-justify-content: space-between;
-               justify-content: space-between;
+       .pageHeader {
+               align-items: center;
+               background-color: $wcfHeaderBackground;
+               column-gap: 10px;
+               display: grid;
+               grid-template-areas: "logo search menu user";
+               grid-template-columns: auto repeat(3, max-content);
+               height: 50px;
+               left: 0;
+               padding: 0 10px;
+               position: fixed;
+               right: 0;
+               top: 0;
+       }
+
+       .pageHeaderPanel,
+       .pageHeaderFacade,
+       .pageHeaderPanel .layoutBoundary,
+       .pageHeaderFacade .layoutBoundary {
+               display: contents;
+               position: static;
+       }
+
+       .pageHeaderLogo {
+               grid-area: logo;
+       }
+
+       .pageHeaderSearchMobile {
+               grid-area: search;
        }
 
        .userPanel {
-               flex: 0 0 auto;
+               grid-area: user;
 
-               > .userPanelItems {
+               .userPanelItems {
                        display: none;
                }
 
@@ -477,13 +491,13 @@
        }
 
        .mainMenu {
-               flex: 0 0 auto;
+               grid-area: menu;
 
                &::before {
                        content: $fa-var-bars;
                }
 
-               > .boxContent {
+               .boxContent {
                        display: none;
                }
        }