From 689fcb005d5f07a4e2b50fed5e32e29b4511c30b Mon Sep 17 00:00:00 2001
From: TMMeilleur <sasha2510203@gmail.com>
Date: Wed, 4 Dec 2013 10:08:35 +0200
Subject: [PATCH] small fixes

---
 modules/crossselling/crossselling.php         |   4 +-
 modules/themeconfigurator/views/css/admin.css |   3 +-
 modules/themeconfigurator/views/js/admin.js   |   4 +-
 .../views/templates/admin/items.tpl           |  27 ++-
 themes/default-bootstrap/css/scenes.css       | 162 +++++++-----------
 themes/default-bootstrap/js/scenes.js         |  21 ---
 themes/default-bootstrap/sass/scenes.scss     | 154 +++++++----------
 themes/default-bootstrap/scenes.tpl           |  34 ++--
 8 files changed, 171 insertions(+), 238 deletions(-)

diff --git a/modules/crossselling/crossselling.php b/modules/crossselling/crossselling.php
index 5f386cb09..4a50bf463 100755
--- a/modules/crossselling/crossselling.php
+++ b/modules/crossselling/crossselling.php
@@ -158,7 +158,7 @@ class CrossSelling extends Module
 				$taxCalc = Product::getTaxCalculationMethod();
 				foreach ($orderProducts AS &$orderProduct)
 				{
-					$orderProduct['image'] = $this->context->link->getImageLink($orderProduct['link_rewrite'], (int)$orderProduct['product_id'].'-'.(int)$orderProduct['id_image'], ImageType::getFormatedName('medium'));
+					$orderProduct['image'] = $this->context->link->getImageLink($orderProduct['link_rewrite'], (int)$orderProduct['product_id'].'-'.(int)$orderProduct['id_image'], ImageType::getFormatedName('home'));
 					$orderProduct['link'] = $this->context->link->getProductLink((int)$orderProduct['product_id'], $orderProduct['link_rewrite'], $orderProduct['category'], $orderProduct['ean13']);
 					if (Configuration::get('CROSSSELLING_DISPLAY_PRICE') AND ($taxCalc == 0 OR $taxCalc == 2))
 						$orderProduct['displayed_price'] = Product::getPriceStatic((int)$orderProduct['product_id'], true, NULL);
@@ -215,7 +215,7 @@ class CrossSelling extends Module
 				$taxCalc = Product::getTaxCalculationMethod();
 				foreach ($orderProducts AS &$orderProduct)
 				{
-					$orderProduct['image'] = $this->context->link->getImageLink($orderProduct['link_rewrite'], (int)$orderProduct['product_id'].'-'.(int)$orderProduct['id_image'], ImageType::getFormatedName('medium'));
+					$orderProduct['image'] = $this->context->link->getImageLink($orderProduct['link_rewrite'], (int)$orderProduct['product_id'].'-'.(int)$orderProduct['id_image'], ImageType::getFormatedName('home'));
 					$orderProduct['link'] = $this->context->link->getProductLink((int)$orderProduct['product_id'], $orderProduct['link_rewrite'], $orderProduct['category'], $orderProduct['ean13']);
 					if (Configuration::get('CROSSSELLING_DISPLAY_PRICE') AND ($taxCalc == 0 OR $taxCalc == 2))
 						$orderProduct['displayed_price'] = Product::getPriceStatic((int)$orderProduct['product_id'], true, NULL);
diff --git a/modules/themeconfigurator/views/css/admin.css b/modules/themeconfigurator/views/css/admin.css
index f68e3251e..cb1838162 100644
--- a/modules/themeconfigurator/views/css/admin.css
+++ b/modules/themeconfigurator/views/css/admin.css
@@ -56,7 +56,7 @@
 }
 .lang-items {
 	position:relative;
-	z-index:0;
+	z-index:1;
 	background:#f4f4f4;
 	border:1px solid #e9e9e9;
 	margin-top:-1px;
@@ -168,3 +168,4 @@ h4.hook-title {
 .item .displayed_flag, .new-item .displayed_flag {
 	margin:0 0 0 10px;
 }
+.item .normal { font-weight:normal;}
\ No newline at end of file
diff --git a/modules/themeconfigurator/views/js/admin.js b/modules/themeconfigurator/views/js/admin.js
index d2f7a8a02..e092eecc1 100644
--- a/modules/themeconfigurator/views/js/admin.js
+++ b/modules/themeconfigurator/views/js/admin.js
@@ -4,11 +4,11 @@ jQuery(document).ready(function() {
 		item_container.toggleClass('active').children('.item-container').slideToggle();
 	});
 	$('.button-edit').click(function() {
-		var item_container = $(this).parent('.item');
+		var item_container = $(this).parents('.item');
 		item_container.toggleClass('active').children('.item-container').slideToggle();
 	});
 	$('.button-close').click(function() {
-		var item_container = $(this).parent('.item');
+		var item_container = $(this).parents('.item');
 		item_container.toggleClass('active').children('.item-container').slideToggle();
 	});	
 	
diff --git a/modules/themeconfigurator/views/templates/admin/items.tpl b/modules/themeconfigurator/views/templates/admin/items.tpl
index a6a997ddf..2e9f3b19f 100644
--- a/modules/themeconfigurator/views/templates/admin/items.tpl
+++ b/modules/themeconfigurator/views/templates/admin/items.tpl
@@ -14,12 +14,33 @@
             <ul id="items">
                 {foreach name=items from=$hookItems item=hItem}
                     <li id="item-{$hItem.id_item}" class="item panel">
-                        <span class="item-order">{if $hItem.item_order le 9}0{/if}{$hItem.item_order}</span>
-                        {if $hItem.image}<span><img src="{$module_dir}images/{$hItem.image}" alt="" title="" class="preview" /></span>{/if}
+                    	<div class="clearfix">
+                        <span class="item-order pull-left">{if $hItem.item_order le 9}0{/if}{$hItem.item_order}</span>
+                        {if $hItem.image}
+                        	
+                        	<span class="pull-left">
+                            	<img width="130" src="{$module_dir}images/{$hItem.image}" rel="#comments_{$hItem.id_item}" alt="" title="" class="preview" />
+                            	<br /><small class="normal">{l s='Click image to enlarge/reduce' mod='themeconfigurator'}</small>
+                            </span>
+                            <script type="text/javascript">
+								$(document).ready(function() {
+									var htmlContent = $('#comments_{$hItem.id_item}').html();
+									$("[rel=#comments_{$hItem.id_item}]").popover({
+										placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
+										title : false, //this is the top title bar of the popover. add some basic css
+										html: 'true', //needed to show html of course
+										content : htmlContent  //this is the content of the html box. add the image here or anything you want really.
+									});
+								});
+							</script>
+                            <div style="display:none" id="comments_{$hItem.id_item}">   
+                            	<img class="img-responsive" src="{$module_dir}images/{$hItem.image}" alt="" title="" class="preview" />
+                            </div>
+                        {/if}
                         <span class="item-title">{$hItem.title}</span>
                         <span class="button btn btn-default button-edit pull-right"><i class="icon-edit"></i>{l s='Edit' mod='themeconfigurator'}</span>
                         <span class="button btn btn-default button-close pull-right"><i class="icon-remove"></i>{l s='Close' mod='themeconfigurator'}</span>
-                        
+                        </div>
                         <div class="item-container">
                             <form method="post" action="{$htmlitems.postAction}" enctype="multipart/form-data" class="item-form defaultForm  form-horizontal">
                             	 <input type="hidden" name="id_lang" value="{$lang}" />
diff --git a/themes/default-bootstrap/css/scenes.css b/themes/default-bootstrap/css/scenes.css
index 84ef84c77..e7db34dc4 100644
--- a/themes/default-bootstrap/css/scenes.css
+++ b/themes/default-bootstrap/css/scenes.css
@@ -1,24 +1,24 @@
 /*TMP*/
-#scenes .cluetip span {
-  background: transparent url(../img/icon/cible.gif) no-repeat scroll center center;
-  color: black;
+#scenes .popover-button span {
   display: block;
-  font-size: 1.1em;
-  font-weight: bold;
-  height: 23px;
-  padding-top: 5px;
+  font-size: 28px;
   text-align: center;
-  width: 23px;
+}
+#scenes .popover-button span:before {
+  content: "";
+  font-family: "FontAwesome";
+  display: block;
+  vertical-align: 5px;
 }
 
 /*TMP*/
 .thumbs_banner {
   margin: 10px auto;
-  padding: 2px 0;
-  height: 60px !important;
+  padding: 0px 0;
+  height: 62px !important;
   width: 100%;
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+  border-top: 1px solid #d6d4d4;
+  border-bottom: 1px solid #d6d4d4;
 }
 
 .thumbs_banner .space-keeper {
@@ -31,16 +31,22 @@
 .thumbs_banner .space-keeper a.prev {
   display: none;
   width: 21px;
-  text-align: center;
-  font-size: 1.5em;
+  background: #fbfbfb;
   text-decoration: none;
-  background: url(../img/icon/serial_scroll_left.gif) no-repeat 0 0 #eeeeee;
+  color: #333333;
+}
+.thumbs_banner .space-keeper a.prev:before {
+  font-family: "FontAwesome";
+  content: "";
+  vertical-align: middle;
+  padding-top: 35px;
+  padding-left: 5px;
 }
 
 #scenes_list {
   overflow: hidden;
   float: left;
-  width: 478px;
+  width: 828px;
 }
 
 #scenes_list ul {
@@ -59,101 +65,51 @@
   float: left;
   display: block;
   width: 21px;
-  text-align: center;
-  font-size: 1.5em;
+  width: 21px;
+  background: #fbfbfb;
   text-decoration: none;
-  background: url(../img/icon/serial_scroll_right.gif) no-repeat 0 0 #dddddd;
+  color: #333333;
+}
+.thumbs_banner a.next:before {
+  font-family: "FontAwesome";
+  content: "";
+  vertical-align: middle;
+  padding-top: 35px;
+  padding-left: 5px;
 }
 
-/* Cluetip design ****************************************************************************** */
-#scenes .screen_scene {
-  margin: 0 auto;
-}
-
-#scenes a.cluetip {
+#scenes a.popover-button {
   display: block;
   position: absolute;
   text-decoration: none;
 }
 
-.cluetip-product_scene {
-  padding: 10px;
-  border: 7px solid #999;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  text-align: left;
-  background: white;
-  opacity: 0.95;
+#scenes .popover {
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  border-color: #d6d4d4;
+}
+#scenes .product-image-container, #scenes .product-name {
+  margin-bottom: 15px;
+}
+#scenes div.description {
+  margin-bottom: 15px;
+}
+#scenes .button-container {
+  margin-bottom: 15px;
+}
+#scenes .button-container a {
+  text-decoration: none;
+}
+#scenes .price {
+  margin-bottom: 10px;
 }
 
-.cluetip-product_scene #cluetip-close {
-  text-align: right;
-  float: right;
+@media (max-width: 1199px) {
+  #scenes {
+    display: none;
+  }
 }
-
-.cluetip-product_scene img {
-  float: left;
-  margin-right: 10px;
-  border: 1px solid #cccccc;
-}
-
-.cluetip-product_scene .title_block {
-  display: inline-block;
-  margin-bottom: 5px;
-  padding: 0 !important;
-  font-size: 12px;
-}
-
-.cluetip-product_scene .clear {
-  margin: 0;
-  padding: 0;
-}
-
-.cluetip-product_scene .clear a {
-  /*float:left;*/
-  margin-top: 2px;
-}
-
-.cluetip-product_scene p.description {
-  float: left;
-  padding: 0;
-  width: 140px;
-  color: #666666;
-}
-
-.cluetip-product_scene div.prices {
-  float: right;
-  position: relative;
-  width: 65px;
-  text-align: right;
-}
-
-.cluetip-product_scene .new {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: inline-block;
-  padding: 1px 5px;
-  font-weight: bold;
-  font-size: 10px;
-  color: white;
-  text-transform: uppercase;
-  background: none repeat scroll 0 0 #9b0000;
-}
-
-.cluetip-product_scene .price {
-  padding-top: 18px;
-  font-weight: bold;
-  font-size: 13px;
-  color: #990000;
-}
-
-.cluetip-product_scene .on_sale, .cluetip-product_scene .discount {
-  display: block;
-  font-weight: bold;
-  color: #DA0F00;
-  text-transform: uppercase;
-}
-
-/* END Cluetip design */
diff --git a/themes/default-bootstrap/js/scenes.js b/themes/default-bootstrap/js/scenes.js
index 525c756e8..bbdd35001 100644
--- a/themes/default-bootstrap/js/scenes.js
+++ b/themes/default-bootstrap/js/scenes.js
@@ -53,27 +53,6 @@ $(function () {
 	if (nb_move_available < 2)
 		$('#scenes .next').hide();
 	
-	/* set cluetip parameters */
-	$('a.cluetip')
-		.cluetip({
-			local:true,
-			cursor: 'pointer',
-			attribute:'accesskey',
-			cluetipClass: 'product_scene',
-			dropShadow: false,
-			dropShadowSteps: 0,
-			showTitle: false,
-			tracking: true,
-			sticky: false,
-			mouseOutClose: true,
-			closeText: i18n_scene_close,
-			fx: {             
-		    open:       'fadeIn',
-		    openSpeed:  'fast'
-		  }
-		})
-		.css('opacity', 0.8);
-	
 	/* set serialscroll parameters */
 	$('#scenes_list').serialScroll({
 		items:'a',
diff --git a/themes/default-bootstrap/sass/scenes.scss b/themes/default-bootstrap/sass/scenes.scss
index c7f61b5d9..b8aa463f6 100644
--- a/themes/default-bootstrap/sass/scenes.scss
+++ b/themes/default-bootstrap/sass/scenes.scss
@@ -1,24 +1,24 @@
 @import '_theme_variables';
 /*TMP*/
-#scenes .cluetip span{
-	background:transparent url(../img/icon/cible.gif) no-repeat scroll center center;
-	color:black;
+#scenes .popover-button span{
 	display:block;
-	font-size:1.1em;
-	font-weight:bold;
-	height:23px;
-	padding-top:5px;
+	font-size:28px;
 	text-align:center;
-	width:23px;
+	&:before {
+		content:"";
+		font-family:$font-icon;
+		display:block;	
+		vertical-align:5px;
+	}
 }
 /*TMP*/
 .thumbs_banner{
 	margin:10px auto;
-	padding:2px 0;
-	height: 60px !important;
+	padding:0px 0;
+	height: 62px !important;
 	width:100%;
-	border-top:1px solid #ccc;
-	border-bottom:1px solid #ccc;
+	border-top:1px solid $base-border-color;
+	border-bottom:1px solid $base-border-color;
 }
 
 .thumbs_banner .space-keeper{
@@ -31,15 +31,22 @@
 .thumbs_banner .space-keeper a.prev{
 	display:none;
 	width:21px;
-	text-align:center;
-	font-size:1.5em;
+	background:$base-box-bg;
 	text-decoration:none;
-	background:url(../img/icon/serial_scroll_left.gif) no-repeat 0 0 #eee;
+	color:$base-text-color;
+	
+	&:before {
+		font-family:$font-icon;
+		content:"";
+		vertical-align:middle;
+		padding-top:35px;
+		padding-left:5px;
+	}	
 }
 #scenes_list{
 	overflow:hidden;
 	float:left;
-	width:478px;
+	width:828px;
 }
 #scenes_list ul{
 	list-style-type:none;
@@ -57,92 +64,47 @@
 	float:left;
 	display:block;
 	width:21px;
-	text-align:center;
-	font-size:1.5em;
+	width:21px;
+	background:$base-box-bg;
 	text-decoration:none;
-	background:url(../img/icon/serial_scroll_right.gif) no-repeat 0 0 #ddd;
+	color:$base-text-color;
+	
+	&:before {
+		font-family:$font-icon;
+		content:"";
+		vertical-align:middle;
+		padding-top:35px;
+		padding-left:5px;
+	}
 }
 
-/* Cluetip design ****************************************************************************** */
-#scenes .screen_scene {
-	margin:0 auto;
-}
-
-#scenes a.cluetip{
+#scenes a.popover-button {
 	display:block;
 	position:absolute;
 	text-decoration:none;
 }
 
-.cluetip-product_scene {
-	padding:10px;
-	border:7px solid #999;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-   border-radius:3px;
-	text-align:left;
-	background:$light-background;
-	opacity:0.95;
+#scenes {
+	.popover {
+		@include border-radius(0);
+		border-color:$base-border-color;
+	}
+	.product-image-container, .product-name {
+		margin-bottom:15px;	
+	}
+	div.description {
+		margin-bottom:15px;	
+	}
+	.button-container {
+		margin-bottom:15px;
+		a {text-decoration:none;}
+	}
+	.price {
+		margin-bottom:10px;	
+	}
 }
-
-.cluetip-product_scene #cluetip-close{
-	text-align:right;
-	float:right;
-}
-
-.cluetip-product_scene img {
-	float:left;
-	margin-right:10px;
-	border:1px solid #ccc
-}
-.cluetip-product_scene .title_block {
-	display:inline-block;
-	margin-bottom:5px;
-	padding:0 !important;
-	font-size:12px;
-}
-
-.cluetip-product_scene .clear {margin:0; padding:0}
-.cluetip-product_scene .clear a {
-	/*float:left;*/
-	margin-top:2px;
-}
-
-.cluetip-product_scene p.description{
-	float:left;
-	padding:0;
-	width:140px;
-	color:$description-color;
-}
-
-.cluetip-product_scene div.prices{
-	float:right;
-	position:relative;
-	width:65px;
-	text-align:right;
-}
-.cluetip-product_scene .new {
-	position:absolute;
-	top:0;
-	right:0;
-   display: inline-block;
-   padding: 1px 5px;
-   font-weight: bold;
-   font-size: 10px;
-   color: $light-text-color;
-   text-transform: uppercase;
-	background: none repeat scroll 0 0 #9B0000
-}
-.cluetip-product_scene .price{
-	padding-top:18px;
-	font-weight:bold;
-	font-size:13px;
-	color:#990000
-}
-.cluetip-product_scene .on_sale, .cluetip-product_scene .discount {
-	display:block;
-	font-weight:bold;
-	color:#DA0F00;
-	text-transform:uppercase;
-}
-/* END Cluetip design */
+@media  (max-width: $screen-md-max) { // max 1199px 
+	#scenes {
+		display:none;	
+	}
+}
\ No newline at end of file
diff --git a/themes/default-bootstrap/scenes.tpl b/themes/default-bootstrap/scenes.tpl
index a0c92811e..92de835d0 100644
--- a/themes/default-bootstrap/scenes.tpl
+++ b/themes/default-bootstrap/scenes.tpl
@@ -24,7 +24,7 @@
 *}
 
 {if scenes}
-<script type="text/javascript" src="{$smarty.const._PS_JS_DIR_}jquery/plugins/cluetip/jquery.cluetip.js"></script>
+
 <script type="text/javascript" src="{$smarty.const._PS_JS_DIR_}jquery/plugins/jquery.scrollTo.js"></script>
 <script type="text/javascript" src="{$smarty.const._PS_JS_DIR_}jquery/plugins/jquery.serialScroll.js"></script>
 <script type="text/javascript">// <![CDATA[
@@ -40,24 +40,38 @@ $(function () {ldelim}
 		<div class="screen_scene" id="screen_scene_{$scene->id}" style="background:transparent url({$base_dir}img/scenes/{$scene->id}-scene_default.jpg); height:{$largeSceneImageType.height}px; width:{$largeSceneImageType.width}px; {if !$scene@first} display:none;{/if}">
 			{foreach $scene->products as $product_key=>$product}
 			{assign var=imageIds value="`$product.id_product`-`$product.id_image`"}
-				<a href="{$product.link|escape:'html':'UTF-8'}" accesskey="#scene_products_cluetip_{$scene_key}_{$product_key}_{$product.id_product}" class="cluetip" style="width:{$product.zone_width}px; height:{$product.zone_height}px; margin-left:{$product.x_axis}px ;margin-top:{$product.y_axis}px;">
-					<span style="margin-top:{math equation='a/2 -10' a=$product.zone_height}px; margin-left:{math equation='a/2 -10' a=$product.zone_width}px;">&nbsp;</span>
+				<a href="{$product.link|escape:'html':'UTF-8'}" rel="#scene_products_cluetip_{$scene_key}_{$product_key}_{$product.id_product}" class="popover-button" style="width:{$product.zone_width}px; height:{$product.zone_height}px; margin-left:{$product.x_axis}px ;margin-top:{$product.y_axis}px;">
+					<span style="margin-top:{math equation='a/2 -10' a=$product.zone_height}px; margin-left:{math equation='a/2 -10' a=$product.zone_width}px;"></span>
 				</a>
+                <script type="text/javascript">
+					$(document).ready(function() {
+						var htmlContent = $('#scene_products_cluetip_{$scene_key}_{$product_key}_{$product.id_product}').html();
+						$("[rel=#scene_products_cluetip_{$scene_key}_{$product_key}_{$product.id_product}]").popover({
+							placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
+							trigger:'hover',
+							title : false, //this is the top title bar of the popover. add some basic css
+							html: 'true', //needed to show html of course
+							content : htmlContent  //this is the content of the html box. add the image here or anything you want really.
+						});
+					});
+				</script>
 				<div id="scene_products_cluetip_{$scene_key}_{$product_key}_{$product.id_product}" style="display:none;">
-					{if !$PS_CATALOG_MODE AND $product.details->show_price}
+                	<div class="product-image-container">
+						<img class="img-responsive replace-2x" src="{$link->getImageLink($product.id_product, $imageIds, 'home_default')|escape:'html'}" alt="" />
+                    </div>
+					<p class="product-name"><span class="product_name">{$product.details->name}</span></p>
+					<div class="description">{$product.details->description_short|strip_tags|truncate:170:'...'}</div>
+                    {if !$PS_CATALOG_MODE AND $product.details->show_price}
 					<div class="prices">
-						{if isset($product.details->new) AND $product.details->new}<span class="new-label">{l s='New'}</span>{/if}
-						<p class="price">{if $priceDisplay}{convertPrice price=$product.details->getPrice(false, $product.details->getDefaultAttribute($product.id_product))}{else}{convertPrice price=$product.details->getPrice(true, $product.details->getDefaultAttribute($product.id_product))}{/if}</p>
+						{if isset($product.details->new) AND $product.details->new}<span class="new-box"><span class="new-label">{l s='New'}</span></span>{/if}
+						<p class="price product-price">{if $priceDisplay}{convertPrice price=$product.details->getPrice(false, $product.details->getDefaultAttribute($product.id_product))}{else}{convertPrice price=$product.details->getPrice(true, $product.details->getDefaultAttribute($product.id_product))}{/if}</p>
 							{if $product.details->on_sale}
-							<span class="on_sale">{l s='On sale!'}</span>
+							<span class="sale-box"><span class="sale-label">{l s='Sale'}</span></span>
 						{elseif isset($product.reduction) && $product.reduction}
 							<span class="discount">{l s='Reduced price!'}</span>
 						{/if}
 					</div>
 					{/if}
-					<img src="{$link->getImageLink($product.id_product, $imageIds, 'medium_default')|escape:'html'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
-					<p class="title_block"><span class="product_name">{$product.details->name}</span></p>
-					<p class="description">{$product.details->description_short|strip_tags|truncate:170:'...'}</p>
 				</div>
 			{/foreach}
 		</div>