Adding front-end for elastic search

mdn · Mar 21, 2013 · 2761226 · 2761226
1 parent 56197d2
commit 2761226
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 23 deletions.
diff --git a/apps/search/templates/search/popular.html b/apps/search/templates/search/popular.html
@@ -0,0 +1,22 @@
+{#
+<div class="search-popular search-popular-col1">
+  <h2>Popular Searches</h2>
+  <ul>
+    <li><a href="?q=">Popular Search 1</a></li>
+    <li><a href="?q=">Popular Search 2</a></li>
+    <li><a href="?q=">Popular Search 3</a></li>
+    <li><a href="?q=">Popular Search 4</a></li>
+    <li><a href="?q=">Popular Search 5</a></li>
+  </ul>
+</div>
+<div class="search-popular">
+  <h2>Popular Topics</h2>
+  <ul>
+    <li><a href="?q=">Popular Topic 1</a></li>
+    <li><a href="?q=">Popular Topic 2</a></li>
+    <li><a href="?q=">Popular Topic 3</a></li>
+    <li><a href="?q=">Popular Topic 4</a></li>
+    <li><a href="?q=">Popular Topic 5</a></li>
+  </ul>
+</div>
+#}
diff --git a/apps/search/templates/search/results.html b/apps/search/templates/search/results.html
@@ -5,7 +5,10 @@
 
 {% macro doc_block(doc) -%}
   <li class="doc-result">
-  {{ doc.title }}
+    {% set url = '%s%s' % (settings.SITE_URL, url('wiki.document', doc.slug, locale=doc.locale)) %}
+    <h3><a href="{{ url }}">{{ doc.title }}</a></h3>
+    <div class="searchMeta"><a href="{{ url }}">{{ url }}</a></div>
+    <p><!-- match content here --></p>
   </li>
 {% endmacro %}
 
@@ -15,24 +18,58 @@
     <div id="content-main" class="full">
 <article id="search-results" class="main">
   <div class="search-results">
+
+    <h1>Search</h1>
+    <div class="search-form">
+      <form action="" method="get">
+        <input name="q" id="search-q" type="search" value="{{ search_query }}" autofocus />
+        <button type="submit" id="search-submit">Search!</button>
+      </form>
+    </div>
+
+    {% if search_query: %}
+      {% if result_count: %}
+        <h2>Search Results For "{{ search_query }}"</h2>
+        <ul>
+        {% for doc in results %}
+          {{ doc_block(doc) }}
+        {% endfor %}
+        </ul>
 
-    <ul>
-    {% for doc in results %}
-      {{ doc_block(doc) }}
-    {% endfor %}
-    </ul>
-{#
-    {% for doc in results %}
-      <div class="result {{ doc.type }}">
-        <a class="title" href="{{ doc.url|urlparams(s=q,as='s') }}">{{ doc.title }}</a>
-        <p>
-          <a href="{{ doc.url|urlparams(s=q,as='s') }}">
-            {{ doc.search_summary|safe }}
+        <div class="pager">
+        {% if next_page %}
+          <a class="button" href="{{ request.get_full_path()|urlparams(page=next_page) }}">
+          {{ _('Next Page') }}
           </a>
-        </p>
-      </div>
-    {% endfor %}
-#}
+        {% endif %}
+        {% if prev_page %}
+          <a class="button" href="{{ request.get_full_path()|urlparams(page=prev_page) }}">
+          {{ _('Previous Page') }}
+          </a>
+        {% endif %}
+        </div>
+      {% else %}
+        <h2>{{ _('Ooops!') }}</h2>
+        <p>{{ _('No documents relating to your search could be found.') }}</p>
+        {% include 'search/popular.html' %}
+      {% endif %}
+    {% else %}
+      {% include 'search/popular.html' %}
+    {% endif %}
+
+    <style type="text/css">
+    .doc-result { padding-bottom: 20px; }
+    .doc-result h3 { margin-bottom: 0; }
+    .doc-result .searchMeta { color: #999; font-size: 0.8em; padding: .2em 0; }
+    .doc-result p { padding-left: 0; margin-bottom: 0; font-size: 0.9em; }
+    .search-form  { margin-bottom: 30px; }
+    #search-q     { width: 80%; }
+    #search-submit { display: inline-block; }
+    .search-popular { width: 49%; float: left; margin-top: 20px; }
+    .search-popular ul { list-style-type: circle; padding-left: 30px; }
+    .search-popular ul li { padding-bottom: 10px; }
+    .search-popular-col1{ margin-right: 1%; }
+    </style>
 
   </div>
 

diff --git a/apps/search/views.py b/apps/search/views.py
@@ -26,13 +26,27 @@ def search(request):
 
     """Performs search or displays the search form."""
     search_query = request.GET.get('q', None)
-    search = DocumentType.search()
-    if search_query:
-        search = search.query(or_={'title': search_query,
-                                   'content': search_query}
-                             )
+    page = int(request.GET.get('page', 1))
+
+    # Pagination
+    if page < 1:
+        page = 1
+    page_count = 10
+    start = page_count * (page - 1)
+    end = start + page_count
 
-    return jingo.render(request, 'search/results.html', {'results': search})
+    results = DocumentType.search()
+    if search_query:
+        results = results.query(or_={'title': search_query,
+                                   'content': search_query})
+    result_count = results.count()
+    results = results[start:end]
+
+    return jingo.render(request, 'search/results.html', {'results': results,
+            'search_query': search_query,
+            'result_count': result_count,
+            'prev_page': page - 1 if start > 0 else None,
+            'next_page': page + 1 if end < result_count else None})
 
 
 @cache_page(60 * 15)  # 15 minutes.

diff --git a/templates/base.html b/templates/base.html
@@ -140,7 +140,9 @@
           <noscript><button type="submit">{{ _('Search') }}</button></noscript>
         </p>
         <input type="hidden" name="sitesearch" value="developer.mozilla.org">
+        {% if not waffle.flag('elasticsearch') %}
         <div id="site-search-gg"></div>
+        {% endif %}
       </form>
 
       <a href="http://www.mozilla.org/" id="tabzilla">mozilla</a>