From 24e1fcab1b9655d9d36cd6f6ae67e016201a4f7e Mon Sep 17 00:00:00 2001 From: Raz Date: Sun, 11 May 2025 19:25:33 +0200 Subject: [PATCH] fix broadcast layout --- .../tournaments/js/tournament_bracket.js | 120 +++++++++--------- .../broadcast/broadcasted_bracket.html | 70 +++++----- 2 files changed, 96 insertions(+), 94 deletions(-) diff --git a/tournaments/static/tournaments/js/tournament_bracket.js b/tournaments/static/tournaments/js/tournament_bracket.js index d516ea8..3efaf3b 100644 --- a/tournaments/static/tournaments/js/tournament_bracket.js +++ b/tournaments/static/tournaments/js/tournament_bracket.js @@ -443,64 +443,64 @@ function renderBracket(options) { bracket.appendChild(roundDiv); }); - // if (isBroadcast == false || isBroadcast == undefined) { - // setTimeout(() => { - // const roundDivs = document.querySelectorAll(".butterfly-round"); - - // // First, find the maximum bottom position across all rounds - // let globalMaxBottom = 0; - - // roundDivs.forEach((roundDiv) => { - // const matches = roundDiv.querySelectorAll(".butterfly-match"); - // matches.forEach((match) => { - // const bottom = match.offsetTop + match.offsetHeight; - // if (bottom > globalMaxBottom) { - // globalMaxBottom = bottom; - // } - // }); - // }); - - // // Now create and position footers for all rounds at the same y-position - // roundDivs.forEach((roundDiv, index) => { - // // Get the match templates from this round to extract data - // const roundMatches = rounds[index] || []; - // if (roundMatches.length > 0) { - // const firstMatchTemplate = roundMatches[0].closest(".match-template"); - // const roundId = firstMatchTemplate.dataset.roundId; - // const realRoundIndex = firstMatchTemplate.dataset.roundIndex; - // if (realRoundIndex > 1) { - // // Create footer div - // const footerDiv = document.createElement("div"); - // footerDiv.className = "round-footer"; - // footerDiv.style.width = `${responsiveMatchWidth}px`; - // footerDiv.style.paddingBottom = "40px"; - // footerDiv.style.textAlign = "center"; - - // // Create footer content - // let linkSpan = document.createElement("a"); - // linkSpan.className = "small styled-link"; - // linkSpan.textContent = "accès au tableau de classement"; - // if (roundId) { - // linkSpan.href = `/tournament/${tournamentId}/round/${roundId}/bracket/`; - // linkSpan.style.cursor = "pointer"; - // } - - // footerDiv.appendChild(linkSpan); - - // // Create a container that will sit at the same position for all rounds - // const footerContainer = document.createElement("div"); - // footerContainer.style.position = "absolute"; - // footerContainer.style.top = `${globalMaxBottom}px`; // Same position for all footers - // footerContainer.style.width = "100%"; - // footerContainer.appendChild(footerDiv); - - // // Add to the round div - // const matchesContainer = - // roundDiv.querySelector(".matches-container"); - // matchesContainer.appendChild(footerContainer); - // } - // } - // }); - // }, 300); - // } + if (isBroadcast == false || isBroadcast == undefined) { + setTimeout(() => { + const roundDivs = document.querySelectorAll(".butterfly-round"); + + // First, find the maximum bottom position across all rounds + let globalMaxBottom = 0; + + roundDivs.forEach((roundDiv) => { + const matches = roundDiv.querySelectorAll(".butterfly-match"); + matches.forEach((match) => { + const bottom = match.offsetTop + match.offsetHeight; + if (bottom > globalMaxBottom) { + globalMaxBottom = bottom; + } + }); + }); + + // Now create and position footers for all rounds at the same y-position + roundDivs.forEach((roundDiv, index) => { + // Get the match templates from this round to extract data + const roundMatches = rounds[index] || []; + if (roundMatches.length > 0) { + const firstMatchTemplate = roundMatches[0].closest(".match-template"); + const roundId = firstMatchTemplate.dataset.roundId; + const realRoundIndex = firstMatchTemplate.dataset.roundIndex; + if (realRoundIndex > 1) { + // Create footer div + const footerDiv = document.createElement("div"); + footerDiv.className = "round-footer"; + footerDiv.style.width = `${responsiveMatchWidth}px`; + footerDiv.style.paddingBottom = "40px"; + footerDiv.style.textAlign = "center"; + + // Create footer content + let linkSpan = document.createElement("a"); + linkSpan.className = "small styled-link"; + linkSpan.textContent = "accès au tableau de classement"; + if (roundId) { + linkSpan.href = `/tournament/${tournamentId}/round/${roundId}/bracket/`; + linkSpan.style.cursor = "pointer"; + } + + footerDiv.appendChild(linkSpan); + + // Create a container that will sit at the same position for all rounds + const footerContainer = document.createElement("div"); + footerContainer.style.position = "absolute"; + footerContainer.style.top = `${globalMaxBottom}px`; // Same position for all footers + footerContainer.style.width = "100%"; + footerContainer.appendChild(footerDiv); + + // Add to the round div + const matchesContainer = + roundDiv.querySelector(".matches-container"); + matchesContainer.appendChild(footerContainer); + } + } + }); + }, 100); + } } diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html b/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html index b630915..a1a9011 100644 --- a/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html +++ b/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html @@ -31,6 +31,42 @@ g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); + + + + + + +
+
+
+ +
+

{{ tournament.broadcast_event_display_name }}

+

Tableau {{ tournament.broadcast_display_name }}

+
+
+
+
+ +
+
+
+
+
+
+
+ - - - - - -
-
-
- -
-

{{ tournament.broadcast_event_display_name }}

-

Tableau {{ tournament.broadcast_display_name }}

-
-
-
-
- - -
-
-
-
-
-