From 24c7950dcbefd1abcdfcd6fa67c3e426c2b9d438 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sat, 6 Jun 2015 22:44:47 +0200
Subject: [PATCH] [ticket/578] Correctly align right and left columns

This also fixes responsiveness in RTL languages.

B3P-578
---
 .../template/portal/assets/portal.js          | 51 +++++++++++++------
 .../template/portal/portal_body.html          |  2 +-
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/styles/prosilver/template/portal/assets/portal.js b/styles/prosilver/template/portal/assets/portal.js
index 20dfe122..83f61576 100644
--- a/styles/prosilver/template/portal/assets/portal.js
+++ b/styles/prosilver/template/portal/assets/portal.js
@@ -18,30 +18,44 @@ var portal_right_width;
  * the center column but rather right after the last module of the left column.
  */
 phpbb.b3p_fix_right_column_margin = function() {
-	var width = $(window).width();
-	var $portal_right = $('#portal-right');
-	var $portal_left = $('#portal-left');
-	var $portal_center = $('#portal-center');
+	var width = $(window).width(),
+		$portal_right = $('#portal-right'),
+		$portal_left = $('#portal-left'),
+		$portal_center = $('#portal-center'),
+		marginLeft = 'margin-left',
+		marginRight = 'margin-right';
+
+	if ($('body').hasClass('rtl')) {
+		marginLeft = marginRight;
+		marginRight = 'margin-left';
+	}
+
 
 	if (width <= (895 - $.getScrollbarWidth())) {
 		// Get correct margin-left for portal-right and add 10px for padding
 		if ($portal_left.width() > 0) {
-			$portal_right.css('margin-left', - ($portal_right.width() + 1));
+			if (!$portal_center.length && $portal_left.length) {
+				$portal_right.css(marginLeft, 5);
+				$portal_left.css(marginRight, 0);
+			} else {
+				$portal_right.css(marginLeft, - ($portal_right.width() + 1));
+			}
 			$portal_right.css('margin-top', $portal_center.height() + 'px');
 			$portal_left.css('margin-top', $portal_center.height() + 'px');
 		} else {
-			$portal_right.css('margin-left', 0);
+			$portal_right.css(marginLeft, 0);
 			$portal_right.css('margin-top', 0);
 		}
 	} else {
 		$portal_right.css('margin-top', '0px');
-		if ($portal_center.length && $portal_left.length) {
-			$portal_right.css('margin-left', -portal_right_width);
+		if (!$portal_center.length && $portal_left.length) {
+			$portal_right.css(marginLeft, 0);
 		} else {
-			$portal_right.css('margin-left', 0);
+			$portal_right.css(marginLeft, -portal_right_width);
 		}
 		$portal_right.width(portal_right_width);
 		$portal_left.css('margin-top', 0);
+		phpbb.b3pFixLeftColumnMargin();
 	}
 };
 
@@ -49,20 +63,25 @@ phpbb.b3p_fix_right_column_margin = function() {
  * Correctly align left column if center column does not exist
  */
 phpbb.b3pFixLeftColumnMargin = function() {
-	var $portalLeft = $('#portal-left');
+	var $portalLeft = $('#portal-left'),
+		marginLeft = 'margin-left',
+		marginRight = 'margin-right';
+
+	if ($('body').hasClass('rtl')) {
+		marginLeft = marginRight;
+		marginRight = 'margin-left';
+	}
 
 	if ($portalLeft.length && !$('#portal-center').length) {
-		$portalLeft.css({
-			'margin-left': '0px',
-			'margin-right': 10
-		});
+		$portalLeft.css(marginLeft, '0');
+		$portalLeft.css(marginRight, 10);
 	}
 };
 
 $(document).ready(function() {
-	portal_right_width = $('#portal-right').width();
-	phpbb.b3p_fix_right_column_margin();
+	portal_right_width = $('#portal-right').attr('data-width');
 	phpbb.b3pFixLeftColumnMargin();
+	phpbb.b3p_fix_right_column_margin();
 	$(window).resize(function() {
 		phpbb.b3p_fix_right_column_margin();
 	});
diff --git a/styles/prosilver/template/portal/portal_body.html b/styles/prosilver/template/portal/portal_body.html
index 0a14b58e..c1e38113 100644
--- a/styles/prosilver/template/portal/portal_body.html
+++ b/styles/prosilver/template/portal/portal_body.html
@@ -71,7 +71,7 @@
 
 	<!-- [+] right module area -->
 		<!-- IF S_RIGHT_COLUMN -->
-		<div id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; margin-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->: -{S_PORTAL_RIGHT_COLUMN}px;" role="gridcell">
+		<div id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; margin-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->: -{S_PORTAL_RIGHT_COLUMN}px;" data-width="{S_PORTAL_RIGHT_COLUMN}" role="gridcell">
 			<!-- BEGIN modules_right -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' -->