Merge pull request #870 from okfn/870-search-snippets

Better search snippets
ckan · Jun 25, 2013 · 3dedaa5 · 3dedaa5
2 parents 503c2ab + 56933c4
commit 3dedaa5
Show file tree

Hide file tree

Showing 13 changed files with 258 additions and 290 deletions.
diff --git a/ckan/public/base/less/ckan.less b/ckan/public/base/less/ckan.less
@@ -6,6 +6,7 @@
 @import "nav.less";
 @import "forms.less";
 @import "dataset.less";
+@import "search.less";
 @import "group.less";
 @import "toolbar.less";
 @import "prose.less";

diff --git a/ckan/public/base/less/dataset.less b/ckan/public/base/less/dataset.less
@@ -53,152 +53,6 @@
   top: 0;
 }
 
-.results {
-  margin-bottom: 20px;
-  padding-bottom: 25px;
-  border-bottom: 1px dotted @genericBorderColor;
-}
-
-.results strong,
-.is-search-title {
-  display: block;
-  font-size: 24px;
-  line-height: 1.3;
-  color: @layoutBoldColor;
-  margin-bottom: 10px;
-}
-
-.is-search-title {
-  margin-bottom: 20px;
-}
-
-// Use a before block to space out the area occupied by the sort select box
-// this allows the text content in the strong tag to flow correctly around
-// the input.
-.results strong:before,
-.is-search-title:before {
-  float: right;
-  content: " ";
-  width: 280px;
-  white-space: pre;
-}
-
-.filter-list {
-  color: @layoutTextColor;
-  line-height: 32px;
-  .pill {
-    line-height: 21px;
-  }
-}
-
-.filter-list .extra {
-  margin-top: 10px;
-  font-size: 18px;
-  font-weight: normal;
-  color: @layoutBoldColor;
-}
-
-.dataset-search {
-  position: relative;
-}
-
-.search-giant,
-.search-normal {
-  position: relative;
-}
-
-.search-normal {
-  display: block;
-  margin-bottom: 0;
-}
-
-.search-giant input {
-  .box-sizing(border-box);
-  font-size: 16px;
-  padding: 14px 10px;
-  width: 100%;
-  height: auto;
-}
-
-.search-normal input {
-  .box-sizing(border-box);
-  width: 100%;
-  height: auto;
-}
-
-.search-normal button {
-  cursor: pointer;
-  position: absolute;
-  right: 5px;
-  top: 50%;
-  background: transparent;
-  border: none;
-  color: #999;
-  margin-top: -17px;
-  span {
-    display: none;
-  }
-  &:hover {
-    color: #000;
-  }
-}
-
-.search-giant button {
-  cursor: pointer;
-  position: absolute;
-  right: 15px;
-  top: 50%;
-  display: block;
-  border: none;
-  padding: 0;
-  margin-top: -17px;
-  width: 30px;
-  height: 30px;
-  background: transparent url("@{imagePath}/icon-search-27x26.png") no-repeat center center;
-  text-indent: -900em;
-}
-
-.control-order-by {
-  position: absolute;
-  bottom: -73px;
-  right: 0;
-}
-
-.control-order-by label,
-.control-order-by select {
-  display: inline;
-}
-
-.control-order-by select {
-  width: 160px;
-}
-
-.search-aside {
-  .control-order-by {
-    clear: both;
-    overflow: hidden;
-    display: block;
-    position: relative;
-    bottom: 0;
-    label {
-      float: left;
-      font-weight: normal;
-      font-size: 12px;
-      line-height: 20px;
-    }
-    select {
-      float: left;
-      padding: 2px 4px;
-      margin: 0;
-      width: inherit;
-      font-size: 12px;
-      height: 20px;
-      line-height: 20px;
-      width: 120px;
-    }
-  }
-}
-
 // Resource List
 
 .resource-list {

diff --git a/ckan/public/base/less/homepage.less b/ckan/public/base/less/homepage.less
@@ -6,8 +6,11 @@
     position: relative;
     padding-bottom: 0;
   }
