staxriver
/
padelclub_backend
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix broadcast layout

Browse Source
sync_v2
Raz 6 months ago
parent 3069f9e637
commit 17dc279ccd
1 changed files with 60 additions and 60 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 120
      tournaments/static/tournaments/js/tournament_bracket.js

120
tournaments/static/tournaments/js/tournament_bracket.js
Unescape View File

@ -443,64 +443,64 @@ function renderBracket(options) {
bracket.appendChild(roundDiv); bracket.appendChild(roundDiv);
}); });
if (isBroadcast == false || isBroadcast == undefined) { // if (isBroadcast == false || isBroadcast == undefined) {
setTimeout(() => { // setTimeout(() => {
const roundDivs = document.querySelectorAll(".butterfly-round"); // const roundDivs = document.querySelectorAll(".butterfly-round");
// First, find the maximum bottom position across all rounds // // First, find the maximum bottom position across all rounds
let globalMaxBottom = 0; // let globalMaxBottom = 0;
roundDivs.forEach((roundDiv) => { // roundDivs.forEach((roundDiv) => {
const matches = roundDiv.querySelectorAll(".butterfly-match"); // const matches = roundDiv.querySelectorAll(".butterfly-match");
matches.forEach((match) => { // matches.forEach((match) => {
const bottom = match.offsetTop + match.offsetHeight; // const bottom = match.offsetTop + match.offsetHeight;
if (bottom > globalMaxBottom) { // if (bottom > globalMaxBottom) {
globalMaxBottom = bottom; // globalMaxBottom = bottom;
} // }
}); // });
}); // });
// Now create and position footers for all rounds at the same y-position // // Now create and position footers for all rounds at the same y-position
roundDivs.forEach((roundDiv, index) => { // roundDivs.forEach((roundDiv, index) => {
// Get the match templates from this round to extract data // // Get the match templates from this round to extract data
const roundMatches = rounds[index] || []; // const roundMatches = rounds[index] || [];
if (roundMatches.length > 0) { // if (roundMatches.length > 0) {
const firstMatchTemplate = roundMatches[0].closest(".match-template"); // const firstMatchTemplate = roundMatches[0].closest(".match-template");
const roundId = firstMatchTemplate.dataset.roundId; // const roundId = firstMatchTemplate.dataset.roundId;
const realRoundIndex = firstMatchTemplate.dataset.roundIndex; // const realRoundIndex = firstMatchTemplate.dataset.roundIndex;
if (realRoundIndex > 1) { // if (realRoundIndex > 1) {
// Create footer div // // Create footer div
const footerDiv = document.createElement("div"); // const footerDiv = document.createElement("div");
footerDiv.className = "round-footer"; // footerDiv.className = "round-footer";
footerDiv.style.width = `${responsiveMatchWidth}px`; // footerDiv.style.width = `${responsiveMatchWidth}px`;
footerDiv.style.paddingBottom = "40px"; // footerDiv.style.paddingBottom = "40px";
footerDiv.style.textAlign = "center"; // footerDiv.style.textAlign = "center";
// Create footer content // // Create footer content
let linkSpan = document.createElement("a"); // let linkSpan = document.createElement("a");
linkSpan.className = "small styled-link"; // linkSpan.className = "small styled-link";
linkSpan.textContent = "accès au tableau de classement"; // linkSpan.textContent = "accès au tableau de classement";
if (roundId) { // if (roundId) {
linkSpan.href = `/tournament/${tournamentId}/round/${roundId}/bracket/`; // linkSpan.href = `/tournament/${tournamentId}/round/${roundId}/bracket/`;
linkSpan.style.cursor = "pointer"; // linkSpan.style.cursor = "pointer";
} // }
footerDiv.appendChild(linkSpan); // footerDiv.appendChild(linkSpan);
// Create a container that will sit at the same position for all rounds // // Create a container that will sit at the same position for all rounds
const footerContainer = document.createElement("div"); // const footerContainer = document.createElement("div");
footerContainer.style.position = "absolute"; // footerContainer.style.position = "absolute";
footerContainer.style.top = `${globalMaxBottom}px`; // Same position for all footers // footerContainer.style.top = `${globalMaxBottom}px`; // Same position for all footers
footerContainer.style.width = "100%"; // footerContainer.style.width = "100%";
footerContainer.appendChild(footerDiv); // footerContainer.appendChild(footerDiv);
// Add to the round div // // Add to the round div
const matchesContainer = // const matchesContainer =
roundDiv.querySelector(".matches-container"); // roundDiv.querySelector(".matches-container");
matchesContainer.appendChild(footerContainer); // matchesContainer.appendChild(footerContainer);
} // }
} // }
}); // });
}, 300); // }, 300);
} // }
} }

Write Preview
Loading…
Cancel
Save