hide nav search behind a button, css fixes and cleanup

5 files changed, 12 insertions, 13 deletions

diff --git a/view/tpl/follow.tpl b/view/tpl/follow.tpl
index 240cc7b55..4def1415d 100755
--- a/view/tpl/follow.tpl
+++ b/view/tpl/follow.tpl
@@ -2,7 +2,7 @@
 	<h3>{{$connect}}</h3>
 	<form action="follow" method="post" />
 		<div class="input-group">
-			<input class="form-control" type="text" name="url" title="{{$hint}}" placeholder="{{$desc}}" />
+			<input class="form-control form-control-sm" type="text" name="url" title="{{$hint}}" placeholder="{{$desc}}" />
 			<div class="input-group-btn">
 				<button class="btn btn-success" type="submit" name="submit" value="{{$follow}}" title="{{$follow}}"><i class="fa fa-fw fa-plus"></i></button>
 			</div>
diff --git a/view/tpl/hdr.tpl b/view/tpl/hdr.tpl
index fa2996be6..5ab7d68fd 100644
--- a/view/tpl/hdr.tpl
+++ b/view/tpl/hdr.tpl
@@ -1,5 +1,3 @@
-<div id="banner" class="hidden-sm hidden-xs">{{$banner}}</div>
-
 <div id="nav-notifications-template" rel="template">
 	<a class="dropdown-item clearfix dropdown-notification {5}" href="{0}" title="{2} {3}"><img class="dropdown-menu-img-sm" data-src="{1}"><span class="contactname">{2}</span><span class="dropdown-sub-text">{3}<br>{4}</span></a>
 </div>
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index d3ead3cfe..ab9698d49 100755
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -19,11 +19,8 @@
 	<button id="expand-aside" type="button" class="navbar-toggler border-0" data-toggle="offcanvas" data-target="#region_1">
 		<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
 	</button>
-	<!--button id="expand-tabs" type="button" class="navbar-toggler border-0" data-toggle="collapse" data-target="#tabs-collapse-1">
-		<i class="fa fa-arrow-circle-down" id="expand-tabs-icon"></i>
-	</button-->
 	{{if $localuser}}
-	<button id="notifications-btn" type="button" class="navbar-toggler border-0" data-toggle="collapse" data-target="#navbar-collapse-1" style="color: grey;">
+	<button id="notifications-btn" type="button" class="navbar-toggler border-0 text-muted" data-toggle="collapse" data-target="#navbar-collapse-1">
 		<i class="fa fa-exclamation-circle"></i>
 	</button>
 	{{/if}}
@@ -171,13 +168,17 @@
 		{{/if}}
 	</ul>
 
-	<!--div class="navbar-text hidden-lg-down">Hubzilla</div-->
+	<div class="navbar-text text-white font-weight-bold">{{$banner}}</div>
 
-	<ul class="navbar-nav hidden-sm-down ml-auto">
-		<li class="nav-item">
+	<ul id="nav-right" class="navbar-nav hidden-sm-down ml-auto">
+		<li class="nav-item collapse clearfix" id="nav-search">
 			<form class="form-inline" method="get" action="search" role="search">
-				<div id="nav-search-spinner"></div><input class="fa-search" id="nav-search-text" type="text" value="" placeholder="&#xf002; {{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();"/>
+				<input class="form-control form-control-sm mt-1" id="nav-search-text" type="text" value="" placeholder="&#xf002; {{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur=" $('#nav-search').hide(); $('#nav-search-btn').show();"/>
 			</form>
+			<div id="nav-search-spinner"></div>
+		</li>
+		<li class="nav-item" id="nav-search-btn">
+			<a class="nav-link" href="#nav-search" title="{{$nav.search.3}}" onclick="$('#nav-search').show(); $('#nav-search-btn').hide(); $('#nav-search-text').focus(); return false;"><i class="fa fa-fw fa-search"></i></a>
 		</li>
 		{{if $nav.help.6}}
 		<li class="nav-item dropdown {{$sel.help}}">
diff --git a/view/tpl/peoplefind.tpl b/view/tpl/peoplefind.tpl
index 82da8b9c9..2ecfbaff9 100755
--- a/view/tpl/peoplefind.tpl
+++ b/view/tpl/peoplefind.tpl
@@ -2,7 +2,7 @@
 	<h3>{{$findpeople}}</h3>
 	<form action="directory" method="post" />
 		<div class="input-group form-group">
-			<input class="form-control" type="text" name="search" title="{{$hint}}{{if $advanced_search}}{{$advanced_hint}}{{/if}}" placeholder="{{$desc}}" />
+			<input class="form-control form-control-sm" type="text" name="search" title="{{$hint}}{{if $advanced_search}}{{$advanced_hint}}{{/if}}" placeholder="{{$desc}}" />
 			<div class="input-group-btn">
 				<button class="btn btn-outline-secondary" type="submit" name="submit"><i class="fa fa-fw fa-search"></i></button>
 			</div>
diff --git a/view/tpl/searchbox.tpl b/view/tpl/searchbox.tpl
index eafade405..8f7ac5162 100644
--- a/view/tpl/searchbox.tpl
+++ b/view/tpl/searchbox.tpl
@@ -1,7 +1,7 @@
 <form action="{{$action_url}}" method="get" >
 	<input type="hidden" name="f" value="" />
 	<div id="{{$id}}" class="input-group">
-		<input class="form-control" type="text" name="search" id="search-text" value="{{$s}}" onclick="this.submit();" />
+		<input class="form-control form-control-sm" type="text" name="search" id="search-text" value="{{$s}}" onclick="this.submit();" />
 		<div class="input-group-btn">
 			<button type="submit" name="submit" class="btn btn-outline-secondary" id="search-submit" value="{{$search_label}}"><i class="fa fa-search"></i></button>
 			{{if $savedsearch}}