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

diff --git a/mod/dirfind.php b/mod/dirfind.php
index f193a5c45c6786cac7ae9615d3cc52b6eee41605..44f70d641edccd729be3ab9d373791a30d15ea1b 100644 (file)
--- a/mod/dirfind.php
+++ b/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),
                ));

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 0ecb56441d19a0874de1a2e932b51c0bfa267db1..49d78e13140d155847a31050f3724982d1df50ed 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/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;

diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 9be1b9456e8f8254d36e99f093f59d096d222d01..28221dcd0d1ff7a2c31bc347d0d27ba6ad4880b3 100644 (file)
--- a/view/theme/frio/js/theme.js
+++ b/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) {

diff --git a/view/theme/frio/templates/nav.tpl b/view/theme/frio/templates/nav.tpl
index b8d5b2307ee33ea0699dcf048ae827911eeafe4c..f77f2da783d962218976db3bdcdf8c95150d14a6 100644 (file)
--- a/view/theme/frio/templates/nav.tpl
+++ b/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">

diff --git a/view/theme/frio/templates/searchbox.tpl b/view/theme/frio/templates/searchbox.tpl
index cc39ba6dc56ecf512a91c7202df97a0e533ccb53..8f6354b26926815c31abd4fa1b6f5fd8a70cbbee 100644 (file)
--- a/view/theme/frio/templates/searchbox.tpl
+++ b/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>