listing button, tabular-grid styles (bug 679520)

mozilla · Aug 18, 2011 · 98fd9fe · 98fd9fe
1 parent e97ace1
commit 98fd9fe
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 47 deletions.
diff --git a/apps/bandwagon/templates/bandwagon/impala/collection_listing.html b/apps/bandwagon/templates/bandwagon/impala/collection_listing.html
@@ -29,14 +29,11 @@ <h1>{{ _('Collections') }}</h1>
       </p>
     </masthead>
   {% endif %}
-  <div class="island hero c listing">
-    <header>
-      {{ 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) }}
+  <div class="island hero c listing collections-listing">
+    {{ impala_addon_listing_header(url_base, filter.opts, sorting) }}
+    <div class="items">
+      {{ impala_collection_listing_items(collections.object_list, filter.field) }}
+    </div>
     {% if sorting != 'featured' %}
       {{ collections|impala_paginator }}
     {% endif %}

diff --git a/apps/browse/templates/browse/impala/extensions.html b/apps/browse/templates/browse/impala/extensions.html
@@ -30,12 +30,12 @@
     <h1>{{ category.name if category else heading }}</h1>
   {% endwith %}
   <div class="island hero c listing">
-    <header>
-      <a href="{{ feed_url }}" class="feed">{{ _('Subscribe') }}</a>
-      {{ impala_addon_listing_header(url_base, extras, sorting) }}
-    </header>
-    {{ impala_addon_listing_items(addons.object_list, src='category',
-                                  show_date=sorting) }}
+    <a href="{{ feed_url }}" id="subscribe">{{ _('Subscribe') }}</a>
+    {{ impala_addon_listing_header(url_base, extras, sorting) }}
+    <div class="items">
+      {{ impala_addon_listing_items(addons.object_list, src='category',
+                                    show_date=sorting) }}
+    </div>
     {% if sorting != 'featured' %}
       {{ addons|impala_paginator }}
     {% endif %}

diff --git a/media/css/impala/addon_details.less b/media/css/impala/addon_details.less
@@ -49,6 +49,13 @@
     white-space: nowrap;
 }
 
+.html-rtl #addon .notavail,
+.html-rtl #eula .notavail,
+.html-rtl .listing .notavail {
+    background-position: 100% 30%;
+    padding: 1px 18px 1px 0;
+}
+
 .version-number {
     color: #999;
     font-size: .8em;
@@ -414,7 +421,7 @@ span.featured {
     color: #fff;
     display: inline-block;
     font: bold 9px/11px Arial;
-    margin-left: 4px;
+    margin: 4px 0 0 4px;
     padding: 3px 6px;
     text-transform: uppercase;
     vertical-align: 3px;

diff --git a/media/css/impala/collections.less b/media/css/impala/collections.less
@@ -128,11 +128,8 @@
             .is-watching {
                 display: block;
                 font: 13px/13px @head-sans;
-                float: right;
                 padding: 7px 10px;
                 position: absolute;
-                right: 25px;
-                text-align: right;
             }
             a {
                 visibility: hidden;

diff --git a/media/css/impala/listing.less b/media/css/impala/listing.less
@@ -1,13 +1,13 @@
 @import 'lib';
 
-header .feed {
+#subscribe {
     /* TODO(cvan): sprite-ify */
     background: url(../../img/impala/feed.png) no-repeat 0 50%;
     float: right;
     padding-left: 16px;
 }
 
-.html-rtl header .feed {
+.html-rtl #subscribe {
     float: left;
 }
 
@@ -35,7 +35,6 @@ header .feed {
 }
 
 .html-rtl #sorter {
-    float: right;
     li {
         float: right;
         &:first-child + li a {
@@ -55,11 +54,13 @@ header .feed {
     font: bold 24px @sans-stack;
 }
 
+.listing .items {
+    display: table;
+}
+
 .listing .item {
-    border-top: 1px dotted @border-blue;
     color: @note-gray;
-    display: table;
-    padding: 20px 0;
+    display: table-row;
     width: 100%;
     &:hover,
     &.static {
@@ -74,7 +75,8 @@ header .feed {
                 color: @error-red;
             }
         }
-        .info {
+        .info,
+        .action {
             opacity: 0.4;
         }
         .install-shell {
@@ -134,30 +136,28 @@ header .feed {
     }
     .info,
     .action {
+        border-top: 1px dotted @border-blue;
         display: table-cell;
+        padding: 20px 0;
     }
     .info {
         padding-left: 58px;
     }
-    .action {
-        min-width: 190px;
-    }
     .install-shell {
-        text-align: right;
         padding: 0 10px;
         visibility: hidden;
         p {
             margin: 0;
         }
+        .extra {
+            margin: 0;
+            .notavail {
+                color: @note-gray;
+            }
+        }
         .button, .extra {
             white-space: nowrap;
         }
-        .install-note {
-            text-align: left;
-        }
-        .extra .notavail {
-            color: @note-gray;
-        }
     }
     .collector-note,
     .performance-note {
@@ -172,31 +172,29 @@ header .feed {
         color: #666;
     }
 }
-.paginator + .item {
+
+.paginator + .item,
+#sorter + .items {
     margin-top: 1em;
 }
-header + .paginator,
-.item + .paginator {
+
+.item + .paginator,
+.items + .paginator {
     padding-top: 1em;
     border-top: 1px dotted @border-blue;
 }
 
-.html-rtl.listing .primary .item {
+.html-rtl .listing .item {
     .collector-note,
     .performance-note {
         float: right;
     }
     h3 img {
+        left: auto;
         right: 25px;
     }
     .info {
-        padding: 0 58px 0 0;
-    }
-    .install-shell {
-        text-align: left;
-        .install-note {
-            text-align: right;
-        }
+        padding: 20px 58px 20px 0;
     }
 }
 

diff --git a/media/css/impala/paginator.less b/media/css/impala/paginator.less
@@ -1,5 +1,4 @@
 .paginator {
-    margin-top: 1em;
     .disabled {
         opacity: 0.25;
         pointer-events: none;