[SEARCH] Added "search tips" sliding panel at the search results page

* Added a second form with `query` input, to duplicate the query for easier correction/change
  at the results page

* Added a HTML partial with concrete, interactive examples of queries possible with Lucene,
  hidden by default

* Added a link and JavaScript code to toggle the sliding panel with search examples

* Added CSS styling for the new elements, added a "help.png" icon from the FamFamFam suite

app/helpers/searches_helper.rb

@@ -0,0 +1,7 @@
+module SearchesHelper
+
+  def link_to_example_search(query)
+    link_to query, search_url( :query => query, :anchor => 'tips' )
+  end
+
+end

app/views/searches/_search_tips.en.html.erb

@@ -0,0 +1,43 @@
+<div id="search-tips">
+<div>
+  <p>
+    When looking for gems, you can use a wide variety of search queries
+    in the <a href="http://lucene.apache.org/core/3_6_1/queryparsersyntax.html" class="external">Lucene syntax</a>.
+  </p>
+
+  <p>
+    Quite simply, you can search in gem names, summaries and descriptions with queries like
+    <code><%= link_to_example_search 'rack' %></code> or
+    <code><%= link_to_example_search 'imap' %></code>
+  </p>
+
+  <p>You can, of course, restrict the search to gem names only:</p>
+  <p><code><%= link_to_example_search 'name:rack' %></code></p>
+
+  <p>To broaden your search, you can use wildcards:</p>
+  <p>
+    <code><%= link_to_example_search 'name:ra*' %></code> or
+    <code><%= link_to_example_search 'web*' %></code>
+  </p>
+
+  <p>You can search for specific gem authors:</p>
+  <p><code><%= link_to_example_search 'author:john' %></code></p>
+
+  <p>Of course, you can combine these queries into complex ones:</p>
+  <p>
+    <code><%= link_to_example_search 'name:ra* AND author:john' %></code> or
+    <code><%= link_to_example_search 'name:ra* AND version:1*' %></code>
+  </p>
+
+  <p>To discover more gems, you can search by their depencies in runtime:</p>
+  <p><code><%= link_to_example_search 'depends:rack' %></code></p>
+  <p>or in development:</p>
+  <p><code><%= link_to_example_search 'uses:rack' %></code></p>
+
+  <p>Lastly, you can restrict your search to gems created or updated in certain timeframe:</p>
+  <p><code><%= link_to_example_search "name:rack AND updated_at:[#{Time.now.to_date.beginning_of_month.to_s(:db)} TO #{Time.now.to_date.end_of_month.to_s(:db)}]" %></code></p>
+
+  <p class="legend">The searchable fields are <em>name</em>, <em>summary</em>, <em>description</em>, <em>author</em>, <em>version</em>, <em>uses</em>, <em>depends</em>, <em>created_at</em>, <em>updated_at</em> and <em>downloads</em>.</p>
+
+</div>
+</div>

app/views/searches/show.html.erb

@@ -1,5 +1,13 @@
 <% @title = "search" %>
-<% @subtitle = t('.subtitle', :query => content_tag(:em, h(params[:query]))) if params[:query].present? %>
+
+<% @subtitle = t('.subtitle', :query => nil) if params[:query].present? %>
+<%= form_tag search_url, :id => "in-page-search", :method => :get do %>
+  <%= text_field_tag :query, params[:query] if params[:query].present? %>
+  <a href="#" id="search-tips-toggle" title="<%= t '.tips_tooltip' %>"><%= t '.tips' %></a>
+<% end %>
+
+<%= render :partial => 'search_tips' %>
+
 <% if @gems %>
   <% if @exact_match %>
     <p><%= t '.exact_match' %></p>

config/locales/en.yml

@@ -163,6 +163,8 @@ en:
     show:
       subtitle: "for %{query}"
       exact_match: Exact match
+      tips: Tips
+      tips_tooltip: "Show search tips"
 
   sessions:
     new:

public/javascripts/application.js

@@ -19,4 +19,17 @@ $(document).ready(function() {
     window.location.href = $(this).val();
   });
 
+  if (window.location.hash != '#tips') { $('#search-tips').hide(); }
+  $('#search-tips-toggle').click(function(e) {
+    e.preventDefault();
+    var o = $('#search-tips');
+    if ( o.is(':visible') ) {
+      o.hide('fast');
+      window.location.hash = '';
+    } else {
+      o.show('fast');
+      window.location.hash = '#tips';
+    }
+  });
+
 });

public/stylesheets/screen.css

@@ -1694,3 +1694,81 @@ h5#downloads {
   font-weight: bold;
   padding-left: 24px;
 }
+
+/* In page search */
+#in-page-search {
+  margin: 0 0 0 1em;
+  padding: 0;
+  display: inline-block;
+}
+
+#in-page-search input[type="text"] {
+  padding: 0.5em 0.5em 0.75em 0.5em;
+  border: 1px solid rgba(0,0,0,0.15);
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 0.5em;
+  width: 41em;
+  bottom: 0.2em;
+  position: relative;
+}
+
+#in-page-search input[type="text"]:focus {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+#search-tips-toggle {
+  color: #6b604a;
+  background: url('/images/help.png') 0 0px no-repeat;
+  padding: 4px 0 0 20px;
+  margin: 0 0 0 0.25em;
+  height: 20px;
+  display: inline-block;
+  bottom: 0.25em;
+  position: relative;
+}
+#search-tips-toggle:hover {
+  color: #300000;
+  text-decoration: underline;
+}
+
+#search-tips {
+  font-size: 80%;
+  background: rgba(255, 255, 255, 0.4);
+  border-top: 1px solid rgba(0,0,0,0.1);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  margin: 2em 0 0 0;
+  padding: 1.75em 0 1em 0;
+}
+
+#search-tips p {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
+#search-tips a.external {
+  text-decoration: underline;
+}
+
+#search-tips code {
+  color: #5E543E;
+  background: rgba(255, 255, 0, 0.4);
+  padding: 0.25em 0.75em 0.25em 0.75em;
+}
+#search-tips code:hover {
+ color: #fff;
+ background: rgba(0, 0, 0, 0.6);
+}
+
+#search-tips code a {
+  color: #5E543E;
+}
+#search-tips code:hover a {
+  color: #fff;
+}
+
+#search-tips .legend {
+  color: #85775b;
+  border-top: 1px solid rgba(0,0,0,0.05);
+  margin-top: 1.5em;
+  padding-top: 1em;
+}