show 16px icons for creatured apps (bug 784557)

Author: cvan

media/css/mkt/tile.less

@@ -31,17 +31,72 @@
 }
 
 .product-details .mkt-tile .icon.mobile_tile,
-.listing .mkt-tile .icon.mobile_tile {
+.listing .mkt-tile .icon.mobile_tile,
+.mkt-tile .icon.featured_tile {
     display: none;
 }
 
+.creatured .mkt-tile .icon,
 .featured .mkt-tile .icon {
     display: none;
     &.mobile_tile {
         display: block;
     }
 }
 
+@media (max-width: 480px) {
+    .creatured .grid,
+    .creatured .grid li {
+        padding: 0;
+    }
+    .creatured .grid li + li {
+        border-left: 1px solid rgba(0,0,0,.4);
+    }
+    .creatured .grid {
+        .mkt-tile {
+            background: @grain-src darken(@grain, 15%);
+            .info, &:hover .info, &:active .info {
+                background: transparent;
+            }
+            &:hover {
+                background-color: darken(@grain, 12%);
+            }
+            &:active {
+                .depressed;
+            }
+            .info {
+                .box-shadow(none);
+                height: auto;
+                position: static;
+            }
+            h3 {
+                color: @white;
+                padding-left: 18px;
+            }
+            .rating {
+                color: @medium-gray;
+                font-size: 11px;
+            }
+            canvas {
+                display: none;
+            }
+            .icon {
+                &.featured_tile {
+                    display: block;
+                    position: absolute;
+                    top: 6px;
+                    left: 2px;
+                    height: 16px;
+                    width: 16px;
+                }
+                &.mobile_tile {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
 // Listing
 // name + icon + price + rating in a vertical listview.
 // also used as standalone "card" on detail pages.

migrations/481-generate-featured-image-assets.py

@@ -0,0 +1,12 @@
+from amo.utils import chunked
+
+from mkt.developers.tasks import generate_image_assets
+from mkt.webapps.models import Webapp
+
+
+def run():
+    """Generate featured tiles."""
+    for chunk in chunked(Webapp.objects.all(), 50):
+        for app in chunk:
+            generate_image_assets.delay(app, slug='featured_tile')
+            print u'Generated feature tile for %s' % app

mkt/constants/submit.py

@@ -11,13 +11,20 @@
 
 # The sizes for the image assets for apps.
 APP_IMAGE_SIZES = [
+    {'size': (32, 32),
+     'has_background': False,
+     'required': False,
+     'slug': 'featured_tile',
+     'name': 'Featured Tile',
+     'description': _("The icon shown when your app is featured at the top of "
+                      "category landing pages.")},
     {'size': (106, 106),
      'has_background': False,
      'required': False,
      'slug': 'mobile_tile',
      'name': 'Mobile Tile',
-     'description': _("The image that's actually used for the app's tile in "
-                      "the Marketplace.")},
+     'description': _("The image used for the app's tile in the mobile "
+                      "Marketplace.")},
     {'size': (150, 130),
      'has_background': False,
      'required': False,

mkt/developers/tasks.py

@@ -228,7 +228,12 @@ def generate_image_assets(addon, **kw):
 
     backdrop = _generate_image_asset_backdrop(icon_hue, biggest_size)
 
+    # Sometimes you want to regenerate only assets of a particular type.
+    slug = kw.get('slug')
+
     for asset in APP_IMAGE_SIZES:
+        if slug and slug != asset['slug']:
+            continue
         try:
             generate_image_asset(addon, asset, icon, hue=icon_hue,
                                  backdrop=backdrop.copy(), **kw)
@@ -263,8 +268,13 @@ def generate_image_asset(addon, asset, icon, **kw):
 
     # Get a copy of the icon.
     asset_icon = icon.copy()
-    # The icon will be 95% of the size of the shortest edge of the asset.
-    min_edge = int(min(asset['size']) * 0.75)
+
+    # The icon will be 75% of the size of the shortest edge of the asset if
+    # larger than 32px.
+    min_edge = min(asset['size'])
+    if min_edge > 32:
+        min_edge = int(min_edge * 0.75)
+
     if min_edge < asset_icon.size[0]:
         asset_icon = asset_icon.resize((min_edge, min_edge), Image.ANTIALIAS)
 

mkt/developers/tests/test_tasks.py

@@ -89,7 +89,7 @@ def _uploader(resize_size, final_size):
             with storage.open("%s-%s.png" % (dest_name, rsize)) as fp:
                 dest_image = Image.open(fp)
                 dest_image.load()
-        
+
             # Assert that the width is always identical.
             eq_(dest_image.size[0], fsize[0])
             # Assert that the height can be a wee bit fuzzy.
@@ -106,7 +106,7 @@ def _uploader(resize_size, final_size):
         with storage.open(dest.name) as fp:
             dest_image = Image.open(fp)
             dest_image.load()
-        
+
         # Assert that the width is always identical.
         eq_(dest_image.size[0], final_size[0])
         # Assert that the height can be a wee bit fuzzy.
@@ -124,7 +124,7 @@ def test_resize_image_asset():
         src_image = Image.open(fp)
         eq_(src_image.size, original_size)
 
-    dest = tempfile.NamedTemporaryFile(mode='r+w+b', suffix=".png")
+    dest = tempfile.NamedTemporaryFile(mode='r+w+b', suffix='.png')
     # Make it resize to some arbitrary size that's larger on both sides than
     # the source image. This is where the behavior differs from resize_image.
     tasks.resize_imageasset(img, dest.name, (500, 500), locally=True)
@@ -195,7 +195,6 @@ def _mock_hide_64px_icon(path, *args, **kwargs):
 
 class TestGenerateImageAssets(amo.tests.TestCase):
     """Test that image assets get generated properly."""
-
     fixtures = ['webapps/337141-steamcube']
 
     def setUp(self):
@@ -213,6 +212,20 @@ def test_generated_image_assets(self):
                 im.load()
             eq_(im.size, asset['size'])
 
+    def test_generated_image_assets_slug(self):
+        # We're going to generate assets for only one type.
+        asset = APP_IMAGE_SIZES[0]
+        slug = asset['slug']
+
+        tasks.generate_image_assets(self.app, slug=slug)
+        ia = ImageAsset.objects.filter(addon=self.app)
+        eq_(list(a.slug for a in ia), [slug])
+
+        with storage.open(ia[0].image_path) as fp:
+            im = Image.open(fp)
+            im.load()
+        eq_(im.size, asset['size'])
+
     @mock.patch('django.core.files.storage.default_storage.open',
                 _mock_hide_64px_icon)
     def test_use_64(self):

mkt/search/templates/search/results.html

@@ -110,16 +110,18 @@ <h2>{{ _('Sort by') }}</h2>
       </form>
     </div>
   </section>
-  <section id="search-results" class="full c">
+  <section id="featured" class="creatured full c">
     {% if featured %}
-      <ol class="grid featured c">
+      <ol class="grid c">
         {% for app in featured %}
           <li>
             {{ market_tile(app, src=src + '-featured') }}
           </li>
         {% endfor %}
       </ol>
     {% endif %}
+  </section>
+  <section id="search-results" class="full c">
     {% if pager.object_list %}
       <ol class="listing c" start="{{ pager.start_index() }}">
         {{ search_results(pager.object_list, field=query.sort, src=src) }}

mkt/site/templates/site/tiles/app.html

@@ -7,6 +7,7 @@
 <{{ tag }} class="{{ classes }}"
   {% if link %}href="{{ product.get_url_path()|urlparams(src=data_attrs.src) }}"{% endif %}
   {% for k, v in data_attrs.items() %} data-{{ k }}="{{ v }}"{% endfor %}>
+  <div class="icon featured_tile" style="background-image:url({{ product.get_image_asset_url('featured_tile', 16) }})"></div>
   <img class="icon mobile_tile" alt="{{ _('icon') }}"
        src="{{ product.get_image_asset_url('mobile_tile') }}"
        data-hue="{{ product.get_image_asset_hue('mobile_tile') }}">

mkt/webapps/models.py

@@ -219,7 +219,7 @@ def get_stats_inapp_url(self, action='revenue', inapp='', args=None):
                            args=[self.app_slug, urlquote(inapp)])
         return url
 
-    def get_image_asset_url(self, slug):
+    def get_image_asset_url(self, slug, default=64):
         """
         Returns the URL for an app's image asset that uses the slug specified
         by `slug`.
@@ -231,7 +231,7 @@ def get_image_asset_url(self, slug):
         try:
             return ImageAsset.objects.get(addon=self, slug=slug).image_url
         except ImageAsset.DoesNotExist:
-            return settings.MEDIA_URL + 'img/hub/default-64.png'
+            return settings.MEDIA_URL + 'img/hub/default-%s.png' % str(default)
 
     def get_image_asset_hue(self, slug):
         """