[bug 867701] New topic and subtopic landing pages

kitsune/products/templates/products/documents.html

@@ -1,12 +1,17 @@
 {% extends "base.html" %}
 {% from 'includes/common_macros.html' import for_contributors_sidebar %}
-{% from 'topics/includes/topic_macros.html' import hot_topics, topic_sidebar %}
+{% if waffle.flag('new-topics') %}
+  {% from 'products/includes/topic_macros.html' import topic_sidebar %}
+{% else %}
+  {% from 'topics/includes/topic_macros.html' import topic_sidebar %}
+{% endif %}
+{% from 'topics/includes/topic_macros.html' import hot_topics %}
 {% set crumbs = [(url('products'), _('Products')),
                  (url('products.product', slug=product.slug), _(product.title, 'DB: products.Product.title')),
-                 (None, _(topic.title, 'DB: topics.Topic.title'))] %}
+                 (None, _(topic.title, 'DB: products.Topic.title'))] %}
 {% set styles = ('products',) %}
 
-{% block title %}{{ _(topic.title, 'DB: topics.Topic.title') }} | {{ _('{product} Help')|f(product=_(product.title, 'DB: products.Product.title')) }}{% endblock %}
+{% block title %}{{ _(topic.title, 'DB: products.Topic.title') }} | {{ _('{product} Help')|f(product=_(product.title, 'DB: products.Product.title')) }}{% endblock %}
 
 {% block content %}
   <div class="grid_12">
@@ -18,43 +23,67 @@
   </div>
   <aside class="grid_3">
     {{ for_contributors_sidebar(user, settings.WIKI_DEFAULT_LANGUAGE) }}
-    {{ topic_sidebar(topics[:10], product, topic) }}
+    {% if waffle.flag('new-topics') %}
+      {{ topic_sidebar(topics[:10], subtopics, product, topic, subtopic) }}
+    {% else %}
+      {{ topic_sidebar(topics[:10], product, topic) }}
+    {% endif %}
   </aside>
   <div class="grid_9">
     <article id="document-list">
       {% if topic.image %}<img src="{{ STATIC_URL }}img/blank.png" alt="" class="logo-sprite" style="background-image: url('{{ topic.image_url }}');" />{% endif %}
-      <h1 class="topic-title cf">{{ _(topic.title, 'DB: topics.Topic.title') }}</h1>
+      <h1 class="topic-title {% if topic.image %}has-image{% endif %} {% if not subtopic %}cf{% endif %}">
+        {% if subtopic %}
+          <a href="{{ url('products.documents', product_slug=product.slug, topic_slug=topic.slug) }}">
+        {% endif %}
+        {{ _(topic.title, 'DB: products.Topic.title') }}
+        {% if subtopic %}
+          </a>
+        {% endif %}
+      </h1>
 
-      {% if subtopics or topic.parent %}
-        <div id="focus-and-refine" class="feature-box" data-ui-type="folding-section">
-          <header>
-            <h2 class="nomargin">{{ _('Related Topics') }}</h2>
-          </header>
-          <section class="cf">
-            {% if topic.parent %}
-              <p>
-                <a href="{{ url('products.documents', product_slug=product.slug, topic_slug=topic.parent.slug) }}">
-                  {{ _('Go back to {topic}')|f(topic=_(topic.parent.title, 'DB: topics.Topic.title'))}}
-                </a>
-              </p>
-            {% endif %}
-            <ul class="subtopics cf">
-              {% for topic_ in subtopics %}
-                <li>
-                  <a href="{{ url('products.documents', product_slug=product.slug, topic_slug=topic_.slug) }}">
-                    {{ _(topic_.title, 'DB: topics.Topic.title') }}
+      {% if subtopic %}
+        <h1 class="topic-title {% if topic.image %}has-image{% endif %} cf">
+          {{ _(subtopic.title, 'DB: products.Topic.title') }}
+        </h1>
+      {% endif %}
+
+      {% if not waffle.flag('new-topics') %}
+        {% if subtopics or topic.parent %}
+          <div id="focus-and-refine" class="feature-box" data-ui-type="folding-section">
+            <header>
+              <h2 class="nomargin">{{ _('Related Topics') }}</h2>
+            </header>
+            <section class="cf">
+              {% if subtopic %}
+                <p>
+                  <a href="{{ url('products.documents', product_slug=product.slug, topic_slug=topic.slug) }}">
+                    {{ _('Go back to {topic}')|f(topic=_(topic.title, 'DB: products.Topic.title'))}}
                   </a>
