Impala category landing pages. Modular code ftw

apps/addons/helpers.py

@@ -195,6 +195,20 @@ def addon_grid(context, addons, src=None, dl_src=None, pagesize=6, cols=2):
     return new_context(**locals())
 
 
+@register.filter
+@jinja2.contextfilter
+@register.inclusion_tag('addons/impala/featured_grid.html')
+def featured_grid(context, addons, src=None, dl_src=None, pagesize=3, cols=3):
+    if not src:
+        src = context.get('src')
+    # dl_src is an optional src paramater just for the download links
+    if not dl_src:
+        dl_src = src
+    pages = chunked(addons, pagesize)
+    columns = '' if cols != 3 else 'three-col'
+    return new_context(**locals())
+
+
 @register.filter
 @jinja2.contextfilter
 @register.inclusion_tag('addons/impala/toplist.html')

apps/addons/models.py

@@ -1294,11 +1294,13 @@ def flush_urls(self):
         urls = ['*%s' % self.get_url_path(), ]
         return urls
 
-    def get_url_path(self):
+    def get_url_path(self, impala=False):
         try:
             type = amo.ADDON_SLUGS[self.type]
         except KeyError:
             type = amo.ADDON_SLUGS[amo.ADDON_EXTENSION]
+        if impala:
+            return reverse('i_browse.%s' % type, args=[self.slug])
         return reverse('browse.%s' % type, args=[self.slug])
 
     @staticmethod

apps/addons/templates/addons/impala/addon_grid.html

@@ -1,4 +1,4 @@
-{% cache pages %}
+{% cache addons %}
 <ul class="listing-grid c {{ columns }}">
 {% for page in pages %}
   {% set first_page = loop.first %}

apps/addons/templates/addons/impala/featured_grid.html

@@ -0,0 +1,40 @@
+{% cache addons %}
+<ul class="listing-grid c featured {{ columns }}">
+{% for page in pages %}
+  {% set first_page = loop.first %}
+  <section>
+  {% for addon in page %}
+    <li>
+      <div class="item addon">
+        <a href="{{ addon.get_url_path(impala=True)|urlparams(src=dl_src) }}">
+          <div class="summary">
+            <h3>{{ addon.name }}</h3>
+            <div>
+              {% if first_page %}
+                <img src="{{ addon.thumbnail_url }}">
+              {% else %}
+                <img data-defer-src="{{ addon.thumbnail_url }}"
+                     src="{{ media('img/icons/no-preview.png') }}">
+              {% endif %}
+            </div>
+          </div>
+        </a>
+        <div class="more">
+          {{ install_button(addon, impala=True, src=src) }}
+          {{ addon.summary|truncate(250)|nl2br }}
+          <div class="byline">
+            {% trans users=users_list(addon.listed_authors, size=2) %}
+              by {{ users }}
+            {% endtrans %}
+          </div>
+          <div class="adu">
+            {{ _('{0} users')|f(addon.average_daily_users|numberfmt) }}
+          </div>
+        </div>
+      </div>
+    </li>
+  {% endfor %}
+  </section>
+{% endfor %}
+</ul>
+{% endcache %}

apps/addons/templates/addons/impala/home.html

@@ -21,7 +21,7 @@
 {% block content %}
 
 <section class="secondary">
-  {{ side_nav(amo.ADDON_EXTENSION) }}
+  {{ side_nav(amo.ADDON_EXTENSION, impala=True) }}
 </section>
 
 <section class="primary" id="homepage">

apps/addons/templates/addons/impala/persona_grid.html

@@ -1,4 +1,4 @@
-{% cache pages %}
+{% cache addons %}
 <ul class="listing-grid personas three-col c">
 {% for page in pages %}
   {% set first_page = loop.first %}

apps/amo/helpers.py

@@ -405,19 +405,20 @@ def attrs(ctx, *args, **kw):
 
 @register.function
 @jinja2.contextfunction
-def side_nav(context, addon_type):
+def side_nav(context, addon_type, impala=False):
     app = context['request'].APP.id
