From e5319bfbe3fcf3d752f8c20c466374a1cfc041f3 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Sat, 6 Jun 2015 21:22:37 +0200 Subject: [PATCH 1/4] [ticket/578] Correctly assign classes to element upon deleting modules B3P-578 --- adm/style/portal/ajax.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/adm/style/portal/ajax.js b/adm/style/portal/ajax.js index e38c6157..29f0ad4d 100644 --- a/adm/style/portal/ajax.js +++ b/adm/style/portal/ajax.js @@ -83,16 +83,20 @@ phpbb.addAjaxCallback('b3p_delete_module', function(res) { return; } - var el = $(this).parents('tr:first'), - nextEl = el.next(); + var $deletedRow = $(this).parents('tr:first'), + $nextRow = $deletedRow.next(); - el.remove(); + $deletedRow.remove(); // Fix classes of next elements - while (nextEl !== undefined && nextEl.is('tr')) { - var nextElClass = (nextEl.attr('class') === 'row1') ? 'row2' : 'row1'; - nextEl.attr('class', nextElClass); - nextEl = nextEl.next(); + while ($nextRow !== undefined && $nextRow.is('tr')) { + var nextRowClass = ($nextRow.attr('class') === 'row1') ? 'row2' : 'row1'; + + if ($nextRow.attr('class') !== 'row3') { + $nextRow.attr('class', nextRowClass); + } + + $nextRow = $nextRow.next(); } }); From 215a29c0ac8a5f32afd4fc47547cdae195236773 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Sat, 6 Jun 2015 21:39:18 +0200 Subject: [PATCH 2/4] [ticket/578] Correctly assign classes upon moving modules up/down B3P-578 --- adm/style/portal/ajax.js | 80 +++++++++++++++++++++++----------------- 1 file changed, 46 insertions(+), 34 deletions(-) diff --git a/adm/style/portal/ajax.js b/adm/style/portal/ajax.js index 29f0ad4d..eb85ac05 100644 --- a/adm/style/portal/ajax.js +++ b/adm/style/portal/ajax.js @@ -13,33 +13,39 @@ phpbb.addAjaxCallback('b3p_move_module_up', function(res) { return; } - var el = $(this).parents('tr:first'), - trSwap = el.prev(), - elClass = trSwap.attr('class'), - trSwapClass = el.attr('class'); + var $bottomRow = $(this).parents('tr:first'), + $topRow = $bottomRow.prev(), + topRowClass = $topRow.attr('class'), + bottomRowClass = $bottomRow.attr('class'); - el.insertBefore(trSwap); - el.attr('class', elClass); - trSwap.attr('class', trSwapClass); + $bottomRow.insertBefore($topRow); + if (bottomRowClass !== 'row3' && topRowClass !== 'row3') { + $bottomRow.attr('class', topRowClass); + $topRow.attr('class', bottomRowClass); + } else if (bottomRowClass === 'row3') { + $topRow.attr('class', (topRowClass === 'row1') ? 'row2' : 'row1'); + } else if (topRowClass === 'row3') { + $bottomRow.attr('class', (bottomRowClass === 'row1') ? 'row2' : 'row1'); + } // Swap images if swap element is first row - var swapIsFirstRow = trSwap.find('img[src*="icon_up_disabled"]').parents('span:first').is(':visible'); + var swapIsFirstRow = $topRow.find('img[src*="icon_up_disabled"]').parents('span:first').is(':visible'); if (swapIsFirstRow) { - trSwap.find('img[src*="icon_up_disabled"]').parents('span:first').toggle(); - trSwap.find('img[src*="icon_up."]').parents('span:first').toggle(); - el.find('img[src*="icon_up."]').parents('span:first').toggle(); - el.find('img[src*="icon_up_disabled"]').parents('span:first').toggle(); + $topRow.find('img[src*="icon_up_disabled"]').parents('span:first').toggle(); + $topRow.find('img[src*="icon_up."]').parents('span:first').toggle(); + $bottomRow.find('img[src*="icon_up."]').parents('span:first').toggle(); + $bottomRow.find('img[src*="icon_up_disabled"]').parents('span:first').toggle(); } // Swap images if move element is last row - var elIsLastRow = el.find('img[src*="icon_down_disabled"]').parents('span:first').is(':visible'); + var elIsLastRow = $bottomRow.find('img[src*="icon_down_disabled"]').parents('span:first').is(':visible'); if (elIsLastRow) { - trSwap.find('img[src*="icon_down_disabled"]').parents('span:first').toggle(); - trSwap.find('img[src*="icon_down."]').parents('span:first').toggle(); - el.find('img[src*="icon_down."]').parents('span:first').toggle(); - el.find('img[src*="icon_down_disabled"]').parents('span:first').toggle(); + $topRow.find('img[src*="icon_down_disabled"]').parents('span:first').toggle(); + $topRow.find('img[src*="icon_down."]').parents('span:first').toggle(); + $bottomRow.find('img[src*="icon_down."]').parents('span:first').toggle(); + $bottomRow.find('img[src*="icon_down_disabled"]').parents('span:first').toggle(); } }); @@ -48,33 +54,39 @@ phpbb.addAjaxCallback('b3p_move_module_down', function(res) { return; } - var el = $(this).parents('tr:first'), - trSwap = el.next(), - elClass = trSwap.attr('class'), - trSwapClass = el.attr('class'); + var $topRow = $(this).parents('tr:first'), + $bottomRow = $topRow.next(), + bottomRowClass = $bottomRow.attr('class'), + topRowClass = $topRow.attr('class'); - el.insertAfter(trSwap); - el.attr('class', elClass); - trSwap.attr('class', trSwapClass); + $topRow.insertAfter($bottomRow); + if (bottomRowClass !== 'row3' && topRowClass !== 'row3') { + $bottomRow.attr('class', topRowClass); + $topRow.attr('class', bottomRowClass); + } else if (bottomRowClass === 'row3') { + $topRow.attr('class', (topRowClass === 'row1') ? 'row2' : 'row1'); + } else if (topRowClass === 'row3') { + $bottomRow.attr('class', (bottomRowClass === 'row1') ? 'row2' : 'row1'); + } // Swap images if swap element is last row - var swapIsLastRow = trSwap.find('img[src*="icon_down_disabled"]').parents('span:first').is(':visible'); + var swapIsLastRow = $bottomRow.find('img[src*="icon_down_disabled"]').parents('span:first').is(':visible'); if (swapIsLastRow) { - trSwap.find('img[src*="icon_down_disabled"]').parents('span:first').toggle(); - trSwap.find('img[src*="icon_down."]').parents('span:first').toggle(); - el.find('img[src*="icon_down."]').parents('span:first').toggle(); - el.find('img[src*="icon_down_disabled"]').parents('span:first').toggle(); + $bottomRow.find('img[src*="icon_down_disabled"]').parents('span:first').toggle(); + $bottomRow.find('img[src*="icon_down."]').parents('span:first').toggle(); + $topRow.find('img[src*="icon_down."]').parents('span:first').toggle(); + $topRow.find('img[src*="icon_down_disabled"]').parents('span:first').toggle(); } // Swap images if move element is first row - var elIsFirstRow = el.find('img[src*="icon_up_disabled"]').parents('span:first').is(':visible'); + var elIsFirstRow = $topRow.find('img[src*="icon_up_disabled"]').parents('span:first').is(':visible'); if (elIsFirstRow) { - trSwap.find('img[src*="icon_up_disabled"]').parents('span:first').toggle(); - trSwap.find('img[src*="icon_up."]').parents('span:first').toggle(); - el.find('img[src*="icon_up."]').parents('span:first').toggle(); - el.find('img[src*="icon_up_disabled"]').parents('span:first').toggle(); + $bottomRow.find('img[src*="icon_up_disabled"]').parents('span:first').toggle(); + $bottomRow.find('img[src*="icon_up."]').parents('span:first').toggle(); + $topRow.find('img[src*="icon_up."]').parents('span:first').toggle(); + $topRow.find('img[src*="icon_up_disabled"]').parents('span:first').toggle(); } }); From b143c5f525626da3883fe457c2b2268d61622d17 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Sat, 6 Jun 2015 22:10:07 +0200 Subject: [PATCH 3/4] [ticket/578] Correctly align left column no matter what column enabled B3P-578 --- .../template/portal/assets/portal.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/styles/prosilver/template/portal/assets/portal.js b/styles/prosilver/template/portal/assets/portal.js index 662383e8..20dfe122 100644 --- a/styles/prosilver/template/portal/assets/portal.js +++ b/styles/prosilver/template/portal/assets/portal.js @@ -35,15 +35,34 @@ phpbb.b3p_fix_right_column_margin = function() { } } else { $portal_right.css('margin-top', '0px'); - $portal_right.css('margin-left', -portal_right_width); + if ($portal_center.length && $portal_left.length) { + $portal_right.css('margin-left', -portal_right_width); + } else { + $portal_right.css('margin-left', 0); + } $portal_right.width(portal_right_width); $portal_left.css('margin-top', 0); } }; +/** + * Correctly align left column if center column does not exist + */ +phpbb.b3pFixLeftColumnMargin = function() { + var $portalLeft = $('#portal-left'); + + if ($portalLeft.length && !$('#portal-center').length) { + $portalLeft.css({ + 'margin-left': '0px', + 'margin-right': 10 + }); + } +}; + $(document).ready(function() { portal_right_width = $('#portal-right').width(); phpbb.b3p_fix_right_column_margin(); + phpbb.b3pFixLeftColumnMargin(); $(window).resize(function() { phpbb.b3p_fix_right_column_margin(); }); From 24c7950dcbefd1abcdfcd6fa67c3e426c2b9d438 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Sat, 6 Jun 2015 22:44:47 +0200 Subject: [PATCH 4/4] [ticket/578] Correctly align right and left columns This also fixes responsiveness in RTL languages. B3P-578 --- .../template/portal/assets/portal.js | 51 +++++++++++++------ .../template/portal/portal_body.html | 2 +- 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/styles/prosilver/template/portal/assets/portal.js b/styles/prosilver/template/portal/assets/portal.js index 20dfe122..83f61576 100644 --- a/styles/prosilver/template/portal/assets/portal.js +++ b/styles/prosilver/template/portal/assets/portal.js @@ -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(); }); diff --git a/styles/prosilver/template/portal/portal_body.html b/styles/prosilver/template/portal/portal_body.html index 0a14b58e..c1e38113 100644 --- a/styles/prosilver/template/portal/portal_body.html +++ b/styles/prosilver/template/portal/portal_body.html @@ -71,7 +71,7 @@ -
+