refs #3332

 * aligning outgoing traffic right, pageviews centered in the main box
 * fixing last imprefect translation
 * removing some duplication from JS

git-svn-id: http://dev.piwik.org/svn/trunk@6867 59fd770c-687e-43c8-a1e3-f5a4ff64c105

3 files changed, 54 insertions, 31 deletions

diff --git a/plugins/Transitions/templates/transitions.css b/plugins/Transitions/templates/transitions.css
index 256a73db0f..eda84685ea 100644
--- a/plugins/Transitions/templates/transitions.css
+++ b/plugins/Transitions/templates/transitions.css
@@ -57,6 +57,14 @@
 	color: #255792;
 }
 
+.Transitions_Pageviews {
+	text-align: center;
+}
+
+.Transitions_OutgoingTraffic {
+	text-align: right;
+}
+
 .Transitions_CenterBoxMetrics {
 	padding: 15px 10px 0 10px;
 	display: none;
@@ -92,9 +100,11 @@
 }
 
 .Transitions_CenterBoxMetrics p {
-	margin: 0 0 5px 0;
+	margin: 0 0 3px 0;
 	padding: 0;
 	cursor: default;
+	font-size: 12px;
+	line-height: 16px;
 }
 
 .Transitions_CenterBoxMetrics p.Transitions_Margin {
diff --git a/plugins/Transitions/templates/transitions.js b/plugins/Transitions/templates/transitions.js
index 63671c3195..69156ae1f2 100644
--- a/plugins/Transitions/templates/transitions.js
+++ b/plugins/Transitions/templates/transitions.js
@@ -189,18 +189,13 @@ Piwik_Transitions.prototype.renderCenterBox = function() {
 	var box = this.centerBox;
 	box.removeClass('Transitions_Loading');
 
-	box.find('.Transitions_Pageviews').html(this.model.pageviews);
+	Piwik_Transitions_Util.replacePlaceholderInHtml(
+			box.find('.Transitions_Pageviews'), this.model.pageviews);
 
 	var self = this;
 	var showMetric = function(cssClass, modelProperty) {
 		var el = box.find('.Transitions_' + cssClass);
-		var span = el.find('span');
-		if (span.size() == 0) {
-			var html = el.html().replace(/%s/, '<span></span>');
-			el.html(html);
-			span = el.find('span').addClass('Transitions_Metric');
-		}
-		span.html(self.model[modelProperty]);
+		Piwik_Transitions_Util.replacePlaceholderInHtml(el, self.model[modelProperty]);
 		self.addTooltipShowingPercentageOfAllPageviews(el, modelProperty);
 	};
 
@@ -237,13 +232,7 @@ Piwik_Transitions.prototype.renderLoops = function() {
 	}
 	
 	var loops = this.popover.find('#Transitions_Loops').show();
-	
-	var span = loops.find('span');
-	if (span.size() == 0) {
-		var html = loops.html().replace(/%s/g, '<span></span>');
-		span = loops.html(html).find('span').addClass('Transitions_Metric');
-	}
-	span.html(this.model.loops);
+	Piwik_Transitions_Util.replacePlaceholderInHtml(loops, this.model.loops);
 	
 	this.addTooltipShowingPercentageOfAllPageviews(loops, 'loops');
 	
@@ -336,7 +325,7 @@ Piwik_Transitions.prototype.renderOpenGroup = function(groupName, side) {
 		
 		var tooltip = Piwik_Transitions_Translations.XOfY;
 		tooltip = '<b>' + tooltip.replace(/%s/, data.referrals + '</b>').replace(/%s/, nbTransitions);
-		var tooltip = this.model.getShareInGroupTooltip(tooltip, groupName);
+		tooltip = this.model.getShareInGroupTooltip(tooltip, groupName);
 		
 		var fullLabel = label;
 		var shortened = false;
@@ -1065,6 +1054,25 @@ Piwik_Transitions_Util = {
 	/** Add break points to string so that it can be displayed more compactly */
 	addBreakpoints: function(text) {
 		return text.replace(/([\/&=?\.%#:])/g, '$1<wbr>');
+	},
+
+	/**
+	 * Replaces a %s placeholder in the HTML.
+	 * The special feature is that it can be called multiple times, replacing the already
+	 * replaced placeholder again. It creates a span that can be assigned a class using the
+	 * spanClass parameter. The default class is 'Transitions_Metric'.
+	 */ 
+	replacePlaceholderInHtml: function(container, value, spanClass) {
+		var span = container.find('span');
+		if (span.size() == 0) {
+			var html = container.html().replace(/%s/, '<span></span>');
+			span = container.html(html).find('span');
+			if (!spanClass) {
+				spanClass = 'Transitions_Metric';
+			}
+			span.addClass(spanClass);
+		}
+		span.html(value);
 	}
 	
 };
diff --git a/plugins/Transitions/templates/transitions.tpl b/plugins/Transitions/templates/transitions.tpl
index 8ab8379e65..7dd284e266 100644
--- a/plugins/Transitions/templates/transitions.tpl
+++ b/plugins/Transitions/templates/transitions.tpl
@@ -3,22 +3,27 @@
 	<div id="Transitions_CenterBox" class="Transitions_Text Transitions_Loading">
 		<h2></h2>
 		<div class="Transitions_CenterBoxMetrics">
-			<p class="Transitions_Margin">
-				<span class="Transitions_Pageviews Transitions_Metric"></span> {'General_ColumnPageviews'|translate} 
-			</p>
+			<p class="Transitions_Pageviews Transitions_Margin">{$translations.pageviewsInline|translate}</p>
 			
-			<h3>{'Transitions_IncomingTraffic'|translate}</h3>
-			<p class="Transitions_DirectEntries">{$translations.directEntriesInline|translate} </p>
-			<p class="Transitions_PreviousPages">{$translations.fromPreviousPagesInline|translate}</p>
-			<p class="Transitions_SearchEngines">{$translations.fromSearchEnginesInline|translate}</p>
-			<p class="Transitions_Websites">{$translations.fromWebsitesInline|translate}</p>
+			<div class="Transitions_IncomingTraffic">
+				<h3>{'Transitions_IncomingTraffic'|translate}</h3>
+				<p class="Transitions_DirectEntries">{$translations.directEntriesInline|translate} </p>
+				<p class="Transitions_PreviousPages">{$translations.fromPreviousPagesInline|translate}</p>
+				<p class="Transitions_SearchEngines">{$translations.fromSearchEnginesInline|translate}</p>
+				<p class="Transitions_Websites">{$translations.fromWebsitesInline|translate}</p>
+			</div>
 			
-			<h3>{'Transitions_OutgoingTraffic'|translate}</h3>
-			<p class="Transitions_FollowingPages">{$translations.toFollowingPagesInline|translate}</p>
-			<p class="Transitions_Downloads">{$translations.downloadsInline|translate}</p>
-			<p class="Transitions_Outlinks">{$translations.outlinksInline|translate}</p>
-			<p class="Transitions_Exits">{$translations.exitsInline|translate}, {'Transitions_Including'|translate}</p>
-			<p class="Transitions_Bounces">{$translations.bouncesInline|translate}</p>
+			<div class="Transitions_OutgoingTraffic">
+				<h3>{'Transitions_OutgoingTraffic'|translate}</h3>
+				<p class="Transitions_FollowingPages">{$translations.toFollowingPagesInline|translate}</p>
+				<p class="Transitions_Downloads">{$translations.downloadsInline|translate}</p>
+				<p class="Transitions_Outlinks">{$translations.outlinksInline|translate}</p>
+				<p>
+					<span class="Transitions_Exits">{$translations.exitsInline|translate}</span>, 
+					{'Transitions_Including'|translate}<br />
+					<span class="Transitions_Bounces">{$translations.bouncesInline|translate}</span>
+				</p>
+			</div>
 		</div>
 	</div>
 	<div id="Transitions_Loops" class="Transitions_Text">