Merge pull request #236 from marc1706/ticket/232

[ticket/232] Improve look of responsive portal

styles/prosilver/template/portal/_block_config.html

@@ -2,13 +2,13 @@
 <!-- DEFINE $LR_BLOCK_H_L = '<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span><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 style="border-left: 0px; width: 100%;"><div style="text-align: left; margin: 5px 5px 5px 5px">' -->
 <!-- DEFINE $LR_BLOCK_F_L = '</div></dd></dl></li></ul>' -->
-<!-- DEFINE $LR_BLOCK_F_R = '<span class="corners-bottom"><span></span></span></div></div><br style="clear:both" />' -->
+<!-- DEFINE $LR_BLOCK_F_R = '<span class="corners-bottom"><span></span></span></div></div><br class="portal-clear" />' -->
 
 <!-- Config for the center blocks //-->
 <!-- DEFINE $C_BLOCK_H_L = '<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span><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 = '<span class="corners-bottom"><span></span></span></div></div><br style="clear:both" />' -->
+<!-- DEFINE $C_BLOCK_F_R = '<span class="corners-bottom"><span></span></span></div></div><br class="portal-clear" />' -->
 
 <!-- Config for compact blocks //-->
 <!-- DEFINE $CC_BLOCK_H_L = '<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span><ul class="topiclist"><li class="header"><dl class="icon">' -->

styles/prosilver/template/portal/portal.js

@@ -0,0 +1,39 @@
+/**
+*
+* @package Board3 Portal v2.1 - javascript code
+* @copyright (c) 2014 Board3 Group ( www.board3.de )
+* @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
+*
+*/
+
+(function($) {  // Avoid conflicts with other libraries
+
+"use strict";
+
+/**
+ * Correctly align the right column underneath the left column.
+ * This will make sure that the right column doesn't start before the end of
+ * 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();
+
+	if (width <= 700) {
+		// Get height of left and center column
+		var center_height = $('#portal-center').outerHeight();
+		var left_height = $('#portal-left').outerHeight();
+
+		$('#portal-right').css('margin-top', -(center_height - left_height) + 'px');
+	} else {
+		$('#portal-right').css('margin-top', '0px');
+	}
+};
+
+$(document).ready(function() {
+	phpbb.b3p_fix_right_column_margin();
+	$(window).resize(function() {
+		phpbb.b3p_fix_right_column_margin();
+	});
+});
+
+})(jQuery); // Avoid conflicts with other libraries

styles/prosilver/template/portal/portal_body.html

@@ -112,4 +112,6 @@
 <!--// board3 Portal by www.board3.de //-->
 <div class="copyright">Powered by <a href="http://www.board3.de/">Board3 Portal</a> &copy; 2009 - 2013 Board3 Group</div>
 
+<!-- INCLUDEJS portal/portal.js -->
+
 <!-- INCLUDE overall_footer.html -->

styles/prosilver/theme/portal.css

@@ -117,6 +117,7 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 
 #portal-body #viewpoll {
 	margin-left: 0px;
+	margin-right: 0px;
 }
 
 /**
@@ -130,6 +131,10 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
 	margin: 0;
 }
 
+.portal-clear {
+	clear: both;
+}
+
 /* RTL language fixes */
 .rtl .portal-navigation ul li a{
 	background-image: url("./images/portal/arrowbullet_rtl.gif");

styles/prosilver/theme/responsive.css

@@ -52,4 +52,6 @@ dt#a { width: 125% !important; }
 	#portal-left ul.topiclist dd, #portal-right ul.topiclist dd { display: block !important; }
 	.portal-responsive-show { display: block !important; }
 	.portal-responsive-hide { display: none !important; }
+	#portal-body { padding-top: 0px !important; }
+	.portal-clear { display: none !important; }
 }