impala initial landing (bug 634801, 639922)

apps/addons/helpers.py

@@ -130,6 +130,20 @@ def addon_listing_header(context, url_base, sort_opts, selected):
     return new_context(**locals())
 
 
+@register.filter
+@jinja2.contextfilter
+@register.inclusion_tag('addons/impala/addon_grid.html')
+def addon_grid(context, addons, src=None):
+    return new_context(**locals())
+
+
+@register.filter
+@jinja2.contextfilter
+@register.inclusion_tag('addons/impala/toplist.html')
+def addon_toplist(context, addons, vital=None, src=None):
+    return new_context(**locals())
+
+
 def new_context(context, **kw):
     c = dict(context.items())
     c.update(kw)

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

@@ -0,0 +1,30 @@
+{% cache addons %}
+<ul class="addon-grid c">
+{% for addon in addons %}
+  <li>
+    <div class="item">
+      <a href="{{ addon.get_url_path() }}">
+        <div class="icon">
+          <img src="{{ addon.icon_url }}">
+        </div>
+        <div class="summary">
+          <h3>{{ addon.name }}</h3>
+          {% with categories = addon.categories.filter(application=APP.id) %}
+            {% if categories %}
+              <div class="category" class="more-info">
+                {{ categories[0] }}
+              </div>
+            {% endif %}
+          {% endwith %}
+          <div class="rating">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;</div>
+        </div>
+      </a>
+      <div class="more">
+        {{ addon.summary|truncate(250)|nl2br }}
+        {{ install_button(addon) }}
+      </div>
+    </div>
+  </li>
+{% endfor %}
+</ul>
+{% endcache %}

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

@@ -0,0 +1,55 @@
+{% extends "impala/base.html" %}
+
+{% block title %}{{ _('Add-ons for {0}')|f(request.APP.pretty) }}{% endblock %}
+
+{% block bodyclass %}home{% endblock %}
+
+{% set ext, extrss = url('browse.extensions'), url('browse.extensions.rss') %}
+{% set view_all = {
+  'featured': {
+    'text': _('Featured Extensions'),
+    'link': url('browse.featured'),
+    'feed': url('browse.featured.rss'),
+  },
+  'popular': {
+    'text': _('Popular Extensions'),
+    'link': ext|urlparams(sort='popular'),
+    'feed': extrss|urlparams(sort='popular'),
+  }
+}
+%}
+
+
+{% block content %}
+
+<section class="secondary">
+  {{ side_nav(amo.ADDON_EXTENSION) }}
+</section>
+
+<section class="primary" id="homepage">
+  <div class="island">
+    <h1>Promos</h1>
+    Morbi laoreet, lorem nec volutpat ullamcorper, mauris dui vulputate nulla, sed aliquet ipsum diam euismod tellus. Fusce congue adipiscing quam eget posuere. Mauris in ipsum ut dui varius eleifend et placerat erat. Nulla pretium elementum nulla hendrerit dapibus. Sed in commodo mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sagittis egestas tortor a adipiscing. Pellentesque consequat consectetur porttitor. Praesent et dictum elit. Vestibulum vulputate porta hendrerit.<br>
+    Curabitur lobortis blandit consectetur. Phasellus ac eros quam. Mauris interdum molestie magna, in vehicula nisi laoreet in. Aenean et convallis mi. Phasellus lobortis tempus felis, vel tincidunt ante aliquam id. Ut lectus eros, tincidunt vitae porta eget, vestibulum non mauris. Curabitur venenatis fringilla tortor sed pulvinar. Vivamus turpis nibh, facilisis auctor aliquet id, iaculis eu arcu. Maecenas vestibulum volutpat elit eget euismod.
+  </div>
+  <section class="secondary">
+    <h2>{{ _('Most Popular') }}</h2>
+    {{ popular|addon_toplist }}
+  </section>
+  <section class="primary">
+    {% for key, addons in addon_sets.items() %}
+      <div id="list-{{ key }}" class="island">
+        {{ addons|addon_grid }}
+      </div>
+    {% endfor %}
+  </section>
+</section>
+
+{% endblock content %}
+
+{% block extrahead %}
+{% for feed in view_all.itervalues() %}
+  <link rel="alternate" type="application/rss+xml" title="{{ feed['text'] }}"
+        href="{{ feed['feed'] }}">
+{% endfor %}
+{% endblock %}

apps/addons/templates/addons/impala/toplist.html

