Products tile design update (#3490)

* Update Amazon CSS to new design

* Remove old JS

* Update brand class

* Move ratings into price container

* Use new showBrand variable

* Update css for --has-brand class

* More tweaks to footer styles

* Increase webkit lineclamp to 3 when no brand

* Remove absolute position, not needed

* Add CSS for mobile screens

* Remove custom CSS, moved to internal CSS

* Remove opt--t-xxs class

* Fix vertical alignment of footer elements

* Add back right float

share/spice/amazon/amazon.js

@@ -18,13 +18,6 @@
         if (api_result.results.length > 1) {
             // var itemTemplate = 'products_item';
             var itemTemplate = Spice.amazon.branded_products_item;
-            switch (DDG.page.ads && DDG.page.ads.adxExperiment) {
-                case 'prod_brand_v1':
-                    itemTemplate = Spice.amazon.branded_products_item;
-                    break;
-                default:
-                    break;
-            }
             templates = {
                 item: itemTemplate,
                 options: {
@@ -60,6 +53,7 @@
             },
             normalize: function(item) {
                 item.showBadge = item.is_prime;
+                item.showBrand = item.brand && item.brand_query;
 
                 return item;
             },

share/spice/amazon/branded_products_item.handlebars

@@ -1,27 +1,26 @@
-<div class="tile  tile--pr tile--c has-detail  tile--{{parentId}} opt--t-xxs" data-link="{{url}}">
+<div class="tile  tile--pr tile--c has-detail  tile--{{parentId}} {{#if showBrand}}tile--has-brand{{/if}}" data-link="{{url}}">
     <div class="tile__media  tile__media--pr">
         <img src="" data-src="{{{imageProxy img}}}" alt="{{title}}" class="tile__media__img  js-lazyload" />
         {{#and showBadge meta.options.badge}}{{{include meta.options.badge}}}{{/and}}
     </div>
     <div class="tile__body  tile__body--pr">
-        {{#and brand brand_query}}
-            {{{formatTitle brand el="h5" className="tile__title--brand" classNameSec="tile__title--pr" href="brand_query" optSub=true ellipsis=100}}}
-        {{/and}}
+        {{#if showBrand}}
+            {{{formatTitle brand el="h5" className="tile__title tile__title--brand" classNameSec="tile__title--pr" href="brand_query" optSub=true ellipsis=100}}}
+        {{/if}}
         {{#if url}}
             {{{formatTitle heading el="h6" className="tile__title" classNameSec="tile__title--pr" href="url" optSub=true ellipsis=100}}}
         {{else}}
-            {{{formatTitle heading el="h6" className="tile__title" classNameSec="tile__title--pr" optSub=true ellipsis=100}}}
+            {{{formatTitle heading el="h6" className="tile__title" classNameSec="tile__title--pr" optSub=true   ellipsis=100}}}
         {{/if}}
-    <div class="tile__tx  tile--pr__sub  one-line">
+    <div class="tile--pr__sub  one-line">
         {{#and meta.options.price price}}
-            <span class="tile--pr__price  price">{{price}}</span>
+            <span class="tile--pr__price  price  pull-left">{{price}}</span>
         {{/and}}
-    </div>
         {{#if meta.options.rating}}
-        <div class="tile__tx  tile__rating  one-line">
-            {{{starsAndReviews rating reviewCount url_review true}}}
-        </div>
+            <span class="tile--pr__rating  tile__rating  pull-right">
+                {{{starsAndReviews rating reviewCount url_review true}}}
+            </span>
         {{/if}}
     </div>
+    </div>
 </div>
-