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 17dc279ccd
commit 24e1fcab1b
2 changed files with 96 additions and 94 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. 114
      tournaments/static/tournaments/js/tournament_bracket.js
  2. 70
      tournaments/templates/tournaments/broadcast/broadcasted_bracket.html

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

@ -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";
// }
if (isBroadcast == false || isBroadcast == undefined) {
setTimeout(() => {
const roundDivs = document.querySelectorAll(".butterfly-round");
// footerDiv.appendChild(linkSpan);
// First, find the maximum bottom position across all rounds
let globalMaxBottom = 0;
// // 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);
roundDivs.forEach((roundDiv) => {
const matches = roundDiv.querySelectorAll(".butterfly-match");
matches.forEach((match) => {
const bottom = match.offsetTop + match.offsetHeight;
if (bottom > globalMaxBottom) {
globalMaxBottom = bottom;
}
});
});
// // Add to the round div
// const matchesContainer =
// roundDiv.querySelector(".matches-container");
// matchesContainer.appendChild(footerContainer);
// }
// }
// });
// }, 300);
// }
// 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);
}
}

70
tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
Unescape View File

@ -31,6 +31,42 @@
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<style>
#screen-size-overlay {
position: fixed;
left: 50%;
transform: translateX(-50%); /* Center it exactly */
color: white;
padding: 20px;
font-size: 0.6em !important;
z-index: 1000; /* Ensure it's on top of other elements */
}
</style>
</head>
<body>
<header>
<div id="screen-size-overlay">
<div class="left-content bubble-header screen-size-overlay">
<img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
<div class="left-margin">
<h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
<h1 class="event">Tableau {{ tournament.broadcast_display_name }}</h1>
</div>
</div>
</div>
</header>
<div class="wrapper">
<main>
<div class="bracket-container">
<div class="butterfly-bracket" id="bracket"></div>
</div>
</main>
</div>
<script src="{% static 'tournaments/js/tournament_bracket.js' %}"></script>
<script>
// Simple vanilla JS to handle the bracket rendering
@ -131,41 +167,7 @@
// Set up the refresh interval
setInterval(fetchAndRenderBracket, 15000);
</script>
<!-- End Matomo Code -->
<style>
#screen-size-overlay {
position: fixed;
left: 50%;
transform: translateX(-50%); /* Center it exactly */
color: white;
padding: 20px;
font-size: 0.6em !important;
z-index: 1000; /* Ensure it's on top of other elements */
}
</style>
</head>
<header>
<div id="screen-size-overlay">
<div class="left-content bubble-header screen-size-overlay">
<img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
<div class="left-margin">
<h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
<h1 class="event">Tableau {{ tournament.broadcast_display_name }}</h1>
</div>
</div>
</div>
</header>
<body>
<div class="wrapper">
<div class="bracket-container">
<div class="butterfly-bracket" id="bracket"></div>
</div>
</div>
</body>
<footer class="footer-broadcast">
{% if tournament.event.images.exists %}
<div class="bubble-footer">

Write Preview
Loading…
Cancel
Save