diff --git a/tournaments/static/tournaments/js/tournament_bracket.js b/tournaments/static/tournaments/js/tournament_bracket.js index 9d339b3..87bbba7 100644 --- a/tournaments/static/tournaments/js/tournament_bracket.js +++ b/tournaments/static/tournaments/js/tournament_bracket.js @@ -39,10 +39,9 @@ function renderBracket(options) { if (doubleButterflyMode == true && roundCount > 1) { roundTotalCount = roundCount - 1; } - const padding = 50 * roundTotalCount; // Account for some padding/margin + const padding = 46 * roundTotalCount; // Account for some padding/margin const availableWidth = screenWidth - padding; responsiveMatchWidth = Math.floor(availableWidth / roundTotalCount); - let topMargin = 0; if (isBroadcast) { responsiveMatchWidth = Math.min( @@ -65,7 +64,14 @@ function renderBracket(options) { const roundDiv = document.createElement("div"); roundDiv.className = "butterfly-round"; roundDiv.style.setProperty("--match-width", `${responsiveMatchWidth}px`); - + if (doubleButterflyMode == true && roundCount > 3) { + if (roundIndex >= finalRoundIndex - 1) { + roundDiv.style.transform = `translateX(-50%)`; + if (roundIndex >= finalRoundIndex + 2) { + roundDiv.style.transform = `translateX(-100%)`; + } + } + } // Create title const titleDiv = document.createElement("div"); titleDiv.className = "round-title"; @@ -109,14 +115,6 @@ function renderBracket(options) { // Create matches container const matchesContainer = document.createElement("div"); matchesContainer.className = "matches-container"; - if (doubleButterflyMode == true && roundCount > 3) { - if (roundIndex >= finalRoundIndex - 1) { - matchesContainer.style.transform = `translateX(-50%)`; - if (roundIndex >= finalRoundIndex + 2) { - matchesContainer.style.transform = `translateX(-100%)`; - } - } - } roundDiv.appendChild(matchesContainer); if (matchPositions[roundIndex] == undefined) { matchPositions[roundIndex] = {};