enhance upsell block with more information and colour (bug 746475)

media/css/mkt/buttons.less

@@ -10,6 +10,10 @@
 @btn-g-dark: darken(spin(@btn-g, 3), 8%);
 @btn-g-lite: saturate(spin(@btn-g, 4), 60%);
 
+@btn-o: lighten(spin(@btn-r, 30), 0%);
+@btn-o-dark: darken(spin(@btn-o, 3), 8%);
+@btn-o-lite: saturate(spin(@btn-o, 4), 60%);
+
 .button, button {
     .gradient-two-color(@btn-b, @btn-b-dark);
     .border-radius(4px);
@@ -32,6 +36,17 @@
                         inset 0 12px 24px 2px @btn-g-lite);
         }
     }
+    &.special {
+        .box-shadow(0 2px 0 0 rgba(0,0,0,.1),
+                    inset 0 -2px 0 0 rgba(0,0,0,.1),
+                    inset 0 12px 24px 2px darken(@btn-o-lite, 10%));
+        .gradient-two-color(@btn-r, @btn-r-dark);
+        &:hover {
+            .box-shadow(0 2px 0 0 rgba(0,0,0,.1),
+                        inset 0 -2px 0 0 rgba(0,0,0,.2),
+                        inset 0 12px 24px 2px @btn-o-lite);
+        }
+    }
     &.delete, &.manage {
         .gradient-two-color(@btn-r, @btn-r-dark);
         &:hover {

media/css/mkt/detail.less

@@ -108,25 +108,28 @@ h1 .num {
         color: darken(@yellow, 75%);
         font-size: 16px;
         font-weight: bold;
+        margin-bottom: 10px;
     }
-    .upsell,
-    .product {
-        margin: 15px 0;
+    h3, .upsell, .prose, .vitals {
+        padding-left: 45px;
+        width: 75%;
     }
     .upsell {
         .ellipsis;
         display: block;
         float: left;
         font-weight: 200;
         font-size: 21px;
-        line-height: 24px;
-        padding: 5px 0 5px 45px;
+        min-height: 35px;
+        line-height: 32px;
         position: relative;
-        width: 75%;
     }
-    .product {
+    .special {
+        .border-box;
+        .width(2);
+        display: block;
         float: right;
-        .width(1);
+        max-width: 20%;
     }
     .icon {
         display: inline-block;
@@ -138,15 +141,24 @@ h1 .num {
     }
     .prose {
         color: @medium-gray;
+        margin-bottom: 10px;
     }
 }
 
 .html-rtl #upsell {
+    h3, .upsell, .prose, .vitals {
+        padding: 0 45px 0 0;
+    }
     .upsell {
-        padding: 5px 45px 5px 0;
+        float: right;
+    }
+    .special {
+        float: left;
     }
     .icon {
         margin: 0 0 0 15px;
+        right: 0;
+        left: auto;
     }
 }
 

media/css/mkt/search.less

@@ -66,6 +66,47 @@
     text-align: center;
 }
 
+.vitals {
+    font-size: 11px;
+    span {
+        display: inline-block;
+        + .vital, + .rating {
+            &:before {
+                color: @note-gray;
+                content: "\00B7";
+            }
+        }
+    }
+    .downloads,
+    .price {
+        color: @green;
+    }
+    .price {
+        background: fadeOut(@green, 40%);
+        color: fadeOut(@white, 5%);
+        height: 16px;
+        font-weight: bold;
+        margin: 0 2px 0 8px;
+        padding: 0 4px 0 3px;
+        position: relative;
+        &:after {
+            border: 8px solid transparent;
+            border-right-color: fadeOut(@green, 40%);
+            content: "\00b0";  /* degree sign */
+            color: fadeOut(@white, 60%);
+            font-size: 8px;
+            line-height: 3px;
+            margin: 0 4px 0 -16px;
+            position: absolute;
+            text-indent: 5px;
+            top: 0;
+            left: 0;
+            height: 0;
+            width: 0;
+        }
+    }
+}
+
 .listing {
     p {
         margin: 5px 0;
@@ -97,46 +138,6 @@
         h3 a {
             display: block;
         }
-        .vitals {
-            font-size: 11px;
-            span {
-                display: inline-block;
-                + .vital, + .rating {
-                    &:before {
-                        color: @note-gray;
-                        content: "\00B7";
-                    }
-                }
-            }
-        }
-        .downloads,
-        .price {
-            color: @green;
-        }
-        .price {
-            background: fadeOut(@green, 40%);
-            color: fadeOut(@white, 5%);
-            height: 16px;
-            font-weight: bold;
-            margin: 0 2px 0 8px;
-            padding: 0 4px 0 3px;
-            position: relative;
-            &:after {
-                border: 8px solid transparent;
-                border-right-color: fadeOut(@green, 40%);
-                content: "\00b0";  /* degree sign */
-                color: fadeOut(@white, 60%);
-                font-size: 8px;
-                line-height: 3px;
-                margin: 0 4px 0 -16px;
-                position: absolute;
-                text-indent: 5px;
-                top: 0;
-                left: 0;
-                height: 0;
-                width: 0;
-            }
-        }
         .rating {
             color: @gray;
         }

mkt/browse/templates/browse/helpers/promo_grid.html

@@ -9,7 +9,7 @@ <h3>{{ product.name }}</h3>
             {% if product.listed_authors %}
               <em class="author">{{ product.listed_authors[0].name }}</em>
             {% endif %}
-            <p class="price">{{ product|price_label }}</p>
+            <p class="price">{{ product.get_price() }}</p>
           </a>
         </li>
       {% endfor %}

mkt/browse/templates/browse/helpers/promo_slider.html

@@ -17,7 +17,7 @@
             <img src="{{ preview }}">
             <h3>{{ product.name }}</h3>
             <p>
-              {{ product|price_label }}
+              {{ product.get_price() }}
             </p>
           </a>
         </li>

mkt/detail/helpers.py

@@ -1,7 +1,11 @@
-from addons.models import DeviceType
 from jingo import env, register
 import jinja2
 
+from tower import ungettext as ngettext
+
+from addons.models import DeviceType
+from amo.helpers import numberfmt
+
 
 @register.function
 def device_list(product):
@@ -10,4 +14,11 @@ def device_list(product):
     if device_types:
         t = env.get_template('detail/helpers/device_list.html')
         return jinja2.Markup(t.render(device_types=device_types,
-        							  all_device_types=all_device_types))
+                                      all_device_types=all_device_types))
+
+
+@register.filter
+def weekly_downloads(product):
+    cnt = product.weekly_downloads
+    return ngettext('{0} weekly download', '{0} weekly downloads',
+                    cnt).format(numberfmt(cnt))

mkt/detail/templates/detail/app.html

@@ -46,12 +46,7 @@ <h1>
       </h1>
       <h2 class="authors">{{ users_list(product.listed_authors, size=3) }}</h2>
       <p class="downloads">
-        {% trans cnt=product.weekly_downloads,
-                 num=product.weekly_downloads|numberfmt %}
-          {{ num }} weekly download
-        {% pluralize %}
-          {{ num }} weekly downloads
-        {% endtrans %}
+        {{ product|weekly_downloads }}
       </p>
       {{ device_list(product) }}
       {% set categories = product.all_categories %}
@@ -103,18 +98,25 @@ <h3 class="hidden">{{ _('Categories') }}</h3>
 
   {% set upsell = product.upsell %}
   {% if upsell %}
+    {% set prm = upsell.premium %}
     <section id="upsell" class="notification-box full">
       <div class="c">
         <h3>{{ _('Premium version available') }}</h3>
-          {% with prm = upsell.premium %}
-            <a href="{{ prm.get_url_path() }}" class="upsell">
-              <img class="icon" src="{{ prm.get_icon_url(16) }}">{{ prm.name }}</a>
-              {% if prm.is_public() %}
-                {{ market_button(prm) }}
-              {% endif %}
-          {% endwith %}
+        <a href="{{ prm.get_url_path() }}" class="upsell">
+          <img class="icon" src="{{ prm.get_icon_url(32) }}">{{ prm.name }}</a>
+          <a class="button special" href="{{ prm.get_url_path()|urlparams(src='mkt-detail-upsell') }}">
+            {{ _('Read More') }}
+          </a>
+      </div>
+      <div class="details">
+        <div class="prose">{{ upsell.text|nl2br }}</div>
+        <div class="vitals">
+          <span class="vital price">{{ prm.get_price() }}</span>
+          <span class="vital downloads">
+            {{ prm|weekly_downloads }}
+          </span>
+        </div>
       </div>
-      <div class="prose">{{ upsell.text|nl2br }}</div>
     </section>
   {% endif %}
 

mkt/detail/tests/test_views.py

@@ -10,7 +10,7 @@
 from tower import strip_whitespace
 
 import amo
-from amo.helpers import external_url
+from amo.helpers import external_url, numberfmt
 import amo.tests
 from addons.models import AddonCategory, AddonUpsell, AddonUser, Category
 from market.models import PreApprovalUser
@@ -160,8 +160,11 @@ def test_upsell(self):
         eq_(upsell.length, 1)
         eq_(upsell.find('.upsell').text(), unicode(premie.name))
         eq_(upsell.find('.icon').attr('src'), premie.get_icon_url(16))
-        eq_(upsell.find('.product').attr('data-manifesturl'),
-            premie.manifest_url)
+        eq_(upsell.find('.special').attr('href'),
+            premie.get_url_path() + '?src=mkt-detail-upsell')
+        eq_(upsell.find('.price').text(), premie.get_price())
+        eq_(upsell.find('.downloads').text().split(' ')[0],
+            numberfmt(premie.weekly_downloads))
         eq_(upsell.find('.prose').text(), 'XXX')
 
     def test_no_summary_no_description(self):

mkt/search/templates/search/helpers/product_info.html

@@ -1,12 +1,7 @@
-{% from 'addons/macros.html' import price %}
 {% macro sort_vital(addon, field) %}
   {% if field not in ('created', 'updated') %}
     <span class="vital downloads">
-      {% with num=addon.weekly_downloads %}
-        {# L10n: {0} is the number of downloads. #}
-        {{ ngettext('{0} weekly download', '{0} weekly downloads',
-                    num)|f(num|numberfmt) }}
-      {% endwith %}
+      {{ addon|weekly_downloads }}
     </span>
   {% endif %}
   {% if field in ('created', 'updated') %}
@@ -33,7 +28,7 @@ <h3>
 </h3>
 <p class="desc">{{ product.summary|nl2br }}</p>
 <div class="vitals c">
-  {{ price(product) }}
+  <span class="vital price">{{ product.get_price() }}</span>
   {% with cats = product.all_categories %}
     {% if cats %}
       <span class="vital">

mkt/site/helpers.py

@@ -37,7 +37,7 @@ def market_button(context, product):
             (context['is_reviewer'] or context['is_admin'])):
             purchased = faked_purchase = True
         classes = ['button', 'product']
-        label = price_label(product)
+        label = product.get_price()
         product_dict = product_as_dict(request, product, purchased=purchased)
         data_attrs = {
             'product': json.dumps(product_dict, cls=JSONEncoder),
@@ -146,13 +146,6 @@ def mkt_breadcrumbs(context, product=None, items=None, crumb_size=40,
     return jinja2.Markup(t)
 
 
-@register.filter
-def price_label(product):
-    if product.is_premium() and product.premium:
-        return product.premium.get_price_locale()
-    return _('FREE')
-
-
 @register.function
 def form_field(field, label=None, tag='div', req=None, opt=False, hint=False,
                some_html=False, cc_startswith=None, cc_maxlength=None,

mkt/webapps/models.py

@@ -12,6 +12,7 @@
 from django.dispatch import receiver
 
 import commonware.log
+from tower import ugettext as _
 
 import amo
 from amo.decorators import skip_cache
@@ -204,6 +205,11 @@ def is_purchased(self, user):
     def is_pending(self):
         return self.status == amo.STATUS_PENDING
 
+    def get_price(self):
+        if self.is_premium() and self.premium:
+            return self.premium.get_price_locale()
+        return _(u'FREE')
+
     @classmethod
     def featured_collection(cls, group):
         try: