From eb8b92d152058aa7cf88bb13e777825fab37f47b Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 13 Feb 2018 14:40:40 +0000
Subject: [PATCH] styling search result listing breadcrumbs

---
 .../search/includes/search_result.html        | 24 ++++++++++---------
 .../src/sass/public/components/_nav.scss      | 13 ++++++++++
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/opentech/public/search/templates/search/includes/search_result.html b/opentech/public/search/templates/search/includes/search_result.html
index 28962c3b0..94919ee81 100644
--- a/opentech/public/search/templates/search/includes/search_result.html
+++ b/opentech/public/search/templates/search/includes/search_result.html
@@ -1,19 +1,21 @@
 {% 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 #}
+    <h6 class="listing__path">
+        {% if result.get_ancestors|length > 2 %}
+            {% 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 #}
+            {% endfor %}
         {% endif %}
-    {% endfor %}
-{% endif %}
+    </h6>
 
 {% if result.listing_image %}
     <a href="{% pageurl result %}">
diff --git a/opentech/static_src/src/sass/public/components/_nav.scss b/opentech/static_src/src/sass/public/components/_nav.scss
index 703af0bf4..15df1f4b8 100644
--- a/opentech/static_src/src/sass/public/components/_nav.scss
+++ b/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;
                 }
-- 
GitLab