Working on search

media/css/style.css

@@ -69,20 +69,7 @@ header.main div.inner form.search {
   position: relative;
   z-index: 50;
 }
-header.main div.inner form.search div.infield {
+header.main div.inner form.search input {
-  position: relative;
-}
-header.main div.inner form.search div.infield label {
-  color: #72979C;
-  cursor: text;
-  float: none;
-  font: normal 12px "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
-  left: 30px;
-  position: absolute;
-  top: 8px;
-  width: auto;
-}
-header.main div.inner form.search div.infield input {
   background: #17484f url("/static/images/search-icon.png") top left no-repeat;
   background: rgba(43, 82, 93, 0.5) url("/static/images/search-icon.png") 8px center no-repeat;
   border: 1px solid #3A5E67;
@@ -102,9 +89,15 @@ header.main div.inner form.search div.infield input {
   -moz-box-shadow: inset 0 1px 0px #1d4249;
   box-shadow: inset 0 1px 0px #1d4249;
 }
-header.main div.inner form.search div.infield input:focus {
+header.main div.inner form.search input:focus {
   border-color: #62D5E1;
 }
+header.main div.inner form.search input::-webkit-input-placeholder {
+  color: #72979C;
+}
+header.main div.inner form.search input:-moz-placeholder {
+  color: #72979C;
+}
 header.main div.inner nav.public {
   float: left;
 }
@@ -1129,9 +1122,26 @@ body.error div.rochester-made {
 body.search div.empty-snipts {
   margin-top: 20px;
 }
+body.search div.static-box {
+  border-left: 0;
+  margin-left: 0;
+  margin-right: 30px;
+  -webkit-border-top-left-radius: 0px;
+  -webkit-border-top-right-radius: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  -webkit-border-bottom-left-radius: 0px;
+  -moz-border-radius-topleft: 0px;
+  -moz-border-radius-topright: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -moz-border-radius-bottomleft: 0px;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 0px;
+}
 body.search div.static-box form {
   margin-bottom: 0;
 }
 body.search div.static-box form input.search-query {
-  width: 571px;
+  width: 570px;
 }

media/css/style.scss

@@ -128,35 +128,27 @@ header.main {
             position: relative;
             z-index: 50;
             
-            div.infield {
+            input {
-                position: relative;
+                background: #17484F url('/static/images/search-icon.png') top left no-repeat;
+                background: rgba(43, 82, 93, .5) url('/static/images/search-icon.png') 8px center no-repeat;
+                border: 1px solid #3A5E67;
+                color: #FFF;
+                font: normal 12px $Helvetica;
+                height: auto;
+                margin: 0;
+                padding: 7px 7px 7px 28px;
+                width: 154px;
+                @include border-radius(3px);
+                @include inset-box-shadow(0, 1px, 0px, #1D4249);
 
-                label {
+                &:focus {
-                    color: #72979C;
+                    border-color: #62D5E1;
-                    cursor: text;
-                    float: none;
-                    font: normal 12px $Helvetica;
-                    left: 30px;
-                    position: absolute;
-                    top: 8px;
-                    width: auto;
                 }
-                input {
+                &::-webkit-input-placeholder {
-                    background: #17484F url('/static/images/search-icon.png') top left no-repeat;
+                    color: #72979C;
-                    background: rgba(43, 82, 93, .5) url('/static/images/search-icon.png') 8px center no-repeat;
+                }
-                    border: 1px solid #3A5E67;
+                &:-moz-placeholder {
-                    color: #FFF;
+                    color: #72979C;
-                    font: normal 12px $Helvetica;
-                    height: auto;
-                    margin: 0;
-                    padding: 7px 7px 7px 28px;
-                    width: 154px;
-                    @include border-radius(3px);
-                    @include inset-box-shadow(0, 1px, 0px, #1D4249);
-
-                    &:focus {
-                        border-color: #62D5E1;
-                    }
                 }
             }
         }
@@ -1276,11 +1268,16 @@ body.search {
         margin-top: 20px;
     }
     div.static-box {
+        border-left: 0;
+        margin-left: 0;
+        margin-right: 30px;
+        @include multi-border-radius(0px, 4px, 4px, 0px);
+
         form {
             margin-bottom: 0;
 
             input.search-query {
-                width: 571px;
+                width: 570px;
             }
         }
     }

snipts/templates/snipts/snipt-edit-js-template.html

@@ -1,4 +1,6 @@
-{% load verbatim %}
+{% load verbatim snipt_tags %}
+
+{% get_lexers as 'lexers' %}
 
 {% verbatim %}
     <script id="edit" type="text/html">

snipts/templates/snipts/snipt-list.html

@@ -106,4 +106,4 @@
     <div class="hide slug">{{ snipt.slug }}</div>
     <div class="hide stylized">{{ snipt.stylized }}</div>
     <div class="hide tags-list">{{ snipt.tags_list }}</div>
-/article>
+</article>

snipts/templatetags/snipt_tags.py

@@ -2,13 +2,14 @@ from django import template
 
 from templatetag_sugar.register import tag
 from templatetag_sugar.parser import Variable, Constant
+from pygments.lexers import get_all_lexers
 
 from snipts.models import Favorite, Snipt
 
 import hashlib
 
-register = template.Library()
 
+register = template.Library()
 
 @tag(register, [Constant('as'), Variable()])
 def snipt_is_favorited_by_user(context, asvar):
@@ -41,6 +42,13 @@ def snipts_count_for_user(context):
 
     return snipts
 
+@tag(register, [Constant('as'), Variable()])
+def get_lexers(context, asvar):
+
+    context[asvar] = sorted(get_all_lexers())
+
+    return ''
+
 
 @register.filter
 def md5(string):

snipts/views.py

@@ -1,7 +1,6 @@
 from django.shortcuts import get_object_or_404, render_to_response
 from django.http import Http404, HttpResponseRedirect
 from django.contrib.auth.models import User
-from pygments.lexers import get_all_lexers
 from django.template import RequestContext
 from annoying.decorators import render_to
 from snipts.models import Favorite, Snipt
@@ -32,7 +31,6 @@ def list_public(request, tag_slug=None):
 
     context = {
         'has_snipts': True,
-        'lexers': sorted(get_all_lexers()),
         'public': True,
         'snipts': snipts,
         'tags': tags,
@@ -77,7 +75,6 @@ def list_user(request, username, tag_slug=None):
 
     context = {
         'has_snipts': True,
-        'lexers': sorted(get_all_lexers()),
         'public': public,
         'public_user': (public and user),
         'snipts': snipts,
@@ -121,7 +118,6 @@ def detail(request, username, snipt_slug):
     return {
         'detail': True,
         'has_snipts': True,
-        'lexers': sorted(get_all_lexers()),
         'public': public,
         'snipt': snipt,
         'tags': tags,

templates/base.html

@@ -38,7 +38,11 @@
 
     {% block inline-js %}
     <script type="text/javascript">{% block js %}window.user = '{{ request.user.username }}';
-        window.pub = {{ public|lower }};
+        {% if public %}
+            window.pub = {{ public|lower }};
+        {% else %}
+            window.pub = null;
+        {% endif %}
         window.api_key = '{{ request.user.api_key.key }}';{% endblock %}    </script>
     {% endblock %}
 
@@ -67,9 +71,8 @@
             <h1><a href="{% if request.user.is_authenticated %}/{{ request.user.username }}/{% else %}/{% endif %}">Snipt</a></h1> 
             <form class="search" action="/search/" method="get">
                 <fieldset>
-                    <div class="fields infield">
+                    <div class="fields">
-                        <label for="search-query">Search public snipts</label>
+                        <input type="text" id="search-query" name="q" value="{{ query }}" placeholder="Search snipts" />
-                        <input type="text" id="search-query" name="q" value="{{ query }}" />
                     </div>
                 </fieldset>
             </form>

templates/search/search.html

@@ -1,31 +1,44 @@
 {% extends "base.html" %}
 
-{% block page-title %}/ search {% if query %}/ {{ query }}{% endif %}{% endblock %}
+{% block page-title %}/ search {% if query %}/ “{{ query }}”{% endif %}{% endblock %}
 {% block html-class %}search{% endblock %}
 {% block body-class %}search static{% endblock %}
 
+{% block js %}
+        {{ block.super }}
+        window.detail = false;
+{% endblock %}
+
 {% block breadcrumb %}
     <li><a href="/search/">search</a></li>
     {% if query %}
-        <li><span class="prompt">/</span> <a href="/search?q={{ query|urlencode }}">{{ query }}</a></li>
+        <li><span class="prompt">/</span> <a href="/search?q={{ query|urlencode }}">&ldquo;{{ query }}&rdquo;</a></li>
     {% endif %}
 {% endblock %}
 
 {% block content %}
-    <div class="static-box">
+    <div class="static-box {% if page.object_list|length > 0 %}has-snipts{% endif %}">
         <form method="get" class="form-search" action=".">
-            <input type="text" class="search-query" name="q" value="{{ form.q.data }}" id="id_q">
+            <input type="text" class="search-query" name="q" value="{% if form.q.value %}{{ form.q.value }}{% endif %}" placeholder="Search snipts" id="id_q">
             <button type="submit" class="btn">Search</button>
         </form>
     </div>
     {% if query %}
+        {% if page.object_list|length > 0 %}
+            <section class="snipts" id="snipts">
+        {% endif %}
         {% for result in page.object_list %}
-            <a href="{{ result.object.get_absolute_url }}">{{ result.object.title }}</a><br />
+            {% with result.object as snipt %}
+                {% include "snipts/snipt-list.html" %}
+            {% endwith %}
         {% empty %}
             <div class="empty-snipts">
                 No snipts found for &ldquo;{{ query }}&rdquo;.
             </div>
         {% endfor %}
+        {% if page.object_list|length > 0 %}
+            </section>
+        {% endif %}
         {% if page.has_previous or page.has_next %}
             <div class="pagination">
                 <ul>
@@ -50,7 +63,5 @@
                 </ul>
             </div>
         {% endif %}
-    {% else %}
-        {# Show some example queries to run, maybe query syntax, something else? #}
     {% endif %}
 {% endblock %}

urls.py

@@ -1,8 +1,12 @@
 from django.views.generic.simple import direct_to_template
 from registration.forms import RegistrationFormUniqueEmail
+from haystack.views import SearchView, search_view_factory
 from django.http import HttpResponseRedirect
+from haystack.forms import ModelSearchForm
+from haystack.query import SearchQuerySet
 from django.conf.urls.defaults import *
 from django.contrib import admin
+from django.db.models import Q
 from tastypie.api import Api
 from snipts.api import *
 
@@ -22,6 +26,8 @@ private_api.register(PrivateTagResource())
 private_api.register(PrivateUserResource())
 private_api.register(PrivateFavoriteResource())
 
+sqs = SearchQuerySet().filter(Q(public=True))
+
 urlpatterns = patterns('',
 
     url(r'^admin/', include(admin.site.urls)),
@@ -36,7 +42,11 @@ urlpatterns = patterns('',
     url(r'^api/', include(public_api.urls)),
     url(r'^api/', include(private_api.urls)),
 
-    url(r'^search/', include('haystack.urls')),
+    url(r'^search/$', search_view_factory(
+        view_class=SearchView,
+        searchqueryset=sqs,
+        form_class=ModelSearchForm,
+    ), name='haystack_search'),
 
     url(r'^register/$', lambda x: HttpResponseRedirect('/signup/')),
     url(r'^signup/$',