Hide search arrow keys until a search is active.

(imported from commit 2f6a11ccc410633157502e8beebb4acf32eca2b6)

templates/zephyr/home.html

@@ -4,8 +4,8 @@
   <div class="span9" id="top_statusbar">
     <div id="searchbox" class="always_in_view">
       <form class="form-search form-inline">
-        <div id="search_arrows" class="input-append">
-          <input class="search-query" id="search" type="text" placeholder="Search…" autocomplete="off">
+        <div id="search_arrows">
+          <input class="search-query" id="search" type="text" placeholder="Search…" onfocus="focus_search();" autocomplete="off">
           <button class="btn search_button search_button_middle" type="button" id="search_up" onclick="search_button_handler(true);"><i class="icon-chevron-up"></i></button>
           <button class="btn search_button search_button_middle" type="button" id="search_down" onclick="search_button_handler(false);"><i class="icon-chevron-down"></i></button>
           <button class="btn search_button" type="button" id="search_exit" onclick="clear_search();"><i class="icon-remove"></i></button>

zephyr/static/js/search.js

@@ -92,13 +92,23 @@ function clear_search_cache() {
     cached_term = "";
 }
 
+function focus_search() {
+    $("#search").width("504px");
+    $("#search_arrows").addClass("input-append");
+    $('.search_button').show();
+}
+
 function initiate_search() {
     $('#search').val('').focus();
 }
 
 function clear_search() {
     $('table tr').removeHighlight();
-    $('#search').val('');
+    // Reset the width to that in the stylesheet. If you change it there, change
+    // it here.
+    $('#search').val('').width("610px");
+    $("#search_arrows").removeClass("input-append");
+    $('.search_button').hide();
     clear_search_cache();
 }
 

zephyr/static/styles/zephyr.css

@@ -364,16 +364,15 @@ input.send_message {
     visibility: visible;
     max-height: 30px;
     padding: 5px 10px;
+    width: 640px;
 }
 .always_in_view {
     background-color: aliceblue;
 }
 
-#search_arrows {
-    width: 95%;
-}
 #search {
-    width: 82%;
+    /* If this changes, also change the width in search.js:clear_search */
+    width: 610px;
 }
 
 .highlight {
@@ -381,6 +380,7 @@ input.send_message {
 }
 
 #searchbox .search_button {
+    display: none;
     margin-bottom: 10px;
     text-align: center;
     padding: 4px 10px 4px 10px;