From c61971e7eb1b50dcf7eab48e03831a1c28b5180d Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Tue, 21 Jul 2015 14:48:07 +0200
Subject: [PATCH 1/3] [ticket/641] Use CSS for aligning portal columns

B3P-641
---
 .../template/portal/assets/portal.js          |  5 -----
 styles/prosilver/theme/portal_all.css         |  4 ++++
 styles/prosilver/theme/portal_responsive.css  | 22 +++++++++++++++++--
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/styles/prosilver/template/portal/assets/portal.js b/styles/prosilver/template/portal/assets/portal.js
index 6807132a..7e4e08ed 100644
--- a/styles/prosilver/template/portal/assets/portal.js
+++ b/styles/prosilver/template/portal/assets/portal.js
@@ -42,21 +42,16 @@ phpbb.b3p_fix_right_column_margin = function() {
 			} 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(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(marginLeft, 0);
 		} else {
 			$portal_right.css(marginLeft, -portal_right_width);
 		}
 		$portal_right.width(portal_right_width);
-		$portal_left.css('margin-top', 0);
 		phpbb.b3pFixLeftColumnMargin();
 	}
 };
diff --git a/styles/prosilver/theme/portal_all.css b/styles/prosilver/theme/portal_all.css
index ff00c5f3..6db95a4c 100644
--- a/styles/prosilver/theme/portal_all.css
+++ b/styles/prosilver/theme/portal_all.css
@@ -4,6 +4,10 @@
 	display: block;
 }
 
+.rtl .portal-body-wrapper {
+	float: right;
+}
+
 #portal-page-body {
 	clear: both;
 	margin: 4px 0;
diff --git a/styles/prosilver/theme/portal_responsive.css b/styles/prosilver/theme/portal_responsive.css
index 1fb29713..a1aa7fa8 100644
--- a/styles/prosilver/theme/portal_responsive.css
+++ b/styles/prosilver/theme/portal_responsive.css
@@ -23,8 +23,26 @@
 
 @media only screen and (max-width: 895px), only screen and (max-device-width: 895px)
 {
-	div#portal-right { width: 49% !important; }
-	div#portal-left { width: 50% !important; }
+	div#portal-right {
+		width: 49% !important;
+		margin-left: 1% !important;
+	}
+
+	div#portal-left {
+		width: 50% !important;
+		margin-left: 0 !important;
+	}
+
+	.rtl div#portal-right {
+		margin-left: 0 !important;
+		margin-right: 1% !important;
+	}
+
+	.rtl div#portal-left {
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+	}
+
 	div#portal-center {
 		margin-right: 0 !important;
 		margin-left: 0 !important;

From 3509044e03438f7b9c3b39f3e7c279c7c09eb651 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Tue, 21 Jul 2015 14:48:32 +0200
Subject: [PATCH 2/3] [ticket/641] Correctly align portal columns in RTL
 languages

B3P-641
---
 .../event/overall_footer_page_body_after.html         |  2 +-
 .../event/overall_header_page_body_before.html        |  2 +-
 styles/prosilver/theme/portal_all_responsive.css      | 11 +++++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/styles/prosilver/template/event/overall_footer_page_body_after.html b/styles/prosilver/template/event/overall_footer_page_body_after.html
index d3a70d8b..aa3136fb 100644
--- a/styles/prosilver/template/event/overall_footer_page_body_after.html
+++ b/styles/prosilver/template/event/overall_footer_page_body_after.html
@@ -20,7 +20,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;">
+<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}' -->
diff --git a/styles/prosilver/template/event/overall_header_page_body_before.html b/styles/prosilver/template/event/overall_header_page_body_before.html
index 8f19066b..1e4f2801 100644
--- a/styles/prosilver/template/event/overall_header_page_body_before.html
+++ b/styles/prosilver/template/event/overall_header_page_body_before.html
@@ -3,5 +3,5 @@
 <div id="portal-body">
 <div class="portal-body-wrapper">
 	<!-- INCLUDE portal/_block_config.html -->
-	<div class="portal-body-center" style="margin: 0 <!-- IF S_RIGHT_COLUMN -->{S_PORTAL_RIGHT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF --> 0 <!-- IF S_LEFT_COLUMN -->{S_PORTAL_LEFT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF -->; padding: 0 {$BLOCK_DISTANCE};">
+	<div class="portal-body-center" style="margin: <!-- IF S_CONTENT_DIRECTION eq 'rtl' -->0 <!-- IF S_LEFT_COLUMN -->{S_PORTAL_LEFT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF --> 0 <!-- IF S_RIGHT_COLUMN -->{S_PORTAL_RIGHT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF --><!-- ELSE -->0 <!-- IF S_RIGHT_COLUMN -->{S_PORTAL_RIGHT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF --> 0 <!-- IF S_LEFT_COLUMN -->{S_PORTAL_LEFT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF --><!-- ENDIF -->; padding: 0 {$BLOCK_DISTANCE};">
 <!-- ENDIF -->
diff --git a/styles/prosilver/theme/portal_all_responsive.css b/styles/prosilver/theme/portal_all_responsive.css
index 7f903b85..a173a691 100644
--- a/styles/prosilver/theme/portal_all_responsive.css
+++ b/styles/prosilver/theme/portal_all_responsive.css
@@ -7,9 +7,20 @@
 		margin-right: 60%;
 	}
 
+	.rtl .portal-body-center ul.topiclist dt .list-inner {
+		margin-right: 0;
+		margin-left: 60%;
+	}
+
 	.portal-body-center ul.topiclist dt {
 		margin-right: -60%;
 	}
+
+	.rtl .portal-body-center ul.topiclist dt {
+		margin-right: 0;
+		margin-left: -60%;
+	}
+
 	.portal-body-center dd.lastpost { width: auto; }
 }
 

From 8e4380a170c815ac5642eb14f70d6bbb458b22c3 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Wed, 22 Jul 2015 14:51:29 +0200
Subject: [PATCH 3/3] [ticket/641] Use correct aria roles for elements

B3P-641
---
 .../event/overall_footer_page_body_after.html | 32 +++++++++----------
 .../template/portal/_block_config.html        |  6 ++--
 .../template/portal/portal_body.html          | 10 +++---
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/styles/prosilver/template/event/overall_footer_page_body_after.html b/styles/prosilver/template/event/overall_footer_page_body_after.html
index aa3136fb..e7c7b347 100644
--- a/styles/prosilver/template/event/overall_footer_page_body_after.html
+++ b/styles/prosilver/template/event/overall_footer_page_body_after.html
@@ -20,21 +20,21 @@
 
     <!-- [+] 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;" 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}' -->
-     <!-- DEFINE $IMAGE_WIDTH = '{modules_right.IMAGE_WIDTH}' -->
-     <!-- DEFINE $IMAGE_HEIGHT = '{modules_right.IMAGE_HEIGHT}' -->
-     <!-- DEFINE $CUSTOM_CODE = '{modules_right.CODE}' -->
-     <!-- DEFINE $TITLE = '{modules_right.TITLE}' -->
-     <!-- DEFINE $MODULE_ID = '{modules_right.MODULE_ID}' -->
-     <!-- INCLUDE {$TEMPLATE_FILE} -->
-     <!-- END modules_right -->
+    <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}' -->
+         <!-- DEFINE $IMAGE_WIDTH = '{modules_right.IMAGE_WIDTH}' -->
+         <!-- DEFINE $IMAGE_HEIGHT = '{modules_right.IMAGE_HEIGHT}' -->
+         <!-- DEFINE $CUSTOM_CODE = '{modules_right.CODE}' -->
+         <!-- DEFINE $TITLE = '{modules_right.TITLE}' -->
+         <!-- DEFINE $MODULE_ID = '{modules_right.MODULE_ID}' -->
+         <!-- INCLUDE {$TEMPLATE_FILE} -->
+         <!-- END modules_right -->
+        </div>
+        <!-- ENDIF -->
+        <!-- [-] right module area -->
+        <br class="portal-clear" />
+        </div>
     </div>
-    <!-- ENDIF -->
-    <!-- [-] right module area -->
-    <br class="portal-clear" />
-    </div>
-</div>
 <!-- ENDIF -->
diff --git a/styles/prosilver/template/portal/_block_config.html b/styles/prosilver/template/portal/_block_config.html
index 3929d4de..1ded7d7f 100644
--- a/styles/prosilver/template/portal/_block_config.html
+++ b/styles/prosilver/template/portal/_block_config.html
@@ -1,17 +1,17 @@
 <!-- Config for the left and right blocks //-->
-<!-- DEFINE $LR_BLOCK_H_L = '<div class="forabg"><div class="inner"><ul class="topiclist"><li class="header"><dl><dt style="padding: 0px 0px 2px; white-space: nowrap; margin-bottom: 0px; margin-top: 0px;">' -->
+<!-- DEFINE $LR_BLOCK_H_L = '<div class="forabg" role="row"><div class="inner"><ul class="topiclist"><li class="header"><dl><dt style="padding: 0px 0px 2px; white-space: nowrap; margin-bottom: 0px; margin-top: 0px;">' -->
 <!-- DEFINE $LR_BLOCK_H_R = '</dt><dd></dd></dl></li></ul><ul class="topiclist forums"><li><dl><dt></dt><dd class="portal-side-wrapper"><div class="portal-side">' -->
 <!-- DEFINE $LR_BLOCK_F_L = '</div></dd></dl></li></ul>' -->
 <!-- DEFINE $LR_BLOCK_F_R = '</div></div><br class="portal-clear" />' -->
 
 <!-- Config for the center blocks //-->
-<!-- DEFINE $C_BLOCK_H_L = '<div class="forabg"><div class="inner"><ul class="topiclist"><li class="header"><dl class="icon"><dt>' -->
+<!-- DEFINE $C_BLOCK_H_L = '<div class="forabg" role="row"><div class="inner"><ul class="topiclist"><li class="header"><dl class="icon"><dt>' -->
 <!-- DEFINE $C_BLOCK_H_R = '</dt><dd></dd></dl></li></ul>' -->
 <!-- DEFINE $C_BLOCK_F_L = ' ' -->
 <!-- DEFINE $C_BLOCK_F_R = '</div></div><br class="portal-clear" />' -->
 
 <!-- Config for compact blocks //-->
-<!-- DEFINE $CC_BLOCK_H_L = '<div class="forabg"><div class="inner"><ul class="topiclist"><li class="header"><dl class="icon">' -->
+<!-- DEFINE $CC_BLOCK_H_L = '<div class="forabg" role="row"><div class="inner"><ul class="topiclist"><li class="header"><dl class="icon">' -->
 <!-- DEFINE $CC_BLOCK_H_R = '</dl></li></ul>' -->
 
 <!-- Images-URL //-->
diff --git a/styles/prosilver/template/portal/portal_body.html b/styles/prosilver/template/portal/portal_body.html
index cebf8698..64a74408 100644
--- a/styles/prosilver/template/portal/portal_body.html
+++ b/styles/prosilver/template/portal/portal_body.html
@@ -3,7 +3,7 @@
 
 <div id="portal-body" role="grid">
 	<!-- IF S_TOP_COLUMN -->	
-	<div id="portal-top" role="gridcell">
+	<div id="portal-top" role="rowgroup">
 	<!-- [+] top module area -->
 		<ul>
 			<li>
@@ -25,7 +25,7 @@
 	<!-- [+] center module area -->
 	<!-- IF S_CENTER_COLUMN -->
 	<div id="portal-center-wrapper">
-		<div id="portal-center" style="margin: 0 <!-- IF S_RIGHT_COLUMN -->{S_PORTAL_RIGHT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF --> 0 <!-- IF S_LEFT_COLUMN -->{S_PORTAL_LEFT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF -->; padding: 0 {$BLOCK_DISTANCE};" role="gridcell">
+		<div id="portal-center" style="margin: 0 <!-- IF S_RIGHT_COLUMN -->{S_PORTAL_RIGHT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF --> 0 <!-- IF S_LEFT_COLUMN -->{S_PORTAL_LEFT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF -->; padding: 0 {$BLOCK_DISTANCE};" role="rowgroup">
 			<!-- BEGIN modules_center -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_center.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_center.IMAGE_SRC}' -->
@@ -46,7 +46,7 @@
 	<!-- [-] center module area -->
 	<!-- [+] left module area -->
 		<!-- IF S_LEFT_COLUMN -->
-		<div id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px;" role="gridcell">
+		<div id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px;" role="rowgroup">
 			<!-- BEGIN modules_left -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_left.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_left.IMAGE_SRC}' -->
@@ -63,7 +63,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;" data-width="{S_PORTAL_RIGHT_COLUMN}" 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="rowgroup">
 			<!-- BEGIN modules_right -->
 				<!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' -->
 				<!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' -->
@@ -79,7 +79,7 @@
 	<!-- [-] right module area -->
 	<br class="portal-clear" />
 	<!-- IF S_BOTTOM_COLUMN -->
-	<div id="portal-bottom" role="gridcell">
+	<div id="portal-bottom" role="rowgroup">
 	<!-- [+] bottom module area -->
 		<ul>
 			<li>