Merge pull request #384 from marc1706/ticket/243

[ticket/243] Improve portal responsiveness

acp/portal_module.php

@@ -1170,10 +1170,11 @@ class portal_module
 				}
 				$confirm_text = (isset($this->user->lang[$module_data['module_name']])) ? sprintf($this->user->lang['DELETE_MODULE_CONFIRM'], $this->user->lang[$module_data['module_name']]) : sprintf($this->user->lang['DELETE_MODULE_CONFIRM'], utf8_normalize_nfc($module_data['module_name']));
 				confirm_box(false, $confirm_text, build_hidden_fields(array(
-					'i'			=> $id,
+					'i'					=> $id,
-					'mode'		=> $mode,
+					'mode'				=> $mode,
-					'action'	=> $action,
+					'action'			=> $action,
-					'module_id'	=> $module_id,
+					'module_id'			=> $module_id,
+					'module_classname'	=> $module_classname,
 				)));
 			}
 		}

styles/prosilver/template/portal/assets/jquery.getscrollbarwidth.js

@@ -0,0 +1,22 @@
+/*! Copyright (c) 2008 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ */
+
+/**
+ * Gets the width of the OS scrollbar
+ */
+(function($) {
+	var scrollbarWidth = 0;
+	$.getScrollbarWidth = function() {
+		if ( !scrollbarWidth ) {
+			var $div = $('<div />')
+				.css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
+				.prependTo('body').append('<div />').find('div')
+				.css({ width: '100%', height: 200 });
+			scrollbarWidth = 100 - $div.width();
+			$div.parent().remove();
+		}
+		return scrollbarWidth;
+	};
+})(jQuery);

styles/prosilver/template/portal/assets/portal.js

@@ -19,17 +19,22 @@ var portal_right_width;
  */
 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');
 
-	if (width <= 880) {
+	if (width <= (895 - $.getScrollbarWidth())) {
 		// Get height of left and center column
-		var center_height = $('#portal-center').outerHeight();
+		var right_height = $portal_right.height();
-		var left_height = $('#portal-left').outerHeight();
+		var left_height = $portal_left.height();
-
+		// Get correct margin-left for portal-right and add 10px for padding
-		$('#portal-right').css('margin-top', -(center_height - left_height) + 'px');
+		$portal_right.css('margin-left', - ($portal_right.width() + 1));
-		$('#portal-right').width($('#portal-left').width());
+		$portal_center.css('margin-top', Math.max(left_height, right_height) + 'px');
 	} else {
-		$('#portal-right').css('margin-top', '0px');
+		$portal_right.css('margin-top', '0px');
-		$('#portal-right').width(portal_right_width);
+		$portal_right.css('margin-left', -$portal_left.width());
+		$portal_right.width($portal_left.width());
+		$portal_center.css('margin-top', 0);
 	}
 };
 

styles/prosilver/template/portal/modules/clock_side.html

@@ -27,6 +27,6 @@
 				</div>
 			</div>
 		</div>
-<!-- INCLUDEJS portal/modules/jquery_easing_1_3.js -->
+<!-- INCLUDEJS portal/assets/jquery_easing_1_3.js -->
-<!-- INCLUDEJS portal/modules/portal_clock.js -->
+<!-- INCLUDEJS portal/assets/portal_clock.js -->
 {$LR_BLOCK_F_L}{$LR_BLOCK_F_R}

styles/prosilver/template/portal/modules/login_box_side.html

@@ -1,4 +1,4 @@
-<form action="{S_LOGIN_ACTION}" method="post">
+<form action="{S_LOGIN_ACTION}" method="post" id="portal-login-box">
 <div>
 {$LR_BLOCK_H_L}<a href="{U_LOGIN_LOGOUT}"><!-- IF $S_BLOCK_ICON --><img src="{$IMAGE_SRC}" width="{$IMAGE_WIDTH}" height="{$IMAGE_HEIGHT}" alt="" />&nbsp;<!-- ENDIF -->{$TITLE}</a>{$LR_BLOCK_H_R}
 	<span class="genmed">{L_USERNAME}{L_COLON}</span><br />

styles/prosilver/template/portal/portal_body.html

@@ -112,6 +112,7 @@
 <!--// 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 -->
+<!-- INCLUDEJS portal/assets/jquery.getscrollbarwidth.js -->
+<!-- INCLUDEJS portal/assets/portal.js -->
 
 <!-- INCLUDE overall_footer.html -->

styles/prosilver/theme/portal_responsive.css

@@ -23,11 +23,15 @@
 
 @media only screen and (max-width: 895px), only screen and (max-device-width: 895px)
 {
-	#portal-right { margin-left: 0 !important; }
+	div#portal-right { width: 49% !important; }
-	#portal-center {
+	div#portal-left { width: 50% !important; }
+	div#portal-center {
 		margin-right: 0 !important;
+		margin-left: 0 !important;
 		padding-right: 0 !important;
+		padding-left: 0 !important;
 	}
+	.responsive-portal-news dt { width: 100% !important; }
 }
 
 @media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
@@ -52,5 +56,13 @@
 	.portal-responsive-show { display: block !important; }
 	.portal-responsive-hide { display: none !important; }
 	#portal-body { padding-top: 0px !important; }
-	.portal-clear { display: none !important; }
+	#portal-right > .portal-clear, #portal-body > .portal-clear, #portal-left > .portal-clear,
+	#portal-center > .portal-clear, #portal-login-box .portal-clear { display: none !important; }
+	#portal-right { width: 50% !important; }
+	#portal-left { width: 50% !important; }
+	#portal-center {
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		padding-left: 0 !important;
+	}
 }