collections masthead (bug 674759)

jbalogh · Jul 28, 2011 · 9754cd5 · 9754cd5
1 parent 486b85f
commit 9754cd5
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 16 deletions.
diff --git a/apps/addons/templates/addons/impala/addon_grid.html b/apps/addons/templates/addons/impala/addon_grid.html
@@ -20,7 +20,7 @@
             <h3>{{ addon.name }}</h3>
             {% with cat = addon.get_category(APP.id) %}
               {% if cat %}
-                <div class="category" class="more-info">{{ cat }}</div>
+                <div class="category more-info">{{ cat }}</div>
               {% endif %}
             {% endwith %}
             {{ vital(addon, vital_summary) }}

diff --git a/apps/bandwagon/templates/bandwagon/impala/collection_listing.html b/apps/bandwagon/templates/bandwagon/impala/collection_listing.html
@@ -12,22 +12,33 @@
 
 {% block primary %}
 <section class="primary">
+  {% if not request.GET %}
+    <masthead class="hero" id="collections-landing">
+      {{ impala_breadcrumbs([(url('i_collections.list'), _('Collections')),
+                             (None, filter.title)]) }}
+      <h2>{{ _('Collections') }}</h2>
+      <p>
+        {% trans url=url('collections.add') %}
+          Collections are groups of related add-ons that anyone can create and
+          share. Explore collections created by other users or
+          <a href="{{ url }}">create your own</a>.
+        {% endtrans %}
+      </p>
+    </masthead>
+  {% endif %}
   <div class="island hero c">
-    <header>
-      {% if request.GET %}
+    {% if request.GET %}
+      <header>
+        {{ impala_breadcrumbs([(url('i_collections.list'), _('Collections')),
+                               (None, filter.title)]) }}
         <h2>{{ title }}</h2>
-      {% else %}
-        <h2>{{ _('Collections') }}</h2>
-        <p>
-          {% trans url=url('collections.add') %}
-            Collections are groups of related add-ons that anyone can create and
-            share. Explore collections created by other users or
-            <a href="{{ url }}">create your own</a>.
-          {% endtrans %}
-        </p>
-      {% endif %}
+      </header>
+    {% endif %}
+
       {{ impala_addon_listing_header(url_base, filter.opts, sorting) }}
-    </header>
+    {% if sorting != 'featured' %}
+      {{ collections|impala_paginator }}
+    {% endif %}
     {{ impala_collection_listing_items(collections.object_list, filter.field) }}
     {% if sorting != 'featured' %}
       {{ collections|impala_paginator }}

diff --git a/media/css/impala/base.css b/media/css/impala/base.css
@@ -34,7 +34,7 @@ time, mark, audio, video {
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+footer, header, hgroup, masthead, menu, nav, section {
     display: block;
 }
 body {

diff --git a/media/css/impala/collections.less b/media/css/impala/collections.less
@@ -170,3 +170,31 @@
         margin-left: -3px;
     }
 }
+
+#collections-landing {
+    background: no-repeat 95% 30px, 0 100%;
+    background-image: url(../../img/illustrations/logo-collections-220x270.png), -moz-linear-gradient(#e4f5fb, #fff);
+    border: 1px solid @border-blue;
+    .border-radius(5px);
+    .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.3) inset, 0 0 1px rgba(0, 0, 0, 0.1));
+    margin-bottom: 15px;
+    min-height: 190px;
+    padding: 14px;
+    #breadcrumbs {
+        margin-bottom: 8px;
+    }
+    p {
+        font-size: 18px;
+        line-height: 1.3;
+        max-width: 450px;
+        padding-right: 250px;
+    }
+    h2 {
+        font-size: 36px;
+        font-weight: bold;
+    }
+}
+
+#sorter:first-child {
+    margin-top: 0;
+}
diff --git a/media/css/impala/site.less b/media/css/impala/site.less
@@ -26,7 +26,7 @@ a {
 .island {
     background: repeat scroll 0 0 transparent;
     .gradient-two-color(#FCFDFE, #F4F8FC);
-    border: 1px solid #C9DDF2;
+    border: 1px solid @border-blue;
     .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;