Add breadcrumbs and use them throughout the site. Also fix test.

apps/forums/templates/forums.html

@@ -1,6 +1,7 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
 {% extends "common/base.html" %}
 {% set title = _('Forums') %}
+{% set crumbs = [(None, title)] %}
 
 {% block content %}
   {% if forums %}

apps/forums/templates/posts.html

@@ -1,6 +1,9 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
 {% extends "common/base.html" %}
-{% set title = _('Viewing Thread') %}
+{% set title = _('Thread {t}')|f(t=thread.title) %}
+{% set crumbs = [(url('forums.forums'), _('Forums')),
+                 (url('forums.threads', forum.slug), forum.name),
+                 (None, thread.title)] %}
 
 {% block content %}
   <h2>{{ thread.title }}</h2>

apps/forums/templates/threads.html

@@ -1,10 +1,11 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
 {% extends "common/base.html" %}
-{% set title = _('Viewing Forum') %}
+{% set title = _('Viewing Forum {f}')|f(f=forum.name) %}
+{% set crumbs = [(url('forums.forums'), _('Forums')), (None, forum.name)] %}
 
 {% block content %}
   <h2>{{ forum.name }}</h2>
-  
+ 
   {% if threads %}
     <ul>
       {% for thread in threads %}

apps/search/templates/down.html

@@ -1,6 +1,7 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
 {% extends "common/base.html" %}
 {% set title = _('Search') %}
+{% set crumbs = [(None, title)] %}
 
 {% block content %}
 <h2>{{ _('Search Unavailable') }}</h2>

apps/search/templates/form.html

@@ -1,6 +1,7 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
 {% extends "common/base.html" %}
 {% set title = _('Search') %}
+{% set crumbs = [(None, title)] %}
 {% if advanced != '0' %}
 {% set classes = 'advanced_search' %}
 {% endif %}

apps/search/templates/results.html

@@ -1,6 +1,7 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
 {% extends "common/base.html" %}
 {% set title = _('Search') %}
+{% set crumbs = [(None, title)] %}
 {% set styles = ('search',) %}
 
 {% block content %}

apps/sumo/helpers.py

@@ -5,6 +5,7 @@ from django.utils.encoding import smart_unicode
 
 import jinja2
 from jingo import register, env
+from tower import ugettext_lazy as _lazy
 
 from sumo.urlresolvers import reverse
 from sumo.utils import urlencode
@@ -98,3 +99,28 @@ def fe(str, *args, **kwargs):
         kwargs[k] = jinja2.escape(smart_unicode(kwargs[k]))
 
     return jinja2.Markup(str.format(*args, **kwargs))
+
+
+@register.function
+@jinja2.contextfunction
+def breadcrumbs(context, items=list(), add_default=True):
+    """
+    show a list of breadcrumbs. If url is None, it won't be a link.
+    Accepts: [(url, label)]
+    """
+    if add_default:
+        crumbs = [('/' + context['request'].locale + '/kb',
+                   _lazy('Firefox Support'))]
+    else:
+        crumbs = []
+
+    # add user-defined breadcrumbs
+    if items:
+        try:
+            crumbs += items
+        except TypeError:
+            crumbs.append(items)
+
+    c = {'breadcrumbs': crumbs}
+    t = env.get_template('layout/breadcrumbs.html').render(**c)
+    return jinja2.Markup(t)

apps/sumo/tests/test_templates.py

@@ -19,5 +19,5 @@ def test_breadcrumb():
     response = c.get(reverse('search'))
 
     doc = pyquery.PyQuery(response.content)
-    href = doc('#breadcrumbs a')[0]
+    href = doc('.breadcrumbs a')[0]
     eq_('/', href.attrib['href'][0])

media/css/ie.css

@@ -0,0 +1,12 @@
+/* IE stylesheet */
+.breadcrumbs li {
+    background-image: url(../img/crumb.gif);
+    background-repeat: no-repeat;
+    background-position: 0 50%;
+    padding: 0 0px 0 10px;
+}
+
+.breadcrumbs li {
+    background-image: expression(this.previousSibling==null?'none':'default');
+}
+

media/css/main.css

@@ -315,36 +315,38 @@ a {
     Breadcrumbs
 ----------------------------------*/
 
-#breadcrumbs {
-    margin: 14px 0 0 25px;
+.breadcrumbs {
+    margin: 14px 0 0 20px;
     font-family: Verdana;
 }
 
-#breadcrumbs ul li {
+.breadcrumbs li {
     display: inline;
     margin: 0;
     color: #4b4742;
     font-size: 83%;
 }
 
-#breadcrumbs ul li.divider {
-    padding: 0 3px 0 0;
+.breadcrumbs li:before {
+    content: '/';
+    padding: 0 4px;
     color: #807970;
-    font-size: 92%;
+    font-size: 110%;
 }
 
-#breadcrumbs span,
-#breadcrumbs a {
+.breadcrumbs li:first-child:before {
+    content: '';
+    padding: 0;
+}
+
+.breadcrumbs a {
     color: #0489b7;
     font-weight: bold;
     text-decoration: none;
-    margin: 0;
-    padding: 0;
-    display: inline;
 }
 
-#breadcrumbs a:hover,
-#breadcrumbs a:active {
+.breadcrumbs a:hover,
+.breadcrumbs a:active {
     text-decoration: underline;
 }
 

settings.py

@@ -220,6 +220,9 @@ MINIFY_BUNDLES = {
         'search': (
             'css/search.css',
         ),
+        'ie': (
+            'css/ie.css',
+        ),
     },
     'js': {
         'common': (

templates/layout/base.html

@@ -12,6 +12,9 @@
 {% for style in styles %}
 {{ css(style) }}
 {% endfor %}
+<!--[if lte IE 7]>
+{{ css('ie') }}
+<![endif]-->
 
 </head>
 <body{% if classes %} class="{{ classes }}"{% endif %}>
@@ -31,14 +34,7 @@
 {% include 'layout/sidebar.html' %}
 </div>
 
-{% block breadcrumbs %}
-<div id="breadcrumbs">
-  <ul>
-    <li><a href="/{{ request.locale }}/kb/">{{ _('Firefox Support') }}</a></li>
-    <li class="divider">/</li><li>{{ title }}</li>
-  </ul>
-</div>
-{% endblock %}
+{{ breadcrumbs(crumbs) }}
 
 <div id="main" role="main">
 {% block content_area %}

templates/layout/breadcrumbs.html

@@ -0,0 +1,11 @@
+{% if breadcrumbs %}
+<ol class="breadcrumbs">
+  {% for target, label in breadcrumbs %}
+    {% if target %}
+      <li><a href="{{ target }}">{{ label }}</a></li>
+    {% else %}
+      <li>{{ label }}</li>
+    {% endif %}
+  {% endfor %}
+</ol>
+{% endif %}