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. 120
      tournaments/static/tournaments/js/tournament_bracket.js
  2. 70
      tournaments/templates/tournaments/broadcast/broadcasted_bracket.html

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); }, 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); g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})(); })();
</script> </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 src="{% static 'tournaments/js/tournament_bracket.js' %}"></script>
<script> <script>
// Simple vanilla JS to handle the bracket rendering // Simple vanilla JS to handle the bracket rendering
@ -131,41 +167,7 @@
// Set up the refresh interval // Set up the refresh interval
setInterval(fetchAndRenderBracket, 15000); setInterval(fetchAndRenderBracket, 15000);
</script> </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> </body>
<footer class="footer-broadcast"> <footer class="footer-broadcast">
{% if tournament.event.images.exists %} {% if tournament.event.images.exists %}
<div class="bubble-footer"> <div class="bubble-footer">

Write Preview
Loading…
Cancel
Save