@@ -0,0 +1,8 @@
+<ol class="toplist">
+  {% for addon in addons %}
+    <li><a href="{{ addon.get_url_path() }}">
+      {{ addon.name }}
+      <br><span class="vital">999 users</span>
+    </a></li>
+  {% endfor %}
+</ol>

apps/addons/urls.py

@@ -41,6 +41,8 @@ detail_patterns = patterns('',
 urlpatterns = patterns('',
     # The homepage.
     url('^$', views.home, name='home'),
+    # The impala homepage.
+    url('^i/$', views.impala_home, name='i_home'),
 
     # URLs for a single add-on.
     ('^addon/%s/' % ADDON_ID, include(detail_patterns)),

apps/addons/views.py

@@ -306,6 +306,25 @@ def home(request):
                          'collections': collections, 'promobox': promobox})
 
 
+def impala_home(request):
+    # Add-ons.
+    base = Addon.objects.listed(request.APP).exclude(type=amo.ADDON_PERSONA)
+    filter = HomepageFilter(request, base, key='browse', default='featured')
+    addon_sets = dict((key, qs[:4]) for key, qs in filter.all().items())
+
+    # Collections.
+    q = Collection.objects.filter(listed=True, application=request.APP.id)
+    collections = q.order_by('-weekly_subscribers')[:3]
+    promobox = CollectionPromoBox(request)
+
+    popular = Addon.objects.listed(request.APP).order_by('-weekly_downloads')[:10]
+
+    return jingo.render(request, 'addons/impala/home.html',
+                        {'popular': popular,
+                         'filter': filter, 'addon_sets': addon_sets,
+                         'collections': collections, 'promobox': promobox})
+
+
 @mobilized(home)
 @cache_page(60 * 10)
 def home(request):

apps/amo/helpers.py

@@ -18,7 +18,7 @@ from tower import ugettext as _
 
 import amo
 from amo import utils, urlresolvers
-from addons.models import Category
+from addons.models import Category, AddonType
 from translations.query import order_by_translation
 from translations.helpers import truncate
 
@@ -368,6 +368,22 @@ def attrs(ctx, *args, **kw):
     return jinja2.filters.do_xmlattr(ctx, dict(*args, **kw))
 
 
+@register.function
+@jinja2.contextfunction
+def side_nav(context, addon_type):
+    return caching.cached(lambda: _side_nav(context, addon_type), 'side-nav')
+
+
+def _side_nav(context, addon_type):
+    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)
+    return jinja2.Markup(env.get_template('amo/side_nav.html').render(ctx))
+
+
 @register.function
 @jinja2.contextfunction
 def site_nav(context):

apps/amo/templates/amo/side_nav.html

@@ -0,0 +1,20 @@
+{% set extras = (
+    ('featured', _('Featured')),
+    ('popular', _('Most Popular')),
+    ('rating', _('Top Rated')),
+) %}
+<nav id="side-nav" class="c">
+  <h2>{{ _('Explore') }}</h2>
+  <ul>
+    {% for sort, title in extras %}
+      <li><em><a href="{{ base_url|urlparams(sort=sort) }}">{{ title }}</a></em></li>
+    {% endfor %}
+  </ul>
+
+  <h2>{{ _('Categories') }}</h2>
+  <ul>
+    {% for cat in categories %}
+      <li><a href="{{ cat.get_url_path() }}">{{ cat.name }}</a></li>
+    {% endfor %}
+  </ul>
+</nav>

apps/amo/templates/amo/site_nav.html

@@ -6,7 +6,7 @@
 
 {% macro section(title, base_url, extras, categories) %}
   <li>
-    <a href="{{ base_url }}">{{ _('Extensions') }}</a>
+    <a href="{{ base_url }}">{{ title }}</a>
     <ul class="two-col">
       {% for sort, title in extras %}
         <li><em><a href="{{ base_url|urlparams(sort=sort) }}">{{ title }}</a></em></li>

media/css/impala/base.css

@@ -0,0 +1,66 @@
+/************************************/
+/*            BASE STYLING          */
+/************************************/
+
+/* Welcome to the inner sanctum.
+   Nothing goes here that is site-specific.
+   Seriously.
+*/
+
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+/* end meyer reset */
+
+/* >> The Magnificent CLEARFIX <<
+   Lifted from html5boilerplate.com
+   License is Public domain */
+.c:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.c { display: inline-block; }
+* html .c { height: 1%; } /* Hides from IE-mac \*/
+.c { display: block; }