-    return caching.cached(lambda: _side_nav(context, addon_type),
-                          'side-nav-%s-%s' % (app, addon_type))
+    imp = 'impala' if impala else 'old'
+    return caching.cached(lambda: _side_nav(context, addon_type, impala),
+                          'side-nav-%s-%s-%s' % (app, addon_type, impala))
 
 
-def _side_nav(context, addon_type):
+def _side_nav(context, addon_type, impala):
     request = context['request']
     qs = Category.objects.filter(application=request.APP.id, weight__gte=0)
     sort_key = attrgetter('weight', 'name')
     categories = sorted(qs.filter(type=addon_type), key=sort_key)
     ctx = dict(request=request, base_url=AddonType(addon_type).get_url_path(),
-               categories=categories, addon_type=addon_type)
+               categories=categories, addon_type=addon_type, impala=impala)
     return jinja2.Markup(env.get_template('amo/side_nav.html').render(ctx))
 
 

apps/amo/templates/amo/side_nav.html

@@ -14,7 +14,7 @@ <h2>{{ _('Explore') }}</h2>
   <h2>{{ _('Categories') }}</h2>
   <ul>
     {% for cat in categories %}
-      <li id="c-{{ cat.id }}"><a href="{{ cat.get_url_path() }}">{{ cat.name }}</a></li>
+      <li id="c-{{ cat.id }}"><a href="{{ cat.get_url_path(impala=impala) }}">{{ cat.name }}</a></li>
     {% endfor %}
   </ul>
 </nav>

apps/browse/templates/browse/impala/base_listing.html

@@ -41,7 +41,7 @@
 
 {% block content %}
   <section class="secondary">
-    {{ side_nav(amo.ADDON_EXTENSION) }}
+    {{ side_nav(amo.ADDON_EXTENSION, impala=True) }}
   </section>
   {% block primary %}{% endblock %}
 {% endblock %}

apps/browse/templates/browse/impala/category_landing.html

@@ -2,18 +2,29 @@
 
 {% set addon_sets = filter.all() %}
 
-{% set more_links = {
-    'created': _('View All Recently Added'),
-    'users': _('View All Most Popular'),
-    'rating': _('View All Top Rated'),
-} %}
-
 {% block bodyclass %}category-landing{% endblock %}
 
 {% block primary %}
 <section class="primary">
+  {% set addons = addon_sets['featured'] %}
+  {% if addons %}
+    <div class="island hero c">
+      <h2>{{ category.name }}</h2>
+      {{ addons[:3]|featured_grid }}
+    </div>
+  {% endif %}
+
+  {% for key, title in filter.opts if key != 'featured' %}
+  {% set addons = addon_sets[key][:10] %}
+  {% set link = url('i_browse.extensions', category.slug)|urlparams(sort=key) %}
   <div class="island c">
-    <h2>{{ category.name }}</h2>
+    <h2>
+      {{ filter.opts_dict[key] }}
+      <a class="seeall" href="{{ link }}">{{ _('See all »') }}</a>
+    </h2>
+    {{ addons|addon_grid(cols=3) }}
   </div>
+  {% endfor %}
+
 </section>
 {% endblock %}

apps/browse/urls.py

@@ -14,7 +14,7 @@
     url('^featured$', views.featured, name='browse.featured'),
     # TODO: When we launch the impala pages, add a redirect for this.
     url('^i/featured$',
-        lambda r: redirect(reverse('browse.i_extensions') + '?sort=featured',
+        lambda r: redirect(reverse('i_browse.extensions') + '?sort=featured',
                            permanent=True)),
 
     url('^themes/(?P<category>[^/]+)?$', views.themes,
@@ -25,7 +25,7 @@
     url('^es/extensions/(?:(?P<category>[^/]+)/)?$', views.es_extensions,
         name='browse.es.extensions'),
     url('^i/extensions/(?:(?P<category>[^/]+)/)?$', views.impala_extensions,
-        name='browse.i_extensions'),
+        name='i_browse.extensions'),
 
     url('^extensions/(?P<category>[^/]+)/featured$',
         views.creatured, name='browse.creatured'),

media/css/impala/header.less

@@ -5,33 +5,6 @@
     margin-bottom: 35px;
 }
 
