Merge pull request #103 from OpenTechFund/feature/162-search-results

Feature/162 search results

opentech/public/search/templates/search/includes/search_result.html

 {% load static wagtailcore_tags wagtailsearchpromotions_tags wagtailimages_tags %}
 
-{# breadcrumbs #}
-{% if result.get_ancestors|length > 2 %}
-    {% for ancestor in result.get_ancestors %}
-        {% if not ancestor.is_root %}
-            {% if ancestor.depth > 2 %}
-                {{ ancestor.title }}
-                {% if ancestor.depth|add:1 < result.depth %}
-                    &nbsp;/&nbsp;
+<a class="listing" href="{% pageurl result %}">
+    {# breadcrumbs #}
+    {% if result.get_ancestors|length > 2 %}
+        <h6 class="listing__path">
+            {% for ancestor in result.get_ancestors %}
+                {% if not ancestor.is_root %}
+                    {% if ancestor.depth > 2 %}
+                        <span>{{ ancestor.title }}</span>
+                        {% if ancestor.depth|add:1 < result.depth %}
+                            <span class="nav__item--breadcrumb"></span>
+                        {% endif %}
+                    {% else %}<span class="nav__item--breadcrumb"></span>{% endif %} {# the first one #}
                 {% endif %}
-            {% else %}/{% endif %} {# the first one #}
-        {% endif %}
-    {% endfor %}
-{% endif %}
+            {% endfor %}
+        </h6>
+    {% endif %}
 
-{% if result.listing_image %}
-    <a href="{% pageurl result %}">
-        {% image result.listing_image fill-450x300 %}
-    </a>
-{% endif %}
-
-<h4>
-    <a href="{% pageurl result %}">
-        {{ result.listing_title|default:result.title }}
-    </a>
-</h4>
-
-{% if pick.description or result.listing_summary or result.search_description %}
-    <p>{{ pick.description|default:result.listing_summary|default:result.search_description }}</p>
-{% endif %}
+    {% if result.listing_image or result.icon %}
+        {% image result.listing_image|default:result.icon fill-180x180 class="listing__image" %}
+    {% else %}
+        <div class="listing__image listing__image--default">
+            <svg><use xlink:href="#logo-mobile-no-text"></use></svg>
+        </div>
+    {% endif %}
 
+    <h4 class="listing__title">{{ result.listing_title|default:result.title }}</h4>
 
+    {% if pick.description or result.listing_summary or result.search_description or result.listing_summary or result.introduction  %}
+        <h6 class="listing__teaser">{{ pick.description|default:result.listing_summary|default:result.search_description|default:result.listing_summary|default:result.introduction|truncatechars_html:155 }}</h6>
+    {% endif %}
+</a>

opentech/public/search/templates/search/search.html

 {% extends "base.html" %}
 {% load static wagtailcore_tags wagtailsearchpromotions_tags %}
-
-{% block body_class %}template-searchresults{% endblock %}
-
+{% block body_class %}template-searchresults light-grey-bg{% endblock %}
+{% block page_title %}Search results{% endblock %}
 {% block title %}{% if search_query %}Search results for “{{ search_query }}”{% else %}Search{% endif %}{% endblock %}
-
 {% block content %}
-
-    <h1>{% if search_query %}Search results for &ldquo;{{ search_query }}&rdquo;{% else %}Search{% endif %}</h1>
-
-    <form action="{% url 'search' %}" method="get" role="search">
-        <input type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>
-        <input type="submit" value="Search">
-    </form>
-
-    {% get_search_promotions search_query as search_picks %}
-    {% if search_picks %}
-         <ul>
-            {% for pick in search_picks %}
-                <li>
+    <div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+        <h2 class="heading heading--no-margin">{% if search_query %}Search results for &ldquo;{{ search_query }}&rdquo;{% else %}Search{% endif %}</h2>
+
+        {% if search_results %}
+            {% with count=search_results.paginator.count %}
+                <p>{{ count }} result{{ count|pluralize }} found.</p>
+            {% endwith %}
+        {% elif search_query and not search_picks %}
+            <p>No results found.</p>
+        {% endif %}
+
+        <form class="form" action="{% url 'search' %}" method="get" role="search" aria-label="Search form">
+            <input class="input input--bottom-space" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}"{% endif %} aria-label="Search input">
+            <input class="link link--button" type="submit" value="Search" aria-label="search">
+        </form>
+
+        {% get_search_promotions search_query as search_picks %}
+        {% if search_picks %}
+            <div class="wrapper wrapper--listings">
+                {% for pick in search_picks %}
                     {% include "search/includes/search_result.html" with result=pick.page.specific %}
-                </li>
-             {% endfor %}
-         </ul>
-    {% endif %}
+                {% endfor %}
+            </div>
+        {% endif %}
 
-    {% if search_results %}
-
-        {% with count=search_results.paginator.count %}
-            {{ count }} result{{ count|pluralize }} found.
-        {% endwith %}
-
-        <ul>
-            {% for result in search_results %}
-                <li>
+        {% if search_results %}
+            <div class="wrapper wrapper--listings">
+                {% for result in search_results %}
                     {% include "search/includes/search_result.html" with result=result.specific %}
-                </li>
-            {% endfor %}
-        </ul>
-
-        {% include "includes/pagination.html" with paginator_page=search_results %}
-
-    {% elif search_query and not search_picks %}
-        No results found.
-    {% endif %}
-
+                {% endfor %}
+            </div>
+            {% include "includes/pagination.html" with paginator_page=search_results %}
+        {% endif %}
+    </div>
 {% endblock %}

opentech/static_src/src/sass/public/base/_base.scss

@@ -69,7 +69,7 @@ ol {
 
 .is-visible,
 %is-visible {
-    z-index: 5;
+    z-index: 9;
     opacity: 1;
     transition: opacity, z-index, $transition;
 }

opentech/static_src/src/sass/public/components/_input.scss

@@ -4,4 +4,8 @@
         background: transparent;
         border: 0;
     }
+
+    &--bottom-space {
+        margin-bottom: 10px
+    }
 }

opentech/static_src/src/sass/public/components/_listing.scss

@@ -60,6 +60,7 @@
         }
     }
 
+    &__path,
     &__category {
         margin-bottom: 5px;
         color: $color--default;
@@ -77,4 +78,8 @@
             margin-left: 5px;
         }
     }
+
+    &__path {
+        display: flex;
+    }
 }

opentech/static_src/src/sass/public/components/_nav.scss

@@ -112,6 +112,10 @@
             font-weight: $weight--normal;
             border-bottom: 0;
 
+            .listing & {
+                margin-left: 10px;
+            }
+
             &::after {
                 width: 0;
                 height: 0;
@@ -120,9 +124,18 @@
                 border-bottom: 5px solid transparent;
                 border-left: 5px solid $color--white;
                 content: '';
+
+                .listing & {
+                    margin-left: 0;
+                    border-left: 5px solid $color--default;
+                }
             }
 
             &:first-child {
+                .listing & {
+                    margin-left: 0;
+                }
+
                 a {
                     margin-left: 0;
                 }