media/css/impala/header.less

@@ -0,0 +1,223 @@
+@import 'lib';
+
+.amo-header {
+    font-family: @head-sans;
+    height: 120px;
+    margin-bottom: 25px;
+}
+
+.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 2px rgba(0, 0, 0, 0.1));
+    display: block;
+    margin-bottom: 15px;
+    padding: 14px 14px 16px;
+    float: left;
+}
+
+#masthead {
+    padding-top: 40px;
+    max-width: 600px;
+}
+
+#aux-nav {
+    float: right;
+}
+.html-rtl #aux-nav {
+    float: left;
+}
+
+#aux-nav .context,
+#aux-nav ul {
+    border-left: 1px solid #9FA7AF;
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    padding: 0 1em;
+}
+
+.site-title img {
+    float: left;
+    margin-right: 12px;
+}
+.html-rtl .site-title img {
+    float: right;
+    margin: 0 0 0 12px;
+}
+
+.site-title {
+    margin-bottom: 8px;
+}
+
+.site-title a {
+    color: #333;
+    text-decoration: none;
+}
+
+/** site navigation */
+
+#site-nav {
+    font-size: 12px;
+    margin-left: 66px;
+    z-index: 50;
+}
+
+#site-nav > ul > li > a {
+    position: relative;
+    font-weight: bold;
+    text-transform: uppercase;
+    z-index: 60;
+    padding: 4px 8px;
+    line-height: 12px;
+    border-style: solid;
+    .border-radius(3px 3px 0 0);
+    border-color: transparent;
+    border-width: 1px 1px 0;
+}
+
+#site-nav > ul > li:hover > a {
+    background: #fff;
+    border-color: #98B2C9 #98B2C9 #fff;
+    .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
+}
+#site-nav > ul > li:hover:after {
+    content: "";
+    width: 100px;
+    z-index: 62;
+    height: 5px;
+    background: #fff;
+    position: absolute;
+    top: 18px;
+    left: 1px;
+}
+.html-rtl #site-nav > ul > li:hover:after {
+    left: auto;
+    right: 1px;
+}
+
+#site-nav > ul > li {
+    float: left;
+    position: relative;
+    border-left: 1px solid #9FA7AF;
+    left: -9px;
+}
+.html-rtl #site-nav > ul > li {
+    border-left: 0;
+    border-right: 1px solid #9FA7AF;
+    float: right;
+    left: auto;
+    right: -9px;
+}
+
+#site-nav > ul > li:first-child {
+    border: 0;
+}
+
+#site-nav > ul > li > ul {
+    width: 190px;
+    position: absolute;
+    top: 17px;
+    z-index: 59;
+    padding: 8px;
+    display: none;
+    background: #fff;
+    border: 1px solid #98B2C9;
+    .border-radius(0 3px 3px);
+    .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
+}
+
+#site-nav > ul > li:hover > ul {
+    display: block;
+}
+
+#site-nav > ul > li > ul.two-col {
+    .columns(2, 8px);
+    width: 340px;
+}
+
+#site-nav hr {
+    border: 0;
+    margin: 6px 8px;
+    border-top: 1px dotted #ccc;
+}
+
+#site-nav em {
+    background: #F4F8FC;
+    display: block;
+    font-weight: bold;
+}
+
+#site-nav > ul > li > ul a {
+    text-decoration: none;
+    display: block;
+    padding: 6px 8px;
+}
+
+#site-nav > ul ul a:hover {
+    background: #ebf4fe;
+}
+
+#site-nav > ul em a:hover {
+    background: #e1edfb;
+}
+
+/** search box */
+
+.header-search {
+    position: absolute;
+    top: 64px;
+    right: 0;
+    background: #F8FBFF;
+    border: 1px solid #98B2C9;
+    .border-radius(4px);
+    .box-shadow(0 -2px 0 rgba(152, 178, 201, 0.3) inset, 0 2px 0 rgba(0, 0, 0, 0.05));
+    padding: 5px 7px 7px;
+    width: 280px;
+}
+.html-rtl .header-search {
+    left: 0;
+    right: auto;
+}
+
+button.search-button {
+    background: #84C63C url("../../img/icons/go-arrow.png") center no-repeat;
+    background-image: url("../../img/icons/go-arrow.png"),
+                      -moz-linear-gradient(#84C63C, #489615);
+    background-image: url("../../img/icons/go-arrow.png"),
+                      -webkit-linear-gradient(#84C63C, #489615);
+    border: 0;
+    float: right;
+    vertical-align: bottom;
+    cursor: pointer;
+    height: 30px;
+    width: 36px;
+
+    .border-radius(6px);
+    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset);
+}
+.html-rtl button.search-button {
+    float: left;
+    -moz-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+}
+
+.header-search input {
+    background: url("../../img/icons/search.png") no-repeat scroll 8px center #FFFFFF;
+    float: left;
+    border: 0 none;
+    .border-radius(4px);
+    .box-shadow(0 0 2px rgba(0, 0, 0, 0.4) inset);
+    font-family: Trebuchet MS;
+    font-size: 14px;
+    height: 30px;
+    padding: 0 0 0 32px;
+    width: 206px;
+}
+.html-rtl .header-search input {
+    float: right;
+    padding: 0 32px 0 0;
+    background-position: 212px center;
+}

media/css/impala/hovercards.less

@@ -0,0 +1,117 @@
+@import 'lib';
+
+.addon-grid li {
+  width: 50%;
+  height: 76px;
+  overflow: visible;
+  float: left;
+}
+.addon-grid .item {
+  position: relative;
+  margin: 5px 5px 5px 61px;
+  border: 1px solid transparent;
+  float: left;
+  z-index: 20;
+}
+.addon-grid .item h3 {
+  font-family: Georgia;
+  color: #447BC4;
+  margin: 0 0 2px 0;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 16px;
+}
+.addon-grid .category {
+  font-family: Georgia;
+  color: #666;
+  font-size: 12px;
+  line-height: 14px;
+  white-space: nowrap;
+}
+.addon-grid .item .more,
+.addon-grid .item .summary,
+.addon-grid .item .icon {
+  position: relative;
+  padding: 8px;
+}
+.addon-grid .item .more {
+  color: #666;
+  font-size: .9em;
+  display: none;
+  z-index: 29;
+  padding: 0 14px 8px 12px;
+}
+.addon-grid .item img {
+  margin: 8px;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  padding: 0;
+}
+.addon-grid .item a {
+  display: block;
+  color: black;
+  text-decoration: none;
+}
+.addon-grid .item .summary {
+  height: 48px;
+  width: 182px;
+  z-index: 21;
+  overflow: hidden;
+}
+.addon-grid .item .summary h3,
+.addon-grid .item .summary div {
+  white-space: nowrap;
+}
+.addon-grid .item .icon {
+  position: absolute;
+  left: -57px;
+  top: -1px;
+  padding-right: 0;
+  height: 48px;
+  width: 48px;
+  border-width: 1px 0 1px 1px;
+  border-style: solid;
+  z-index: 22;
+  border-color: transparent;
+}
+.addon-grid .item:before {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 66px;
+  width: 56px;
+  top: -1px;
+  left: -57px;
+  z-index: 1;
+}
+.addon-grid .item:hover {
+    z-index: 25;
+    background: #fff;
+    border-color: #888;
+    .box-shadow(0 0 4px rgba(0,0,0,.4));
+}
+.addon-grid .item:hover .summary {
+    background: white;
+    z-index: 26;
+}
+.addon-grid .item:hover .icon {
+    background: #fff;
+    border-color: #888;
+    z-index: 27;
+}
+.addon-grid .item:hover:before {
+    .box-shadow(0 0 4px rgba(0,0,0,.4));
+}
+.addon-grid .item:hover .more {
+    background: #fff;
+    display: block;
+    z-index: 28;
+}
+.addon-grid .item:hover h3 {
+  text-decoration: underline;
+}
+.addon-grid .rating {
+  font-size: 14px;
+  color: #fc0;
+}

media/css/impala/lib.less

@@ -0,0 +1,44 @@
+// Colors
+@link: #447BC4;
+@note-gray: #999;
+
+// Font Stacks
+@copy-stack: "helvetica neue", arial, helvetica, sans-serif;
+@head-sans: "trebuchet ms", sans-serif;
+@head-serif: Georgia, serif;
+@mono-stack: "andale mono", monospace;
+
+// Mixins
+.border-radius(@radius) {
+    border-radius: @radius;
+    -moz-border-radius: @radius;
+    -webkit-border-radius: @radius;
+}
+
+.box-shadow(@shadow) {
+    box-shadow: @shadow;
+    -moz-box-shadow: @shadow;
+    -webkit-box-shadow: @shadow;
+}
+
+.box-shadow(@shadow, @shadow2, @shadow3:0 0, @shadow4:0 0) {
+    box-shadow: @shadow, @shadow2, @shadow3, @shadow4;
+    -moz-box-shadow: @shadow, @shadow2, @shadow3, @shadow4;
+    -webkit-box-shadow: @shadow, @shadow2, @shadow3, @shadow4;
+}
+
+.columns(@count, @gap: 1em) {
+    column-count: @count;
+    -moz-column-count: @count;
+    -webkit-column-count: @count;
+    column-gap: @gap;
+    -moz-column-gap: @gap;
+    -webkit-column-gap: @gap;
+}
+
+.gradient-two-color(@color1, @color2) {
+    background-image: -webkit-gradient(linear, left bottom, left top, from(@color1), to(@color2));
+    background-image: linear-gradient(@color1, @color2);
+    background-image: -moz-linear-gradient(@color1, @color2);
+    background-image: -webkit-linear-gradient(@color1, @color2);
+}

media/css/impala/moz-tab.css

@@ -0,0 +1,13 @@
+#global-header-tab a {
+    display: block;
+    float: right;
+}
+
+.html-rtl #global-header-tab a {
+    float: left;
+    margin: 0 16px 0 0;
+}
+
+#global-header-tab a {
+    color: #fff;
+}

