From bc146a0a2630ee4859e3fb1b2e54b2ded8f6dfc5 Mon Sep 17 00:00:00 2001
From: Goffin Simon <sig@odoo.com>
Date: Wed, 19 Aug 2015 10:32:57 +0200
Subject: [PATCH] [FIX] website_sale: to display alternative products

The image of an alternative product must be centered and the name
of the product must be cut with "..." if it's too long for the block
to keep the symetry for each block.

opw:647612
---
 addons/website_sale/static/src/css/website_sale.css | 4 ++++
 addons/website_sale/views/templates.xml             | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index 6a5b20e76d1..f5f7d0b4b92 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -29,6 +29,10 @@
 }
 
 /* ---- Default Styles ---- */
+
+.o_alternative_product {
+  margin: auto;
+}
 .oe_product {
   position: relative;
 }
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 5599cc6fecd..fac84edede4 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -489,10 +489,11 @@
           <t t-foreach="product.alternative_product_ids" t-as="product">
               <div class='col-md-2 thumbnail' style='width: 170px; height:130px; float:left; display:inline; margin-right: 10px;'>
                   <div class='mt16 text-center'>
-                      <span t-field="product.image_small" t-field-options='{"widget": "image", "class": "img-rounded shadow" }'/>
+                      <span t-field="product.image_small" t-field-options='{"widget": "image", "class": "img-rounded shadow o_alternative_product" }'/>
                       <h5>
                           <a t-attf-href="/shop/product/#{ slug(product) }" style="display: block">
-                              <span t-field='product.name' style="display: block"/>
+                              <span t-att-title='product.name' t-field='product.name' style="display: block; max-width:100%;
+                              overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"/>
                           </a>
                       </h5>
                   </div>