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
This commit is contained in:
rabuzarus 2016-06-10 20:34:25 +02:00
parent 710822dca7
commit db5438ab1a
5 changed files with 85 additions and 13 deletions

View file

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

View file

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

View file

@ -40,7 +40,7 @@ $(document).ready(function(){
$(".field.select > select, .field.custom > select").addClass("form-control"); $(".field.select > select, .field.custom > select").addClass("form-control");
// move the tabbar to the second nav bar // move the tabbar to the second nav bar
if( $("ul.tabbar")) { if( $("ul.tabbar").length ) {
$("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu"); $("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 // 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 // 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. // 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')"; var pageurl = "url('" + window.location.href + "#logo-mask')";
$("#logo-img").css({"mask": pageurl}); $("#logo-img").css({"mask": pageurl});
} }
@ -66,7 +66,7 @@ $(document).ready(function(){
}); });
// add Jot botton to the scecond navbar // add Jot botton to the scecond navbar
if( $("section #jotOpen")) { if( $("section #jotOpen").length ) {
$("section #jotOpen").appendTo("#topbar-second > .container > #navbar-button"); $("section #jotOpen").appendTo("#topbar-second > .container > #navbar-button");
if( $("#jot-popup").is(":hidden")) $("#topbar-second > .container > #navbar-button #jotOpen").hide(); if( $("#jot-popup").is(":hidden")) $("#topbar-second > .container > #navbar-button #jotOpen").hide();
} }
@ -95,13 +95,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(); //$('ul.flex-nav').flexMenu();
// initialize the bootstrap tooltips // initialize the bootstrap tooltips
@ -120,6 +113,47 @@ $(document).ready(function(){
// initialize the bootstrap-select // initialize the bootstrap-select
$('.selectpicker').selectpicker(); $('.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) { //function commentOpenUI(obj, id) {

View file

@ -27,7 +27,7 @@
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<i class="fa fa-ellipsis-v"></i> <i class="fa fa-ellipsis-v"></i>
</button> </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> <span class="sr-only">Toggle Search</span>
<i class="fa fa-search" style="color:#FFF;"></i> <i class="fa fa-search" style="color:#FFF;"></i>
</button> </button>
@ -247,6 +247,17 @@
</nav> </nav>
{{/if}} {{/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 *}} {{* 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 id="topbar-second" class="topbar">
<div class="container"> <div class="container">

View file

@ -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="{{$id}}" {{* class="input-group" *}}>
<div id="search-wrapper"> <div id="search-wrapper">
<form action="{{$action_url}}" method="get" > <form action="{{$action_url}}" method="get" >
@ -15,7 +18,7 @@
<div class="col-md-8"> <div class="col-md-8">
{{* The button to save searches *}} {{* The button to save searches *}}
{{if $savedsearch}} {{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}} {{/if}}
{{* The select popup menu to select what kind of results the user would like to search for *}} {{* The select popup menu to select what kind of results the user would like to search for *}}
@ -43,4 +46,9 @@
</form> </form>
</div> </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> </div>