media/css/impala/site.less

@@ -0,0 +1,79 @@
+@import 'lib';
+
+html {
+    background: #fff url(../../img/zamboni/global/bg-header.png) left top repeat-x;
+}
+
+#page {
+    max-width: 960px;
+    width: 960px;
+    margin: 0 auto;
+    position: relative;
+}
+
+a {
+    text-decoration: none;
+    color: @link;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.primary {
+    margin-left: 210px;
+
+    .primary {
+        margin-right: 210px;
+        margin-left: 0;
+    }
+
+    .secondary {
+        float: right;
+    }
+}
+.secondary {
+    width: 180px;
+    float: left;
+}
+
+.html-rtl {
+    .primary {
+        margin-left: 0;
+        margin-right: 210px;
+
+        .primary {
+            margin-right: 0;
+            margin-left: 210px;
+        }
+
+        .secondary {
+            float: left;
+        }
+    }
+    .secondary {
+        float: right;
+    }
+}
+
+.secondary {
+    ul, ol {
+        margin-bottom: 2em;
+        font-size: 12px;
+    }
+
+    li {
+        line-height: 28px;
+        border: 1px solid rgba(3, 48, 81, 0.2);
+        border-width: 0 0 1px 0;
+        &:first-child {
+            border-top-width: 1px;
+        }
+    }
+    h2 {
+        font-size: 14px;
+    }
+    li a, h2 {
+        display: block;
+        padding: 0 6px;
+    }
+}

media/css/impala/toplist.less

@@ -0,0 +1,29 @@
+@import 'lib';
+
+.toplist {
+    li {
+        list-style: decimal inside;
+        line-height: 1em;
+        white-space: nowrap;
+        height: 30px;
+        position: relative;
+
+        a {
+            vertical-align: top;
+            padding: 10px 0 10px 20px;
+            position: absolute;
+            top: 0;
+        }
+
+        &::-moz-list-number {
+            margin-top: 9px;
+            width: 1em;
+            text-align: right;
+            color: #444;
+        }
+    }
+    .vital {
+        color: @note-gray;
+        font-size: .9em;
+    }
+}

media/css/impala/typography.less

@@ -0,0 +1,35 @@
+@import 'lib';
+
+/************************************/
+/*             TYPOGRAPHY           */
+/************************************/
+
+@font-face {
+    font-family: 'MetaBlack';
+    src: url('https://www.mozilla.com/img/fonts/MetaWebPro-Black.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+
+body {
+    font-family: @copy-stack;
+    font-style: normal;
+    font-size: 13px;
+}
+
+h1 {
+    font-size: 40px;
+    font-family: MetaBlack;
+    text-transform: uppercase;
+}
+
+pre, code, kbd, tt, samp, tt {
+    font-family: @mono-stack;
+}
+
+.secondary h2 {
+    font-family: @head-sans;
+    font-weight: bold;
+    text-transform: uppercase;
+}

settings.py

@@ -381,6 +381,17 @@ MINIFY_BUNDLES = {
             'css/zamboni/tags.css',
             'css/zamboni/tabs.css',
         ),
+        'zamboni/impala': (
+            'css/impala/base.css',
+            'css/impala/site.less',
+            'css/impala/typography.less',
+            'css/impala/header.less',
+            'css/global/headerfooter.css',
+            'css/impala/moz-tab.css',
+            'css/impala/hovercards.less',
+            'css/impala/toplist.less',
+            # 'css/zamboni/amo_headerfooter.css',
+        ),
         'zamboni/discovery-pane': (
             'css/zamboni/discovery-pane.css',
             'css/legacy/jquery-lightbox.css',

templates/impala/base.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="{{ LANG }}" dir="{{ DIR }}">
+  <head>
+    <meta charset="utf-8">
+    {% if not settings.ENGAGE_ROBOTS %}
+      <meta name="robots" content="noindex">
+    {% endif %}
+    {% block extrameta %}{% endblock %}
+    <title>{% block title %}{{ _('Mozilla Add-ons') }}{% endblock %}</title>
+
+    <link rel="shortcut icon" type="image/x-icon"
+          href="{{ MEDIA_URL}}img/favicon.ico">
+
+    {% block rss_feed %}{% endblock %}
+
+    {# L10n: {0} is an application, like Firefox. #}
+    <link title="{{ _('{0} Add-ons')|f(APP.pretty) }}"
+          rel="search" type="application/opensearchdescription+xml"
+          href="{{ url('amo.opensearch') }}" />
+
+    {% block site_css %}
+      {{ css('zamboni/impala') }}
+      <!--[if IE]><link rel="stylesheet" href="{{ media('css/impala/ie.css') }}"><![endif]-->
+      <!--[if IE 7]><link rel="stylesheet" href="{{ media('css/impala/ie7.css') }}"><![endif]-->
+    {% endblock %}
+
+    {% block extrahead %}{% endblock %}
+    <noscript><link rel="stylesheet" href="{{ media('css/legacy/nojs.css') }}"></noscript>
+
+    {% if settings.DEBUG %}
+      {% if settings.LESS_LIVE_REFRESH %}
+        <meta id="live_refresh" name="live_refresh" value="1">
+      {% endif %}
+      {{ js('debug') }}
+    {% endif %}
+
+  </head>
+  <body class="html-{{ DIR }} {{ request.APP.short }} moz-header-slim {% block bodyclass %}{% endblock %}"
+        data-app="{{ request.APP.short }}"
+        data-appname="{{ request.APP.pretty }}"
+        data-appid="{{ request.APP.id }}"
+        data-min-beta-version="{{ settings.MIN_BETA_VERSION }}"
+        data-anonymous="{{ (not request.user.is_authenticated())|json }}"
+        data-readonly="{{ settings.READ_ONLY|json }}"
+        data-media-url="{{ MEDIA_URL }}"
+        {% if settings.PAYPAL_USE_EMBEDDED %}data-paypal-url="{{ settings.PAYPAL_JS_URL }}"{% endif %}
+        {% block bodyattrs %}{% endblock %}>
+
+    {% if ADMIN_MESSAGE or settings.READ_ONLY%}
+      <div id="site-notice">
+        {% if ADMIN_MESSAGE %}
+          <p>{{ ADMIN_MESSAGE|safe }}</p>
+        {% endif %}
+        {% if settings.READ_ONLY %}
+          <p>{{ _("Some features are temporarily disabled while we perform website maintenance. We'll be back to full capacity shortly.") }}</p>
+        {% endif %}
+      </div>
+      </div>
+    {% endif %}
+    <div id="page">
+      {% block site_header %}
+        {# Well that's an awful tiny mozilla header #}
+        <div id="global-header-tab">
+          <a href="http://mozilla.org/"><img src="{{ media('img/zamboni/mozilla-tab.png') }}"></a>
+        </div>
+        <div class="amo-header">
+          <div id="aux-nav" role="navigation" class="c">
+            {% block aux_nav %}
+            <ul id="other-apps" class="change"
+                title="{{ _('Find add-ons for other applications') }}">
+              <li>
+                <a href="#" class="controller">{{ _('Other Applications') }}</a>
+                <ul>
+                  {% for app in amo.APP_USAGE %}
+                    {% if app != request.APP %}
+                      <li id="app-{{ app.short }}" class="{{ app.short }}">
+                        <a href="{{ locale_url(app.short) }}">{{ app.pretty }}</a>
+                      </li>
+                    {% endif %}
+                  {% endfor %}
+                </ul>
+              </li>
+            </ul>
+            {% endblock aux_nav %}
+            {% if not settings.READ_ONLY %}
+              {% include "user_login.html" %}
+            {% endif %}
+          </div>
+          <div class="header-search" role="search">
+            {% block search_form %}
+            {% include 'impala/search.html' %}
+            {% endblock %}
+          </div>
+          <div id="masthead">
+            {% block site_header_title %}
+            {% include "impala/header_title.html" %}
+            {{ site_nav() }}
+            {% endblock %}
+          </div>
+        </div>
+      {% endblock site_header %}
+
+      {# Overridden in base_side_categories, which expands categories
+         on the side of the page. #}
+      {% block main_content %}
+        {% block navbar %}
+        {% endblock %}
+        {# outer_content is for something you want above content on every page. #}
+        {% block outer_content %}{% endblock %}
+        {% block content %}{% endblock %}
+      {% endblock %}
+    </div>
+    <div id="tooltip">
+      <span></span>
+    </div>
+    <div id="popup-staging">
+      {% block popups %}
+      {% endblock %}
+    </div>
+    {# js #}
+    {% block site_js %}
+      <script src="{{ url('jsi18n') }}/build:{{ BUILD_ID_JS }}"></script>
+      {{ js('common') }}
+      <script async defer src="{{ url('addons.buttons.js') }}/build:{{ BUILD_ID_JS }}"></script>
+    {% endblock %}
+    {% block js %}{% endblock %}
+    {% block footer %}
+      <div id="footer" role="contentinfo">
+        <div class="section">
+          {% block footer_extras %}
+            <img class="footerlogo" src="{{ media('img/zamboni/footer-logo-med.png') }}" alt="">
+          {% endblock %}
+          {% include "footer.html" %}
+        </div> {# section #}
+      </div> {# footer #}
+    {% endblock %}
+    {# Webtrends Stats Tracking #}
+    <script defer src="{{ media('js/webtrends/webtrends-v0.1.js') }}"></script>
+    <noscript>
+      <img id="DCSIMG" width="1" height="1"
+        src="https://statse.webtrendslive.com/dcso6de4r0000082npfcmh4rf_4b1e/njs.gif?dcsuri=/nojavascript&amp;WT.js=No&amp;WT.tv=8.6.2" />
+    </noscript>
+    {# End Webtrends #}
+  </body>
+</html>

templates/impala/header_title.html

@@ -0,0 +1,21 @@
+<h1 class="site-title">
+{% macro heading(app, text, icon) -%}
+<a href="{{ url('i_home') }}" title="{{ _('Return to the {0} Add-ons homepage')|f(request.APP.pretty) }}">
+  <img alt="Firefox" src="{{ media('img/app-icons/med/' + icon + '.png')|safe }}">
+  {{ text }}
+</a>
+{%- endmacro %}
+{% if request.APP == amo.FIREFOX %}
+  {{ heading('Firefox', _('Add-ons'), 'firefox') }}
+{% elif request.APP == amo.THUNDERBIRD %}
+  {{ heading('Thunderbird', _('Add-ons'), 'thunderbird') }}
+{% elif request.APP == amo.MOBILE %}
+  {{ heading('Firefox Mobile', _('Mobile Add-ons'), 'firefox') }}
+{% elif request.APP == amo.SEAMONKEY %}
+  {{ heading('SeaMonkey', _('Add-ons'), 'seamonkey') }}
+{% elif request.APP == amo.SUNBIRD %}
+  {{ heading('Sunbird', _('Add-ons'), 'sunbird') }}
+{% else %}
+  {{ heading('', _('Add-ons'), 'generic') }}
+{% endif %}
+</h1>

templates/impala/search.html

@@ -0,0 +1,10 @@
+{% set search_form = SimpleSearchForm(request, search_cat) %}
+<form action="{{ url('search.search') }}">
+  <input id="search-q" type="text" name="q" required
+         class="text {% if not search_form.q.data %}placeholder{% endif %}"
+         placeholder="{{ search_form.placeholder() }}"
+         value="{{ search_form.q.data or '' }}">
+  {{ search_form.cat }}
+  <button class="search-button" type="submit" title="{{ _('Search') }}"
+         src="{{ media('img/zamboni/global/btn-search.png') }}"></button>
+</form>