[mobile ui] improved searchbar

frappe/public/css/docs.css

@@ -57,16 +57,18 @@
 }
 #search-modal .modal-header {
   background: #fff;
-  display: table;
   width: 100%;
 }
-#search-modal .modal-header form,
-#search-modal .modal-header button {
-  display: table-cell;
+#search-modal .modal-header form {
   vertical-align: middle;
 }
 #search-modal .modal-header button {
-  height: 30px;
+  line-height: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 9;
+  padding: 9px;
 }
 .dropdown-navbar-new-comments > a {
   border: 0;

frappe/public/css/navbar.css

@@ -57,16 +57,18 @@
 }
 #search-modal .modal-header {
   background: #fff;
-  display: table;
   width: 100%;
 }
-#search-modal .modal-header form,
-#search-modal .modal-header button {
-  display: table-cell;
+#search-modal .modal-header form {
   vertical-align: middle;
 }
 #search-modal .modal-header button {
-  height: 30px;
+  line-height: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 9;
+  padding: 9px;
 }
 .dropdown-navbar-new-comments > a {
   border: 0;

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -61,9 +61,9 @@
 							<div class="input-group" style="width: 100%">
 								<input id="modal-search" type="text" class="form-control"
 								placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
+								<button type="reset" class="close"><i class="octicon octicon-x"></i></button>
 							</div>
 						</form>
-						<button type="button" class="close" data-dismiss="modal"><i class="octicon octicon-x"></i></button>
 					</div>
 				</div>
 			</div>

frappe/public/less/navbar.less

@@ -69,15 +69,19 @@
 	}
 	.modal-header {
 		background: #fff;
-		display: table;
 		width: 100%;
 
-		form, button {
-			display: table-cell;
+		form {
 			vertical-align: middle;
 		}
+
 		button {
-			height: 30px;
+			line-height: 0;
+			position: absolute;
+			right: 0;
+			top: 0;
+			z-index: 9;
+			padding: 9px;
 		}
 	}
 }