templates for search results

apps/search/templates/_package_result.html

@@ -1,11 +1,11 @@
 <div class="result package">
     <h3>
         <a href="{{ package.get_absolute_url }}">{{ package.full_name }}</a>
-        <span>by {{ package.author }}</span>
+        <span>by <a href="#">{{ package.author }}</a></span>
     </h3>
-    <p>{{ package.description }}</p>
-    <div class="actions">
-        
-        <a href="#">Source</a>
-    </div>
+    <p class="description">{{ package.description }}</p>
+    <ul class="UI_Actions">
+        <li class="UI_Edit_Version"><a href="#">Source</a></li>
+        <li class="UI_Try_in_Browser XPI_Test"><a href="#">Test</a></li>
+    </ul>
 </div>

apps/search/templates/_search_form.html

@@ -1,8 +1,13 @@
-<form id="Search" method="get" action="{% url search_results %}">
-    <fieldset>
-        <label>
-            <span>Search for</span>
-            <input type="search" name="q" placeholder="Search term" value="{{ q }}"/>
-        </label>
-    </fieldset>
-</form>
+<div id="search-bar">
+    <div class="UI_middleWrapper">
+        <form id="Search" method="get" action="{% url search_results %}">
+            <fieldset>
+                <label>
+                    <span>Search for</span>
+                    <input type="search" name="q" placeholder="Search term" value="{{ q }}"/>
+                </label>
+            </fieldset>
+            <button type="submit">Search</button>
+        </form>
+    </div>
+</div>

apps/search/templates/results.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
-{% block head %}%
-<link rel="stylesheet" type="text/css" href="/media/search/css/Search.css" />
+
+{% block head %}
+	<link rel="stylesheet" href="/media/jetpack/css/UI.Browser.css" type="text/css" />
+	<link rel="stylesheet" type="text/css" href="/media/search/css/Search.css" />
 {% endblock %}
 {% block app_body %}
     {% include "_search_form.html" %}
@@ -9,16 +11,18 @@
     {% include "search_filter.html" %}
 {% endblock %}
 {% block app_content %}
-<h2 class="UI_Heading">Addon Results</h2>
-{% for package in results %}
-    {% ifequal package.type 'a' %}
-        {% include "_package_result.html" %}  
-    {% endifequal %}
-{% endfor %}
-<h2 class="UI_Heading">Library Results</h2>
-{% for package in results %}
-    {% ifequal package.type 'l' %}
-        {% include "_package_result.html" %}
-    {% endifequal %}
-{% endfor %}
+	<section id="SearchResults">
+	{% if addons %}
+		<h2 class="UI_Heading">Addon Results ({{ addons.count }})</h2>
+		{% for package in addons %}
+			{% include "_package_result.html" %}  
+		{% endfor %}
+	{% endif %}
+	{% if libraries %}
+		<h2 class="UI_Heading">Library Results ({{ libraries.count }})</h2>
+		{% for package in libraries %}
+			{% include "_package_result.html" %}
+		{% endfor %}
+	{% endif %}
+	</section>
 {% endblock %}

apps/search/templates/search_filter.html

@@ -1,10 +1,25 @@
 <h2 class="UI_Heading">Narrow Search</h2>
 <ul class="UI_Action_List">
-    <li>Combined</li>
-    <li>Addons</li>
-    <li>Libraries</li>
+    <li>
+        <a href="#">Combined</a>
+        <strong>({{ addons.count|add:libraries.count }})</strong>
+    </li>
+    <li>
+        <a href="#">Addons</a>
+        <strong>({{ addons.count }})</strong>
+    </li>
+    <li>
+        <a href="#">Libraries</a>
+        <strong>({{ libraries.count }})</strong>
+    </li>
 </ul>
 <ul class="UI_Action_List">
-    <li>By Everyone</li>
-    <li>By Me</li>
+    <li>
+        <a href="#">By Everyone</a>
+        <strong>(0)</strong>
+    </li>
+    <li>
+        <a href="#">By Me</a>
+        <strong>(0)</strong>
+    </li>
 </ul>

apps/search/views.py

@@ -1,16 +1,21 @@
 from django.shortcuts import render_to_response
 from django.template import RequestContext
+from django.db.models import Q
 
 from jetpack.models import Package
 
 def results(r):
-    search_term = r.GET.get('q')
-    results = []
+    search_term = r.GET.get('q', '')
+    addons = []
+    libraries = []
     if search_term:
-        results = Package.objects.filter(name__icontains=search_term)
+        results = Package.objects.filter(Q(name__icontains=search_term) | Q(description__icontains=search_term))
+        addons = results.filter(type='a')
+        libraries = results.filter(type='l')
 
 
     return render_to_response('results.html', {
-        'results': results,
+        'addons': addons,
+        'libraries': libraries,
         'q': search_term,
     }, context_instance=RequestContext(r))

media/search/css/Search.css

@@ -1,15 +1,111 @@
-#Search {
-    padding:5px;
+body {
+    background:none;
 }
+
+#app-body {
+    margin-top:0;
+}
+
+#search-bar {
+    background: -moz-linear-gradient(270deg, #FFFFFE, #F3F5F7) repeat scroll 0 0 transparent;
+    border-bottom:1px solid #fff;
+    box-shadow:0 1px 0 #D0D5DB;
+    margin-left:-245px; /* wtf? :( */
+    margin-bottom:20px;
+}
+#Search {
+    overflow:hidden;
+    padding:5px 5px 5px 200px;
+}
+    
+    #Search fieldset {
+        float:left;
+        width:90%;
+    }
     #Search input { 
         display:block; 
         border:1px solid #ccc; 
-        width:60%;
+        width:83%;
         height:20px;
+        padding:3px;
     }
+    
+        #Search input:hover {
+            border-color:#aaa;
+        }
+        
+        #Search input:focus {
+            border-color:#000;
+        }
+        
+        #Search input:-moz-placeholder {
+            color:#bbb;
+        }
 
     #Search label span {
         float:left;
         display:block;
-        padding:5px;
+        padding:6px 15px 6px 5px;
     }
+    
+    #Search button {
+        background:-moz-linear-gradient(270deg, #EBEFF2, #D4D9DF);
+        border:1px solid #fff;
+        border-radius:5px;
+        box-shadow:0 0 1px #000;
+        cursor:pointer;
+        font-weight:bold;
+        padding:3px 8px;
+        text-shadow:0 1px 0 #fff;
+    }
+        
+        #Search button:hover {
+            background:#EBEFF2;
+        }
+        
+        #Search button:active {
+            background:-moz-linear-gradient(90deg, #EBEFF2, #D4D9DF);
+        }
+
+#SearchResults {}
+    
+    #SearchResults .result + h2 {
+        margin-top:20px;
+    }
+    
+    #SearchResults .result {
+        border-bottom:1px solid #ccc;
+        overflow:hidden;
+        padding:10px 120px 10px 0;
+        position:relative;
+    }
+        
+        #SearchResults .result:hover {
+            background-color:#F2F7FD;
+        }
+    
+    #SearchResults .package h3 > a {
+        color:#478CDE;
+        font-size:12pt;
+    }
+    
+    #SearchResults .package h3 span {
+        color:#999;
+    }
+    
+    #SearchResults .package .description {
+        color:#7B7B7B;
+    }
+    
+    #SearchResults .package .UI_Actions {
+        float:none;
+        font-size:0.8em;
+        position:absolute;
+        top:0px;
+        right:0px;
+        opacity:0.5;
+    }
+    
+        #SearchResults .package:hover .UI_Actions {
+            opacity:1;
+        }