added search button, hiding the form by default. also fixes issue #241

notes: mobile needs a dedicated notification screen, imo, rather than
using the same popup. and /search needs a form on the page itself.

public/css/style.less

@@ -136,10 +136,6 @@ footer.footer {
 	}
 }
 
-#right-menu{
-	float:right;
-}
-
 #chat-content {
 	height:200px;
 	resize:none;
@@ -257,6 +253,11 @@ footer.footer {
 /* END: post-window needs to go in its own plugin area */
 
 
+//theme
+#search-form .btn-link {
+	color: white;
+}
+
 
 //START: FIXES FOR BS3, may need to remove these when we get out of the RC releases
 @media (max-width: 979px) {
@@ -266,9 +267,11 @@ footer.footer {
 	}
 }
 
-.container > .navbar-header, .container > .navbar-collapse {
+@media (min-width: 760px) {
-	padding-right: 0;
+	.container > .navbar-header, .container > .navbar-collapse {
-	margin-right: -11px;
+		padding-right: 0;
+		margin-right: -11px;
+	}
 }
 
 .badge {

public/src/forum/footer.js

@@ -44,6 +44,16 @@
 
 	socket.on('api:updateHeader', function(data) {
 
+		jQuery('#search-button').on('click', function() {
+			jQuery('#search-fields').removeClass('hide').show();
+			jQuery(this).hide();
+			jQuery('#search-fields input').focus()
+
+			jQuery('#search-form').on('submit', function() {
+				jQuery('#search-fields').hide();
+				jQuery('#search-button').show();
+			});
+		});
 		var rightMenu = $('#right-menu'),
 			isLoggedIn = data.uid > 0;
 
@@ -167,7 +177,7 @@
 				modal = chat.getModal(data.fromuid);
 				chat.appendChatMessage(modal, data.message, data.timestamp);
 			} else {
-				modal = chat.createModal(data.username, data.fromuid);				
+				modal = chat.createModal(data.username, data.fromuid);
 			}
 
 			chat.load(modal.attr('UUID'));

public/templates/header.tpl

@@ -53,29 +53,35 @@
 					<li>
 						<a href="/users">Users</a>
 					</li>
+					<!--Enable when /search form is completed <li class="visible-xs">
+						<a href="/search">Search</a>
+					</li>-->
 					<li>
 						<a href="/"></a>
 					</li>
 				</ul>
 
-
+				<form id="search-form" class="navbar-form navbar-right hidden-xs" role="search" method="GET" action="">
+					<div class="hide" id="search-fields">
+				    	<div class="form-group">
+							<input type="text" class="form-control" placeholder="Search" name="query">
+				    	</div>
+				    	<button type="submit" class="btn btn-default hide">Search</button>
+				    </div>
+			    	<button id="search-button" type="button" class="btn btn-link nodebb-loggedin"><i class="icon-search"></i></button>
+			    </form>
 
 				<ul id="right-menu" class="nav navbar-nav navbar-right">
-					<li class="notifications dropdown text-center">
+					<li class="notifications dropdown text-center hidden-xs">
 						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="notif_dropdown"><i class="icon-circle-blank"></i></a>
 						<ul id="notif-list" class="dropdown-menu" aria-labelledby="notif_dropdown">
-							<li><a href="#"><i class="icon-refresh icon-spin"></i> Loading Notifications</a></li>
+							<li>
+								<a href="#"><i class="icon-refresh icon-spin"></i> Loading Notifications</a>
+							</li>
 						</ul>
 					</li>
-					<li>
-						<form id="search-form" class="navbar-form navbar-right" role="search" method="GET" action="">
-					      <div class="form-group">
-					        <input type="text" class="form-control" placeholder="Search" name="query">
-					      </div>
-					      <button type="submit" class="btn btn-default hide">Search</button>
-					    </form>
-					</li>
 				</ul>
+
 				<div id="pagination"></div>
 			</div>
 		</div>