frio: improvements in search behavior

- search value woll be added to nav search input
- focus on nav search input as main search
- save search button appears in the second navbar if search is available
- search heading appears in the second navbar
- provide a mobile search by pressing the search icon
- dirfind: heading distinguish between people and form search
- some js fixes in theme.js

mod/dirfind.php

@@ -33,6 +33,7 @@ function dirfind_content(&$a, $prefix = "") {
 
 	if(strpos($search,'@') === 0) {
 		$search = substr($search,1);
+		$header = sprintf( t('People Search - %s'), $search);
 		if ((valid_email($search) AND validate_email($search)) OR
 			(substr(normalise_link($search), 0, 7) == "http://")) {
 			$user_data = probe_url($search);
@@ -43,6 +44,7 @@ function dirfind_content(&$a, $prefix = "") {
 	if(strpos($search,'!') === 0) {
 		$search = substr($search,1);
 		$community = true;
+		$header = sprintf( t('Forum Search - %s'), $search);
 	}
 
 	$o = '';
@@ -227,7 +229,7 @@ function dirfind_content(&$a, $prefix = "") {
 		$tpl = get_markup_template('viewcontact_template.tpl');
 
 		$o .= replace_macros($tpl,array(
-			'title' => sprintf( t('People Search - %s'), $search),
+			'title' => $header,
 			'$contacts' => $entries,
 			'$paginate' => paginate($a),
 		));

view/theme/frio/css/style.css

@@ -581,6 +581,9 @@ nav.navbar a {
     margin: 0px;
     padding: 10px 15px;
 }
+#search-mobile .navbar-form {
+    margin: 0;
+}
 #topbar-first #search-box .form-search {
     height: 25px;
     font-size: 13px;
@@ -1531,6 +1534,11 @@ img.acpopup-img {
     /*margin-left: -15px;*/
     padding: 0;
 }
+#tabmenu .search-heading {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 ul.tabs {
     list-style: none;
     height: 100%;
@@ -1661,6 +1669,15 @@ ul.dropdown-menu li:hover {
     color: $link_color;
     font-size: 20px;
 }
+.search-content-wrapper > #search-header-wrapper {
+    display: none;
+}
+.search-content-wrapper > .section-title-wrapper {
+    display: none;
+}
+#navbar-button > #search-save-form > #search-save {
+    margin-top: 3px;
+}
 /* Section-Content-Wrapper */
 #search-header-wrapper {
     padding: 15px;

view/theme/frio/js/theme.js

@@ -40,7 +40,7 @@ $(document).ready(function(){
 	$(".field.select > select, .field.custom > select").addClass("form-control");
 
 	// move the tabbar to the second nav bar
-	if( $("ul.tabbar")) {
+	if( $("ul.tabbar").length ) {
 		$("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu");
 	}
 
@@ -50,7 +50,7 @@ $(document).ready(function(){
 	// to the friendica logo (the mask is in nav.tpl at the botom). To make it work we need to apply the
 	// correct url. The only way which comes to my mind was to do this with js
 	// So we apply the correct url (with the link to the id of the mask) after the page is loaded.
-	if($("#logo-img")) {
+	if($("#logo-img").length ) {
 		var pageurl = "url('" + window.location.href + "#logo-mask')";
 		$("#logo-img").css({"mask": pageurl});
 	}
@@ -66,7 +66,7 @@ $(document).ready(function(){
 	});
 
 	// add Jot botton to the scecond navbar
-	if( $("section #jotOpen")) {
+	if( $("section #jotOpen").length ) {
 		$("section #jotOpen").appendTo("#topbar-second > .container > #navbar-button");
 		if( $("#jot-popup").is(":hidden")) $("#topbar-second > .container > #navbar-button #jotOpen").hide();
 	}
@@ -94,13 +94,6 @@ $(document).ready(function(){
 			});	
 		}
 	});
-
-	// add search-heading to the scecond navbar
-	if( $(".search-heading")) {
-		$(".search-heading").appendTo("#topbar-second > .container > #tabmenu");
-	}
-
-	
 		
 	//$('ul.flex-nav').flexMenu();
 
@@ -120,6 +113,47 @@ $(document).ready(function(){
 	// initialize the bootstrap-select
 	$('.selectpicker').selectpicker();
 
+	// add search-heading to the seccond navbar
+	if( $(".search-heading").length) {
+		$(".search-heading").appendTo("#topbar-second > .container > #tabmenu");
+	}
+
+	// add search results heading to the second navbar
+	// and insert the search value to the top nav search input
+	if( $(".search-content-wrapper").length ) {
+		// get the text of the heading (we catch the plain text because we don't
+		// want to have a h4 heading in the navbar
+		var searchText = $(".section-title-wrapper > h2").text();
+		// insert the plain text in a <h4> heading and give it a class
+		var newText = '<h4 class="search-heading">'+searchText+'</h4>';
+		// append the new heading to the navbar
+		$("#topbar-second > .container > #tabmenu").append(newText);
+
+		// try to get the value of the original search input to insert it 
+		// as value in the nav-search-input
+		var searchValue = $("#search-wrapper .form-group-search input").val();
+
+		// if the orignal search value isn't available use the location path as value
+		if( typeof searchValue === "undefined") {
+			// get the location path
+			var urlPath = window.location.search
+			// and split it up in its parts
+			var splitPath = urlPath.split(/(\?search?=)(.*$)/);
+
+			if(typeof splitPath[2] !== 'undefined') {
+				// decode the path (e.g to decode %40 to the character @)
+				var searchValue = decodeURIComponent(splitPath[2]);
+			}
+		}
+
+		if( typeof searchValue !== "undefined") {
+			$("#nav-search-input-field").val(searchValue);
+		}
+
+	}
+
+	// move the "Save the search" button to the second navbar
+	$(".search-content-wrapper #search-save-form ").appendTo("#topbar-second > .container > #navbar-button");
 
 });
 //function commentOpenUI(obj, id) {

view/theme/frio/templates/nav.tpl

@@ -27,7 +27,7 @@
 					<span class="sr-only">Toggle navigation</span>
 					<i class="fa fa-ellipsis-v"></i>
 				</button>
-				<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+				<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#search-mobile" aria-expanded="false" aria-controls="navbar">
 					<span class="sr-only">Toggle Search</span>
 					<i class="fa fa-search" style="color:#FFF;"></i>
 				</button>
@@ -247,6 +247,17 @@
 </nav>
 {{/if}}
 
+{{* provide a a search input for mobile view, which expands by pressing the search icon *}}
+<div id="search-mobile" class="hidden-lg hidden-md collapse">
+	<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
+		<!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
+		<div class="form-group form-group-search">
+			<input id="nav-search-input-field-mobile" class="form-control form-search" type="text" name="search" data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
+			<button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
+		</div>
+	</form>
+</div>
+
 {{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}}
 <div id="topbar-second" class="topbar">
 	<div class="container">

view/theme/frio/templates/searchbox.tpl

@@ -1,4 +1,7 @@
 
+{{* important notes: The frio theme hides under certain conditions some parts of the templates through css.
+Some parts of this template will be moved by js to other places (see theme.js) - E.g. the save-search button}}
+
 <div id="{{$id}}" {{* class="input-group" *}}>
 	<div id="search-wrapper">
 		<form action="{{$action_url}}" method="get" >
@@ -15,7 +18,7 @@
 					<div class="col-md-8">
 						{{* The button to save searches *}}
 						{{if $savedsearch}}
-						<button class="btn btn-primary btn-small pull-right" type="submit" name="save" id="search-save" value="{{$save_label}}">{{$save_label}}</button>
+						<button class="btn btn-primary btn-small pull-right" type="submit" name="save" value="{{$save_label}}">{{$save_label}}</button>
 						{{/if}}
 
 						{{* The select popup menu to select what kind of results the user would like to search for *}}
@@ -43,4 +46,9 @@
 			
 		</form>
 	</div>
+	{{* This form is inserted as experiment to move the search-save button to the second navbar with js *}}
+	<form id="search-save-form" action="{{$action_url}}" method="get" >
+		<input type="hidden" name="search" value="{{$s}}" />
+		<button class="btn btn-primary btn-sm btn-main pull-right" type="submit" name="save" id="search-save" value="{{$save_label}}"><i class="fa fa-floppy-o fa-2x" aria-hidden="true"></i></button>
+	</form>
 </div>