fix css

tournaments/models/round.py

@@ -180,7 +180,7 @@ class Round(SideStoreModel):
                     matches=first_half_matches,
                     round_id=self.id,
                     round_index=self.index,
-                    short_names=True
+                    short_names=double_butterfly_mode
                 )
                 return match_group
 

tournaments/static/tournaments/css/broadcast.css

@@ -140,7 +140,17 @@ body {
 .left-content.bubble-header.screen-size-overlay {
     display: flex;
     align-items: top; /* Vertically align items (logo and text) */
-    height: 100px; /* Example height matching QR code */
+    height: auto; /* Allow height to adjust based on content */
+}
+
+.left-content.bubble-header.screen-size-overlay .left-margin h1.club,
+.left-content.bubble-header.screen-size-overlay .left-margin h1.event {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal; /* Allow text to wrap */
 }
 
 .logo {

tournaments/static/tournaments/css/tournament_bracket.css

@@ -34,6 +34,13 @@
     gap: 40px; /* Increased to account for horizontal lines (20px on each side) */
     position: relative;
     margin-bottom: 80px;
+}
+
+.broadcast-mode .butterfly-bracket {
+    display: flex;
+    gap: 40px; /* Increased to account for horizontal lines (20px on each side) */
+    position: relative;
+    margin-bottom: 80px;
     font-size: clamp(0.6em, 1vw, 1.2em) !important;
 }
 

tournaments/static/tournaments/js/tournament_bracket.js

@@ -41,7 +41,11 @@ function renderBracket(options) {
   }
   const padding = 46 * roundTotalCount; // Account for some padding/margin
   const availableWidth = screenWidth - padding;
-  responsiveMatchWidth = Math.floor(availableWidth / roundTotalCount);
+  let responsiveMatchWidth = Math.min(
+    365,
+    Math.max(365, Math.floor(availableWidth / roundTotalCount)),
+  );
+
   let topMargin = 0;
   if (isBroadcast) {
     responsiveMatchWidth = Math.min(
@@ -49,7 +53,13 @@ function renderBracket(options) {
       Math.floor(availableWidth / roundTotalCount),
     );
 
-    if (roundTotalCount < 5) {
+    if (roundTotalCount == 1) {
+      topMargin = 240;
+    } else if (roundTotalCount == 2) {
+      topMargin = 180;
+    } else if (roundTotalCount == 3) {
+      topMargin = 120;
+    } else if (roundTotalCount == 4) {
       topMargin = 60;
     } else {
       topMargin = 0;

tournaments/templates/tournaments/broadcast/broadcasted_bracket.html

@@ -42,16 +42,9 @@
         color: white;
         padding: 20px;
         max-width: 40%;
-        font-size: 0.6em !important;
+        font-size: clamp(0.4em, 1vw, 1.2em) !important;
         z-index: 1000; /* Ensure it's on top of other elements */
       }
-      .left-content.screen-size-overlay .left-margin,
-      .left-content.screen-size-overlay h1.club,
-      .left-content.screen-size-overlay h1.event {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap; /* Prevent text from wrapping */
-      }
     </style>
 </head>
 
@@ -59,7 +52,7 @@
     <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">
+                <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo" style="height: 80px; min-width: 80px; object-fit: contain;">
                 <div class="left-margin">
                     <h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
                     <h1 class="event">Tableau {{ tournament.broadcast_display_name }}</h1>

tournaments/templates/tournaments/broadcast/broadcasted_planning.html

@@ -295,7 +295,7 @@
                                                     <template x-for="(match, courtIndex) in organizeMatchesByCourt(group.matches)" :key="courtIndex">
                                                         <div class="match-cell" :style="{'width': calculateFractionWidth()}">
                                                             <template x-if="match">
-                                                                <div class="bubble" :class="{'running': !match.ended && match.started, 'even': courtIndex % 2 === 1}" style="text-align: center;">
+                                                                <div class="bubble" :class="{'running': !match.ended && match.started, 'even': courtIndex % 2 === 1, 'empty': match.ended}" style="text-align: center;">
                                                                     <div class="bold" x-text="match.group_stage_name ? match.group_stage_name : match.title"></div>
                                                                     <template x-if="match.tournament_title">
                                                                         <div class="minor-info semibold" x-text="match.tournament_title"></div>

tournaments/templates/tournaments/match_cell.html

@@ -4,6 +4,9 @@
             <div class="bubble">
 
                 <div class="match-status-container-header flex-row">
+                    {% if match.tournament_title%}
+                    <label class="minor-info">{{ match.tournament_title }}</label>
+                    {% endif %}
                     <label class="matchtitle">{{ match.title }}</label>
                     {% if not match.ended %}
                     <label class="right-label minor-info bold">{{ match.court }}</label>

tournaments/views.py

@@ -1034,7 +1034,7 @@ def tournament_prog(request, tournament_id):
     day_param = request.GET.get('day', None)
 
     # Get days and match groups using our new method
-    days, match_groups = tournament.planned_matches_by_day(day=day_param)
+    days, match_groups = tournament.planned_matches_by_day(day=day_param, event_mode=True)
 
     # Format days for template
     formatted_days = [day.strftime('%Y-%m-%d') for day in days]