Added icon to search prompt and improved JS that controls extra form.

static/cranefly/css/cranefly.css

@@ -872,6 +872,7 @@ footer .container .credits p{margin-bottom:0px;color:#555555;font-size:90%;}foot
 .navbar-header .navbar-inner{background:none;background-color:#f3f3f3;border-bottom:1px solid #dfdfdf;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.navbar-header .navbar-inner .container{background:url("../img/logo.png");background-position:left center;background-repeat:no-repeat;}
 .navbar-header .navbar-inner .brand{margin-left:6px;text-shadow:none;}.navbar-header .navbar-inner .brand:link,.navbar-header .navbar-inner .brand:active,.navbar-header .navbar-inner .brand:visited,.navbar-header .navbar-inner .brand:hover{color:#c24a3b;font-size:200%;}.navbar-header .navbar-inner .brand:link span,.navbar-header .navbar-inner .brand:active span,.navbar-header .navbar-inner .brand:visited span,.navbar-header .navbar-inner .brand:hover span{color:#c0c0c0;}
 .navbar-header .navbar-inner .navbar-search-form{height:30px;width:314px;margin-top:9px;overflow:visible;position:relative;}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border{background-color:#ffffff;border:1px solid #c5c5c5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:absolute;z-index:2;}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border .navbar-search-text{border:1px solid #c5c5c5;border-radius:3px;margin:-1px;padding:1px 0px;color:#333333;}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border .navbar-search-text>input{border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background:none;margin:0px;width:300px;}
+.navbar-header .navbar-inner .navbar-search-form .navbar-search-border .navbar-search-text .icon-search{float:right;opacity:0.5;filter:alpha(opacity=50);margin-bottom:-20px;margin-right:8px;position:relative;bottom:-6px;}
 .navbar-header .navbar-inner .navbar-search-form .navbar-search-border:hover,.navbar-header .navbar-inner .navbar-search-form .navbar-search-border.open{-webkit-box-shadow:0px 0px 3px rgba(85, 85, 85, 0.7);-moz-box-shadow:0px 0px 3px rgba(85, 85, 85, 0.7);box-shadow:0px 0px 3px rgba(85, 85, 85, 0.7);}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border:hover .navbar-search-text,.navbar-header .navbar-inner .navbar-search-form .navbar-search-border.open .navbar-search-text{border-color:#49c7fc;margin-bottom:0px;}
 .navbar-header .navbar-inner .navbar-search-form .navbar-search-border:hover .extra,.navbar-header .navbar-inner .navbar-search-form .navbar-search-border.open .extra{display:block;}
 .navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra{background:#ffffff;border-radius:3px;display:none;}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .extra-form{padding:0px 8px;}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .extra-form .control{margin:12px 0px;}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .extra-form .control label{color:#555555;font-weight:bold;}

static/cranefly/css/cranefly/navbar.less

@@ -57,6 +57,15 @@
             margin: 0px;
             width: @navbarSearchWidth;
           }
+
+          .icon-search {
+            float: right;
+            .opacity(50);
+            margin-bottom: (@baseLineHeight * -1);
+            margin-right: 8px;
+            position: relative;
+            bottom: (@baseLineHeight * -1) + @baseFontSize;
+          }
         }
 
         &:hover, &.open {

static/cranefly/js/cranefly.js

@@ -31,7 +31,7 @@ $(function () {
 
   // Search form extension
   var nav_search_form = $('#navbar-search');
-  $('#search-field').hover(function() {
+  nav_search_form.click(function() {
     nav_search_form.addClass('open');
   });
 

templates/cranefly/layout.html

@@ -18,6 +18,7 @@
                 {% elif search_thread is defined %}
                 <input type="hidden" name="search_thread" value="{{ search_thread.pk }}">
                 {% endif %}
+                <i class="icon-search"></i>
                 <input type="text" id="search-field" name="search_query" placeholder="{% trans %}Search...{% endtrans %}"{% if search_query is defined and search_query %} value="{{ search_query }}"{% endif %}>
               </div>
               <div class="extra">