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.
*/
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();
});

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

@@ -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}' -->