Fixed mobile search bar

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
index 2e200cae94e4ea88d791effe3987e4f416db70ed..969442696d1a33d00431da59f9fca8a6a9815803 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
@@ -7,8 +7,8 @@
  * @module     WoltLab/WCF/Ui/Mobile
  */
 define(
-       [        'Core', 'Environment', 'Language', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'],
-       function(Core,    Environment,   Language,   DomChangeListener,    UiCloseOverlay,    UiScreen,    UiPageMenuMain,     UiPageMenuUser)
+       [        'Core', 'Environment', 'EventHandler', 'Language', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'],
+       function(Core,    Environment,   EventHandler,   Language,   DomChangeListener,    UiCloseOverlay,    UiScreen,    UiPageMenuMain,     UiPageMenuUser)
 {
        "use strict";
        
@@ -76,7 +76,7 @@ define(
                },
                
                _init: function() {
-                       //@todothis._initSearchBar();
+                       this._initSearchBar();
                        this._initButtonGroupNavigation();
                        this._initMobileMenu();
                        
@@ -85,19 +85,20 @@ define(
                },
                
                _initSearchBar: function() {
-                       var _searchBar = elBySel('.searchBar');
+                       var _searchBar = elById('pageHeaderSearch');
+                       var _searchInput = elById('pageHeaderSearchInput');
                        
-                       _searchBar.addEventListener(WCF_CLICK_EVENT, function() {
-                               if (_enabled) {
-                                       _searchBar.classList.add('searchBarOpen');
+                       EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', function(data) {
+                               if (data.identifier === 'com.woltlab.wcf.search') {
+                                       _searchBar.style.setProperty('top', elById('pageHeader').offsetHeight + 'px', '');
+                                       _searchBar.classList.add('open');
+                                       _searchInput.focus();
                                        
-                                       return false;
+                                       data.handler.close(true);
                                }
-                               
-                               return false;
                        });
                        
-                       _main.addEventListener(WCF_CLICK_EVENT, function() { _searchBar.classList.remove('searchBarOpen'); });
+                       _main.addEventListener(WCF_CLICK_EVENT, function() { _searchBar.classList.remove('open'); });
                },
                
                _initButtonGroupNavigation: function() {

diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index 2c8293380102fd2f5dccd569dee492f2a6ab5c34..dc1ca715b8eb98c7200b0b2b55bb205f0a7cce7f 100644 (file)
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -48,6 +48,20 @@ input[type="search"] {
        -webkit-appearance: none;
 }
 
+.iOS {
+       input[type="date"],
+       input[type="datetime"],
+       input[type="email"],
+       input[type="number"],
+       input[type="password"],
+       input[type="search"],
+       input[type="text"],
+       input[type="url"],
+       textarea {
+               font-size: 16px;
+       }
+}
+
 textarea {
        border-width: 1px;
        width: 100%;

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index d6b1854621d021f1ae6ef25fd7c496c9400838ef..e8103de383beeba05b615efb6b329658b5a13ed6 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -404,31 +404,7 @@
                }
        }
        
-       .pageHeader {
-               &.searchBarOpen {
-                       .pageHeaderLogo,
-                       .mainMenu,
-                       .userPanel {
-                               display: none;
-                       }
-                       
-                       .pageHeaderSearch {
-                               flex: 0 0 100%;
-                               
-                               .pageHeaderSearchInputContainer {
-                                       display: block;
-                               } 
-                               
-                               .pageHeaderSearchInput {
-                                       width: 100%;
-                               }
-                       }
-               }
-               
-               &:not(.searchBarOpen) {
-                       .pageHeaderSearch {
-                               display: none;
-                       }
-               }
+       .pageHeaderSearch:not(.open) {
+               display: none;
        }
 }

diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index 824603875656cdda76eb3d04bbd3096a5c2c4cb3..e2fc42e2c9a3857030fb71059136e58d7657dea3 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -117,25 +117,8 @@
                        }
                }
                
-               &:not(.searchBarOpen) {
-                       .pageHeaderSearchInputContainer {
-                               display: none;
-                       }
-               }
-               
-               &.searchBarOpen {
-                       .pageHeaderSearchInputContainer {
-                               border-top-left-radius: 0;
-                               border-top-right-radius: 0;
-                               position: absolute;
-                               top: 50px !important;
-                               z-index: 100; 
-                       }
-                       
-                       .pageHeaderSearchLabel {
-                               background: $wcfHeaderMenuLinkBackgroundActive;
-                               color: $wcfHeaderMenuLinkActive;
-                       }
+               .pageHeaderSearchInputContainer {
+                       display: none;
                }
        }
 }
@@ -171,3 +154,32 @@
                background-color: $wcfHeaderBackground;
        }
 }
+
+@include screen-md-down {
+       .pageHeaderSearch.open {
+               left: 0;
+               position: absolute;
+               right: 0;
+               
+               .pageHeaderSearchInputContainer {
+                       border-radius: 0;
+                       display: flex;
+                       
+                       .pageHeaderSearchType > .button {
+                               border-radius: 0;
+                               
+                               // input field is larger on iOS
+                               align-items: center;
+                               display: flex;
+                       }
+                       
+                       .pageHeaderSearchInput {
+                               flex: 1 1 auto;
+                       }
+                       
+                       .pageHeaderSearchInputButton {
+                               border-radius: 0;
+                       }
+               }
+       }
+}