personas landing page (bug 554365)

apps/browse/templates/browse/personas/base.html

@@ -1,12 +1,13 @@
 {% extends "base.html" %}
 
 {% set name = category.name if category else filter.title %}
-{% set title = _('{0} Personas')|f(name) %}
+{% set title = _('Personas') if is_homepage else _('{0} Personas')|f(name) %}
 {% set url_base = url('browse.personas', category.slug) %}
 
 {% block title %}{{ page_title(title) }}{% endblock %}
 
 {% block extrahead %}
+{% if not is_homepage %}
 <style>
   #p-{{ category.id if category else filter.field }} {
     background: url({{ MEDIA_URL }}img/zamboni/arrow-right-blue.png) no-repeat left center;
@@ -18,6 +19,7 @@
     color: inherit;
   }
 </style>
+{% endif %}
 {% endblock %}
 
 {% macro persona_categories() %}

apps/browse/templates/browse/personas/category_landing.html

@@ -17,29 +17,69 @@
 {% block content %}
 <div class="primary" role="main">
   <header>
-    {{ breadcrumbs([(url('browse.personas'), _('Personas')), (None, category.name)]) }}
+    {% if not is_homepage %}
+      {{ breadcrumbs([(url('browse.personas'), _('Personas')), (None, category.name)]) }}
+    {% endif %}
     <h2>{{ category.name }}</h2>
   </header>
-
-  {% set addons = addon_sets[special][:6] %}
-  <div id="featured-addons" class="featured personas">
-    <div class="featured-inner">
-      <h3>
-        <a href="{{ sort_link(special) }}">{{ _('Up & Coming Personas') }}</a>
-      </h3>
-      <ul class="persona-list-3col">
-        {% cache addons %}
+  {% if is_homepage %}
+    <div id="featured-addons" class="featured personas-home">
+      <div class="featured-inner">
+        <div class="col1">
+          {{ breadcrumbs() }}
+          <h2>{{ _('Personas') }}</h2>
+          <p class="intro">
+          {% trans url=url('browse.personas')|urlparams(sort=special) %}
+            Over 30,000 different designs to personalize your browser! Just move the
+            mouse over a design to try it on.
+            <a href="{{ url }}" class="more-info">Start exploring</a>
+          {% endtrans %}</p>
+        </div>
+        {% set addons = addon_sets[special][:16] %}
+        <ul class="personas-slider">
+          {% cache addons %}
           {% for addon in addons %}
             <li>{{ persona_preview(addon.persona, size='small') }}</li>
           {% endfor %}
-        {% endcache %}
-      </ul>
-      <p class="view-all">
-        <a href="{{ sort_link(special) }}">
-          {{ _('View All Up & Coming') }}</a>
-      </p>
+          {% endcache %}
+        </ul>
+      </div>
     </div>
-  </div> {# featured-addons #}
+
+    {% set addons = featured[:6] %}
+    {% if addons %}
+      <div class="personas-featured">
+        <h3>{{ _('Featured Personas') }}</h3>
+        <ul class="persona-list-3col">
+          {% cache addons %}
+            {% for addon in addons %}
+              <li>{{ persona_preview(addon.persona, size='small') }}</li>
+            {% endfor %}
+          {% endcache %}
+        </ul>
+      </div>
+    {% endif %}
+  {% else %}
+    {% set addons = addon_sets[special][:6] %}
+    <div id="featured-addons" class="featured personas">
+      <div class="featured-inner">
+        <h3>
+          <a href="{{ sort_link(special) }}">{{ _('Up & Coming Personas') }}</a>
+        </h3>
+        <ul class="persona-list-3col">
+          {% cache addons %}
+            {% for addon in addons %}
+              <li>{{ persona_preview(addon.persona, size='small') }}</li>
+            {% endfor %}
+          {% endcache %}
+        </ul>
+        <p class="view-all">
+          <a href="{{ sort_link(special) }}">
+            {{ _('View All Up & Coming') }}</a>
+        </p>
+      </div>
+    </div> {# featured-addons #}
+  {% endif %}
 
   {% for key, title in filter.opts if key != special %}
     {% set addons = addon_sets[key][:6] %}

apps/browse/templates/browse/personas/grid.html

@@ -1,8 +1,6 @@
 {% extends "browse/personas/base.html" %}
 
 
-{# TODO: without category? #}
-
 {% block content %}
 <div class="primary" role="main">
   <header>

apps/browse/views.py

@@ -271,6 +271,8 @@ def personas(request, category=None):
     categories = order_by_translation(q, 'name')
 
     base = Addon.objects.valid().filter(type=TYPE)
+    featured = base & Addon.objects.featured(request.APP)
+    is_homepage = category is None and 'sort' not in request.GET
 
     if category is not None:
         category = get_object_or_404(q, slug=category)
@@ -292,6 +294,7 @@ def personas(request, category=None):
     return jingo.render(request, 'browse/personas/' + template,
                         {'categories': categories, 'category': category,
                          'filter': filter, 'addons': addons,
+                         'featured': featured, 'is_homepage': is_homepage,
                          'search_cat': search_cat})
 
 

media/css/zamboni/zamboni.css

@@ -879,6 +879,40 @@ ul.license li.copyr { background-position: 0 -260px; }
     color: #390;
 }
 
+/** Persona Homepage **/
+.personas-featured .persona-list-3col {
+    border: 1px solid #b5d9e5;
+    -moz-border-radius: 5px;
+}
+
+.personas-home .col1 {
+    float: left;
+    clear: left;
+}
+
+.personas-home .intro {
+    font-size: 1.4em;
+    width: 450px;
+}
+
+#featured-addons.personas-home .featured-inner {
+    background: #fff url(../../img/zamboni/personas/promo-browser.png) no-repeat left bottom;
+    height: 345px;
+}
+
+.personas-home .intro .more-info {
+    background-position: 96% -151px;
+    float: none;
+}
+
+#featured-addons .personas-slider {
+    float: right;
+    height: 340px; /* 4 personas @ 85px; */
+    width: 30%;
+    overflow: hidden;
+    margin-bottom: 0;
+}
+
 /************************************/
 /*               PAGES              */
 /************************************/