-.island {
-    background: repeat scroll 0 0 transparent;
-    .gradient-two-color(#FCFDFE, #F4F8FC);
-    border: 1px solid #C9DDF2;
-    .border-radius(5px);
-    .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.3) inset, 0 0 1px rgba(0, 0, 0, 0.1));
-    display: block;
-    float: left;
-    margin-bottom: 15px;
-    padding: 14px 14px 16px;
-    > section {
-        border-bottom: 1px solid #C9DDF2;
-        border-top: 1px solid #FFFFFF;
-        margin: 0 -14px;
-        padding: 14px;
-        float: left;
-        width: 100%;
-        &:first-child {
-            border-top: 0;
-            padding-top: 0;
-        }
-        &:last-child {
-            border-bottom: 0;
-        }
-    }
-}
-
 #masthead {
     padding-top: 35px;
     max-width: 600px;

media/css/impala/hovercards.less

@@ -114,13 +114,6 @@
                 position: relative;
                 padding: 8px;
             }
-            img {
-                margin: 8px;
-                width: 32px;
-                height: 32px;
-                border: 0;
-                padding: 0;
-            }
             .summary {
                 height: 48px;
                 z-index: 21;
@@ -140,6 +133,13 @@
                 border-style: solid;
                 z-index: 22;
                 border-color: transparent;
+                img {
+                    margin: 8px;
+                    width: 32px;
+                    height: 32px;
+                    border: 0;
+                    padding: 0;
+                }
             }
             .adu {
                 font-size: 11px;
@@ -216,6 +216,51 @@
             display: block;
         }
     }
+    &.featured {
+        h3 {
+            font-size: 16px;
+            line-height: 18px;
+        }
+        li {
+            height: 212px;
+            width: 240px;
+        }
+        .item {
+            padding: 9px;
+            margin: 0;
+            &.addon .summary {
+                height: 192px;
+                padding: 0;
+                div {
+                    width: 220px;
+                    height: 170px;
+                    position: relative;
+                    img {
+                        padding: 8px;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        right: 0;
+                        margin: auto;
+                        border: 1px solid #ccc;
+                        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+                        position: absolute;
+                    }
+                }
+            }
+            &:hover {
+                &:before {
+                    display: none;
+                }
+                .more {
+                    padding: 0;
+                }
+                &.addon .summary {
+                    height: auto;
+                }
+            }
+        }
+    }
 }
 .html-rtl .listing-grid {
     li {
@@ -243,4 +288,9 @@
     .addon:hover {
         float: right;
     }
+    &.featured {
+        .item.addon {
+            margin: 0;
+        }
+    }
 }

media/css/impala/site.less

@@ -23,6 +23,36 @@ a {
     }
 }
 
+.island {
+    background: repeat scroll 0 0 transparent;
+    .gradient-two-color(#FCFDFE, #F4F8FC);
+    border: 1px solid #C9DDF2;
+    .border-radius(5px);
+    .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.3) inset, 0 0 1px rgba(0, 0, 0, 0.1));
+    display: block;
+    float: left;
+    margin-bottom: 15px;
+    padding: 14px 14px 16px;
+    > section {
+        border-bottom: 1px solid #C9DDF2;
+        border-top: 1px solid #fff;
+        margin: 0 -14px;
+        padding: 14px;
+        float: left;
+        width: 100%;
+        &:first-child {
+            border-top: 0;
+            padding-top: 0;
+        }
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+    &.hero {
+        width: 720px;
+    }
+}
+
 .primary {
     position: relative;
 }

media/css/impala/typography.less

@@ -89,6 +89,12 @@ pre, code, kbd, tt, samp, tt {
             .defaultlink
         }
     }
+    &.hero {
+        h2 {
+            color: @red;
+            font-size: 24px;
+        }
+    }
 }
 
 .secondary h2 {