-                </li>
-              {% endfor %}
-            </ul>
-          </section>
-        </div>
+                </p>
+              {% else %}
+                <ul class="subtopics cf">
+                  {% for subtopic in subtopics %}
+                    <li>
+                      <a href="{{ url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) }}">
+                        {{ _(subtopic.title, 'DB: products.Topic.title') }}
+                      </a>
+                    </li>
+                  {% endfor %}
+                </ul>
+              {% endif %}
+            </section>
+          </div>
+        {% endif %}
       {% endif %}
 
       {% for document in documents %}
         {% if loop.first %}<ul class="topic-list">{% endif %}
         <li>
           <a href="{{ document['url'] }}">{{ document['document_title'] }}</a>
+          {% if waffle.flag('new-topics') %}
+            {{ document['document_summary'] }}
+          {% endif %}
         </li>
         {% if loop.last %}</ul>{% endif %}
       {% endfor %}

kitsune/products/templates/products/includes/topic_macros.html

@@ -0,0 +1,24 @@
+{% macro topic_sidebar(topics, subtopics, product, selected_topic=None, selected_subtopic=None) -%}
+  <ul class="sidebar-nav topics">
+    {% for topic in topics %}
+      {% set topic_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
+      <li {% if selected_topic == topic %}class="selected {% if selected_subtopic != None %}subtopic-selected{% endif %}"{% endif %}>
+        <a href="{{ topic_url }}">
+          {{ _(topic.title, 'DB: topics.Topic.title') }}
+        </a>
+        {% if selected_topic == topic %}
+          <ul class="subtopics">
+            {% for subtopic in subtopics %}
+              {% set subtopic_url = url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) %}
+              <li {% if selected_subtopic == subtopic %}class="selected"{% endif %}>
+                <a href="{{ subtopic_url }}">
+                {{ _(subtopic.title, 'DB: topics.Topic.title') }}
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ul>
+{%- endmacro %}

kitsune/products/tests/test_templates.py

@@ -96,7 +96,7 @@ class ProductViewsTestCase(ElasticTestCase):
         r = self.client.get(url, follow=True)
         eq_(200, r.status_code)
         doc = pq(r.content)
-        eq_(doc('#document-list > ul > li:first').text(), docs[1].title)
+        eq_(doc('#document-list > ul > li:first-child > a').text(), docs[1].title)
 
         # Add 2 helpful votes the third document. It should be first now.
         rev = docs[2].current_revision
@@ -108,7 +108,7 @@ class ProductViewsTestCase(ElasticTestCase):
         r = self.client.get(url, follow=True)
         eq_(200, r.status_code)
         doc = pq(r.content)
-        eq_(doc('#document-list > ul > li:first').text(), docs[2].title)
+        eq_(doc('#document-list > ul > li:first-child > a').text(), docs[2].title)
 
     def test_hot_topics(self):
         """Verifies the hot topics section."""

kitsune/products/urls.py

@@ -6,4 +6,6 @@ urlpatterns = patterns('kitsune.products.views',
     url(r'^/(?P<slug>[^/]+)$', 'product_landing', name='products.product'),
     url(r'^/(?P<product_slug>[^/]+)/(?P<topic_slug>[^/]+)$',
         'document_listing', name='products.documents'),
+    url(r'^/(?P<product_slug>[^/]+)/(?P<topic_slug>[^/]+)/(?P<subtopic_slug>[^/]+)$',
+        'document_listing', name='products.subtopics'),
 )

kitsune/products/views.py

@@ -43,18 +43,30 @@ def product_landing(request, template, slug):
 
 
 @mobile_template('products/{mobile/}documents.html')
-def document_listing(request, template, product_slug, topic_slug):
+def document_listing(request, template, product_slug, topic_slug,
+                     subtopic_slug=None):
     """The document listing page for a product + topic."""
     product = get_object_or_404(Product, slug=product_slug)
-    topic = get_object_or_404(Topic, slug=topic_slug, product=product)
+    topic = get_object_or_404(Topic, slug=topic_slug, product=product,
+                              parent__isnull=True)
 
-    documents, fallback_documents = documents_for(
-        locale=request.LANGUAGE_CODE, products=[product], topics=[topic])
+    doc_kw = {'locale': request.LANGUAGE_CODE, 'products': [product]}
+
+    if subtopic_slug is not None:
+        subtopic = get_object_or_404(Topic, slug=subtopic_slug,
+                                     product=product, parent=topic)
+        doc_kw['topics'] = [subtopic]
+    else:
+        subtopic = None
+        doc_kw['topics'] = [topic]
+
+    documents, fallback_documents = documents_for(**doc_kw)
 
     return render(request, template, {
         'product': product,
         'topic': topic,
-        'topics': topics_for(products=[product]),
+        'subtopic': subtopic,
+        'topics': topics_for(products=[product], parent=None),
         'subtopics': topics_for(products=[product], parent=topic),
         'documents': documents,
         'fallback_documents': fallback_documents,

kitsune/sumo/static/less/main.less

@@ -739,17 +739,21 @@ input[type=button],
         color: @textDarkGrey;
         font-family: @OpenSans;
         font-weight: bold;
+        position: relative;
       }
 
-      &:after {
-        background: url('../img/sidebar-arrow.gif') 0 3px no-repeat;
-        content: '';
-        height: 30px;
-        left: 0;
-        margin-top: -15px;
-        position: absolute;
-        top: 50%;
-        width: 15px;
+      > span,
+      > a {
+        &:after {
+          background: url('../img/sidebar-arrow.gif') 0 3px no-repeat;
+          content: '';
+          height: 30px;
+          left: 0;
+          margin-top: -15px;
+          position: absolute;
+          top: 50%;
+          width: 15px;
+        }
       }
     }
   }

kitsune/sumo/static/less/products.less

@@ -102,13 +102,105 @@
   }
 
   > li {
-    font-size: 16px;
-    margin: 0 0 6px 0;
+    margin: 0 0 20px 0;
 
-    &:after {
-      color: @textBlue;
-      content: '\00BB';
-      margin: 0 0 0 2px;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    > a {
+      display: block;
+      font-size: 18px;
+    }
+  }
+}
+
+.topic-title {
+  margin-bottom: 0;
+
+  &.has-image {
+    margin-left: 88px;
+  }
+
+  &.cf {
+    margin-bottom: 20px;
+  }
+
+  & + .topic-title {
+    margin-top: 0;
+    padding-left: 28px;
+    position: relative;
+
+    &:before {
+      background: @iconsSprite no-repeat -54px -2138px;
+      content: '';
+      height: 16px;
+      left: 10px;
+      position: absolute;
+      top: 14px;
+      width: 8px;
+    }
+  }
+}
+
+.sidebar-nav {
+  &.topics {
+    background-color: #e0e5e8;
+    background-image: url('../img/grain.png');
+
+    > li {
+      &.subtopic-selected {
+        > a,
+        > a:visited {
+          .linear-gradient-top(#e0e5e8, #c5c8cb, 0%, #e0e5e8, 80%, url('../img/grain.png'));
+          border: 0;
+        }
+      }
+
+      > ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        text-transform: none;
+
+        > li {
+          > a,
+          > a:visited {
+            color: @textDarkGrey;
+            display: block;
+            padding: 12px 20px;
+            text-decoration: none;
+          }
+
+          > a:hover {
+            color: @textDarkBlue;
+            text-decoration: none;
+          }
+
+          &.selected {
+            > a {
+              background: #fff;
+              font-weight: bold;
+              position: relative;
+
+              &:after {
+                background: url('../img/sidebar-arrow.gif') 0 3px no-repeat;
+                content: '';
+                height: 30px;
+                left: 0;
+                margin-top: -15px;
+                position: absolute;
+                top: 50%;
+                width: 15px;
+              }
+            }
+
+            > a:hover {
+              color: @textDarkGrey;
+            }
+          }
+        }
+      }
     }
   }
 }

kitsune/sumo/static/less/variables.less

@@ -28,4 +28,4 @@
 @Moz: 'Moz', Verdana, Helvetica, Arial, sans-serif;
 
 /* Images */
-@iconsSprite: url('../img/icons-sprite.png?v=2');
+@iconsSprite: url('../img/icons-sprite.png?v=3');

migrations/221-readd-new-topics-flag.sql

@@ -0,0 +1,2 @@
+INSERT IGNORE INTO `waffle_flag` (`name`, `everyone`, `superusers`, `staff`, `authenticated`, `rollout`, `note`, `testing`, `created`, `modified`)
+    VALUES ('new-topics', 0, 0, 0, 0, 0, '', 0, NOW(), NOW());