Julian/phpbb_board3-portal_tlw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[ticket/578] Correctly align right and left columns

Browse Source 
This also fixes responsiveness in RTL languages.

B3P-578
This commit is contained in:
Marc Alexander
2015-06-06 22:44:47 +02:00
parent b143c5f525
commit 24c7950dcb
2 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
styles/prosilver/template/portal/assets/portal.js
View File

@@ -18,30 +18,44 @@ var portal_right_width;
* the center column but rather right after the last module of the left column. * the center column but rather right after the last module of the left column.
*/ */
phpbb.b3p_fix_right_column_margin = function() { phpbb.b3p_fix_right_column_margin = function() {
var width = $(window).width(); var width = $(window).width(),
var $portal_right = $('#portal-right'); $portal_right = $('#portal-right'),
var $portal_left = $('#portal-left'); $portal_left = $('#portal-left'),
var $portal_center = $('#portal-center'); $portal_center = $('#portal-center'),
marginLeft = 'margin-left',
marginRight = 'margin-right';
if ($('body').hasClass('rtl')) {
marginLeft = marginRight;
marginRight = 'margin-left';
}
if (width <= (895 - $.getScrollbarWidth())) { if (width <= (895 - $.getScrollbarWidth())) {
// Get correct margin-left for portal-right and add 10px for padding // Get correct margin-left for portal-right and add 10px for padding
if ($portal_left.width() > 0) { 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_right.css('margin-top', $portal_center.height() + 'px');
$portal_left.css('margin-top', $portal_center.height() + 'px'); $portal_left.css('margin-top', $portal_center.height() + 'px');
} else { } else {
$portal_right.css('margin-left', 0); $portal_right.css(marginLeft, 0);
$portal_right.css('margin-top', 0); $portal_right.css('margin-top', 0);
} }
} else { } else {
$portal_right.css('margin-top', '0px'); $portal_right.css('margin-top', '0px');
if ($portal_center.length && $portal_left.length) { if (!$portal_center.length && $portal_left.length) {
$portal_right.css('margin-left', -portal_right_width); $portal_right.css(marginLeft, 0);
} else { } else {
$portal_right.css('margin-left', 0); $portal_right.css(marginLeft, -portal_right_width);
} }
$portal_right.width(portal_right_width); $portal_right.width(portal_right_width);
$portal_left.css('margin-top', 0); $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 * Correctly align left column if center column does not exist
*/ */
phpbb.b3pFixLeftColumnMargin = function() { 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) { if ($portalLeft.length && !$('#portal-center').length) {
$portalLeft.css({ $portalLeft.css(marginLeft, '0');
'margin-left': '0px', $portalLeft.css(marginRight, 10);
'margin-right': 10
});
} }
}; };
$(document).ready(function() { $(document).ready(function() {
portal_right_width = $('#portal-right').width(); portal_right_width = $('#portal-right').attr('data-width');
phpbb.b3p_fix_right_column_margin();
phpbb.b3pFixLeftColumnMargin(); phpbb.b3pFixLeftColumnMargin();
phpbb.b3p_fix_right_column_margin();
$(window).resize(function() { $(window).resize(function() {
phpbb.b3p_fix_right_column_margin(); phpbb.b3p_fix_right_column_margin();
}); });

2
styles/prosilver/template/portal/portal_body.html
View File

@@ -71,7 +71,7 @@
<!-- [+] right module area --> <!-- [+] right module area -->
<!-- IF S_RIGHT_COLUMN --> <!-- 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 --> <!-- BEGIN modules_right -->
<!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' --> <!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' -->
<!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' --> <!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' -->