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
parent
710822dca7
commit
db5438ab1a
5 changed files with 85 additions and 13 deletions
|
|
@ -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),
|
||||
));
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue