From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 10 Jul 2016 14:57:59 +0000 (+0200)
Subject: Fixed mobile search bar
X-Git-Tag: 3.0.0_Beta_1~1220
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=231008a513cf05b4fc366c43f440d1f1640d54f6;p=GitHub%2FWoltLab%2FWCF.git

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 2e200cae94..969442696d 100644
--- 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 2c82933801..dc1ca715b8 100644
--- 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 d6b1854621..e8103de383 100644
--- 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 8246038756..e2fc42e2c9 100644
--- 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;
+			}
+		}
+	}
+}