-  .search-giant input {
-    border-color: darken(@mastheadBackgroundColorEnd, 5);
+  .search-giant {
+    margin-bottom: 10px;
+    input {
+      border-color: darken(@mastheadBackgroundColorEnd, 5);
+    }
   }
   .page-heading {
     font-size: 18px;
@@ -21,9 +24,12 @@
     .module-content {
       .border-radius(3px 3px 0 0);
       background-color: @mastheadBackgroundColor;
+      border-bottom: none;
       .heading {
         margin-top: 0;
         margin-bottom: 7px;
+        font-size: 24px;
+        line-height: 40px;
       }
     }
   }

diff --git a/ckan/public/base/less/search.less b/ckan/public/base/less/search.less
@@ -0,0 +1,108 @@
+.search-form {
+  // .clearfix;
+  margin-bottom: 20px;
+  padding-bottom: 25px;
+  border-bottom: 1px dotted @genericBorderColor;
+
+  // Normal search box
+  .search-input {
+    position: relative;
+    margin-bottom: 20px;
+  	input {
+      .box-sizing(border-box);
+      margin: 0;
+      width: 100%;
+      height: auto;
+    }
+    button {
+      cursor: pointer;
+      display: block;
+      position: absolute;
+      top: 50%;
+      margin-top: -10px;
+      right: 10px;
+      height: 20px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      span {
+        display: none;
+      }
+      i {
+        color: @inputBorder;
+        .transition(color 0.2s ease-in);
+      }
+      &:hover i {
+        color: @inputColor;
+      }
+    }
+    &.search-giant {
+      input {
+        font-size: 16px;
+        padding: 15px;
+      }
+      button {
+        margin-top: -15px;
+        right: 15px;
+        height: 30px;
+        i {
+          font-size: 28px;
+          width: 28px;
+        }
+      }
+    }
+  }
+  .control-order-by {
+    float: right;
+    margin: 0 0 0 15px;
+    label,
+    select {
+      display: inline;
+    }
+    select {
+      width: 160px;
+      margin: 0;
+    }
+  }
+  h2 {
+    font-size: 24px;
+    line-height: 1.3;
+    color: @layoutBoldColor;
+    margin-bottom: 0;
+  }
+  .filter-list {
+    color: @layoutTextColor;
+    line-height: 32px;
+    margin: 10px 0 0 0;
+    .pill {
+      line-height: 21px;
+    }
+    .extra {
+      margin-top: 10px;
+      font-size: 18px;
+      font-weight: normal;
+      color: @layoutBoldColor;
+    }
+  }
+}
+
+.tertiary {
+  .control-order-by {
+    float: none;
+    margin: 0;
+    label {
+      display: block;
+      margin-bottom: 5px;
+      font-weight: normal;
+      font-size: 12px;
+    }
+    select {
+      display: block;
+      font-size: 12px;
+      width: 100%;
+    }
+  }
+  .search-input {
+    margin-bottom: 10px;
+  }
+}
diff --git a/ckan/templates/group/index.html b/ckan/templates/group/index.html
@@ -17,13 +17,8 @@
     <div class="module-content">
       <h1 class="hide-heading">{{ _('Groups') }}</h1>
       {% block groups_search_form %}
-      {% snippet 'snippets/simple_search.html', q=c.q, sort=c.sort_by_selected, placeholder=_('Search groups...') %}
+        {% snippet 'snippets/search_form.html', type='group', query=c.q, sorting_selected=c.sort_by_selected, count=c.page.item_count, placeholder=_('Search groups...'), show_empty=request.params %}
       {% endblock %}
-      <h2 class="is-search-title">
-        {% block groups_search_result_text %}
-        {% snippet 'snippets/search_result_text.html', query=c.q, count=c.page.item_count, type='group' %}
-        {% endblock %}
-      </h2>
       {% block groups_list %}
       {% if c.page.items or request.params %}
         {% snippet "group/snippets/group_list.html", groups=c.page.items %}

diff --git a/ckan/templates/group/read.html b/ckan/templates/group/read.html
@@ -4,8 +4,20 @@
 
 {% block primary_content_inner %}
   <div class="module-content">
+    {% block groups_search_form %}
+      {% set facets = {
+        'fields': c.fields_grouped,
+        'search': c.search_facets,
+        'titles': c.facet_titles,
+        'translated_fields': c.translated_fields,
+        'remove_field': c.remove_field }
+      %}
+      {% snippet 'snippets/search_form.html', type='dataset', query=c.q, sorting_selected=c.sort_by_selected, count=c.page.item_count, facets=facets, placeholder=_('Search datasets...'), show_empty=request.params %}
+    {% endblock %}
     {% block packages_list %}
-    {% include "package/snippets/search_form.html" %}
+      {% if c.page.items %}
+        {{ h.snippet('snippets/package_list.html', packages=c.page.items) }}
+      {% endif %}
     {% endblock %}
   </div>
   {% block page_pagination %}

diff --git a/ckan/templates/home/index.html b/ckan/templates/home/index.html
@@ -57,12 +57,15 @@ <h2 class="media-heading">{% block home_image_caption %}{{ _("This is a featured
       {% block home_secondary_content %}
           <div class="module module-shallow module-narrow module-dark info box">
             {% block home_search %}
-              <form class="dataset-search module-content clearfix" method="get" action="{% url_for controller='package', action='search' %}">
+              <form class="module-content search-form" method="get" action="{% url_for controller='package', action='search' %}">
                 <h3 class="heading">{{ _("Search Your Data") }}</h3>
-                <span class="control-group search-giant">
+                <div class="search-input control-group search-giant">
                   <input type="text" class="search" name="q" value="{{ c.q }}" autocomplete="off" placeholder="{{ _('eg. Gold Prices') }}" />
-                  <button type="submit" value="{{ _('Search') }}">Submit</button>
-                </span>
+                  <button type="submit">
+                    <i class="icon-search"></i>
+                    <span>{{ _('Search') }}</span>
+                  </button>
+                </div>
               </form>
             {% endblock %}
             {% block home_tags %}

diff --git a/ckan/templates/organization/bulk_process.html b/ckan/templates/organization/bulk_process.html
@@ -90,7 +90,17 @@ <h3 class="dataset-heading">
     </div>
     <aside class="tertiary">
       {% block tertiary_content %}
-      {% snippet 'snippets/simple_search.html', q=c.q, sort=c.sort_by_selected, placeholder=_('Search datasets...'), extra_sort=[(_('Last Modified'), 'data_modified asc')], input_class='search-normal', form_class='search-aside' %}
+
+      {% block search_form %}
+        {% set sorting = [
+          (_('Name Ascending'), 'title_string asc'),
+          (_('Name Descending'), 'title_string desc'),
+          (_('Last Modified'), 'data_modified desc') ]
+        %}
+        {% snippet 'snippets/search_form.html', type='dataset', query=c.q, sorting=sorting, sorting_selected=c.sort_by_selected, no_title=true, search_class=' ' %}
+      {% endblock %}
+
+      {#{% snippet 'snippets/simple_search.html', q=c.q, sort=c.sort_by_selected, placeholder=_('Search datasets...'), extra_sort=[(_('Last Modified'), 'data_modified asc')], input_class='search-normal', form_class='search-aside' %}#}
       {% for facet in c.facet_titles %}
         {{ h.snippet('snippets/facet_list.html', title=c.facet_titles[facet], name=facet, extras={'id':c.group_dict.id}) }}
       {% endfor %}

diff --git a/ckan/templates/organization/index.html b/ckan/templates/organization/index.html
@@ -17,13 +17,8 @@
     <div class="module-content">
       <h1 class="hide-heading">{% block page_heading %}{{ _('Organizations') }}{% endblock %}</h1>
       {% block organizations_search_form %}
-      {% snippet 'snippets/simple_search.html', q=c.q, sort=c.sort_by_selected, placeholder=_('Search organizations...') %}
+        {% snippet 'snippets/search_form.html', type='organization', query=c.q, sorting_selected=c.sort_by_selected, count=c.page.item_count, placeholder=_('Search organizations...'), show_empty=request.params %}
       {% endblock %}
-      <h2 class="is-search-title">
-        {% block organizations_search_result_text %}
-        {% snippet 'snippets/search_result_text.html', query=c.q, count=c.page.item_count, type='organization' %}
-        {% endblock %}
-      </h2>
       {% block organizations_list %}
       {% if c.page.items or request.params %}
         {% snippet "organization/snippets/organization_list.html", organizations=c.page.items %}