fix broadcast stuff

tournaments/models/match.py

@@ -77,7 +77,7 @@ class Match(SideStoreModel):
             if self.round.index > 0:
                 items.append(f" #{self.index_in_round() + 1}")
         elif self.group_stage:
-            items.append(self.group_stage.name())
+            items.append(self.group_stage.display_name())
             items.append(f"Match #{self.index + 1}")
         return " ".join(items)
 
@@ -420,13 +420,19 @@ class Match(SideStoreModel):
             # _minutes = int((_seconds % 3600) / 60)
             # return f"{_hours:02d}h{_minutes:02d}min"
 
-    def tournament_title(self):
+    def tournament_title(self, full_name=False):
         if self.group_stage:
+            if full_name:
+                return self.group_stage.tournament.full_name()
+            else:
                 return self.group_stage.tournament.short_full_name()
+        else:
+            if full_name:
+                return self.round.tournament.full_name()
             else:
                 return self.round.tournament.short_full_name()
 
-    def live_match(self, hide_teams=False, event_mode=False, short_names=False):
+    def live_match(self, hide_teams=False, event_mode=False, short_names=False, broadcast=False):
         title = self.computed_name()
         date = self.formatted_start_date()
         time_indication = self.time_indication()
@@ -443,7 +449,7 @@ class Match(SideStoreModel):
 
         tournament_title = None
         if event_mode is True:
-            tournament_title = self.tournament_title()
+            tournament_title = self.tournament_title(broadcast == False)
 
         livematch = LiveMatch(self.index, title, date, time_indication, court, self.started(), ended, group_stage_name, live_format, self.start_date, self.court_index, self.disabled, bracket_name, self.should_show_lucky_loser_status(), tournament_title)
 

tournaments/models/tournament.py

@@ -574,9 +574,9 @@ class Tournament(BaseModel):
 
         return groups
 
-    def create_match_group(self, name, matches, round_id=None, round_index=None, hide_teams=False, event_mode=False, short_names=False):
+    def create_match_group(self, name, matches, round_id=None, round_index=None, hide_teams=False, event_mode=False, short_names=False, broadcast=False):
         matches = list(matches)
-        live_matches = [match.live_match(hide_teams, event_mode, short_names) for match in matches]
+        live_matches = [match.live_match(hide_teams, event_mode, short_names, broadcast) for match in matches]
         # Filter out matches that have a start_date of None
         valid_matches = [match for match in matches if match.start_date is not None]
 
@@ -1917,7 +1917,7 @@ class Tournament(BaseModel):
 
         return teams_processed
 
-    def planned_matches_by_day(self, day=None, all=False, event_mode=False):
+    def planned_matches_by_day(self, day=None, all=False, event_mode=False, broadcast=False):
         """
         Collect all matches from tournaments and group them by their planned_start_date.
 
@@ -2005,7 +2005,8 @@ class Tournament(BaseModel):
                         round_id=None,
                         round_index=None,
                         hide_teams=hide_teams,
-                        event_mode=event_mode
+                        event_mode=event_mode,
+                        broadcast=broadcast
                     )
                     match_groups.append(mg)
             return sorted_days, match_groups
@@ -2049,13 +2050,15 @@ class Tournament(BaseModel):
                     round_id=None,
                     round_index=None,
                     hide_teams=hide_teams,
-                    event_mode=event_mode
+                    event_mode=event_mode,
+                    broadcast=broadcast
                 )
                 match_groups.append(mg)
 
         return sorted_days, match_groups
 
-
+    def has_sponsors(self):
+        return self.event.images.exists()
 
 class MatchGroup:
     def __init__(self, name, matches, formatted_schedule, round_id=None, round_index=None):

tournaments/static/tournaments/css/broadcast.css

@@ -67,12 +67,6 @@ body {
     object-fit: contain;
 }
 
-.sponsor-logo-broadcast.screen-size-overlay {
-    object-fit: contain;
-    height: 80px;
-    width: 80px; /* Example height matching QR code */
-}
-
 .bold {
     font-family: "Montserrat-Bold";
 }
@@ -134,7 +128,7 @@ body {
 .left-content.bubble-header {
     display: flex;
     align-items: top; /* Vertically align items (logo and text) */
-    height: 140px; /* Example height matching QR code */
+    height: 120px; /* Example height matching QR code */
 }
 
 .left-content.bubble-header.screen-size-overlay {
@@ -157,3 +151,57 @@ body {
     height: 100%; /* Make the logo's height match the parent's height */
     width: auto; /* Maintain the logo's aspect ratio */
 }
+
+#header {
+    padding: 30px;
+}
+
+@media screen and (max-height: 720px) {
+    .logo {
+        object-fit: contain;
+        max-width: 60px;
+    }
+
+    .club,
+    .event {
+        font-size: 1.5em;
+    }
+
+    .sponsor-logo-broadcast {
+        object-fit: contain;
+        height: 80px;
+        width: 80px; /* Example height matching QR code */
+    }
+}
+
+@media screen and (min-height: 1080px) {
+    .sponsor-logo-broadcast {
+        object-fit: contain;
+        height: 120px;
+        width: 120px; /* Example height matching QR code */
+    }
+
+    #header {
+        margin-top: 20px;
+        margin-bottom: 40px;
+    }
+    .footer-broadcast {
+        margin-bottom: 40px;
+    }
+}
+
+@media screen and (min-height: 2160px) {
+    .sponsor-logo-broadcast {
+        object-fit: contain;
+        height: 200px;
+        width: 200px; /* Example height matching QR code */
+    }
+
+    #header {
+        margin-top: 40px;
+        margin-bottom: 80px;
+    }
+    .footer-broadcast {
+        margin-bottom: 80px;
+    }
+}

tournaments/static/tournaments/css/tournament_bracket.css

@@ -265,6 +265,103 @@
     border-radius: 0 0 24px 24px; /* Match the bubble's bottom corners */
 }
 
+.logo {
+    max-width: 80px;
+}
+.match-result.broadcast-mode {
+    font-size: 1.2em;
+}
+
+.round-title.broadcast-mode {
+    font-size: 1em;
+}
+
+#screen-size-overlay {
+    font-size: clamp(1.5vh, 2vh, 2.5vh) !important;
+}
+
+.sponsor-logo-broadcast.screen-size-overlay {
+    object-fit: contain;
+    height: 80px;
+    width: 80px; /* Example height matching QR code */
+}
+
+@media screen and (max-height: 720px) {
+    .sponsor-logo-broadcast.screen-size-overlay {
+        object-fit: contain;
+        height: 80px;
+        width: 80px; /* Example height matching QR code */
+    }
+
+    .logo {
+        max-width: 60px !important;
+    }
+
+    .bubble.broadcast-bracket-match {
+        padding: 12px !important;
+    }
+
     .match-result.broadcast-mode {
         padding: 0px;
     }
+
+    .match-result.broadcast-mode {
+        font-size: 1em;
+    }
+
+    .round-title.broadcast-mode {
+        font-size: 0.6em;
+    }
+
+    #screen-size-overlay {
+        font-size: clamp(1.5vh, 2vh, 2.5vh) !important;
+    }
+}
+
+@media screen and (min-height: 1080px) {
+    .sponsor-logo-broadcast.screen-size-overlay {
+        object-fit: contain;
+        height: 120px;
+        width: 120px; /* Example height matching QR code */
+    }
+
+    .logo {
+        max-width: 80px;
+    }
+    .match-result.broadcast-mode {
+        font-size: 1.2em;
+    }
+
+    .round-title.broadcast-mode {
+        font-size: 1em;
+    }
+
+    #screen-size-overlay {
+        font-size: clamp(1.5vh, 2vh, 2.5vh) !important;
+    }
+}
+
+@media screen and (min-height: 2160px) {
+    .sponsor-logo-broadcast.screen-size-overlay {
+        object-fit: contain;
+        height: 200px;
+        width: 200px; /* Example height matching QR code */
+    }
+
+    .logo {
+        max-width: 120px;
+    }
+
+    .match-result.broadcast-mode {
+        font-size: 2em;
+    }
+
+    .round-title.broadcast-mode {
+        font-size: 1.5em;
+    }
+
+    .left-content.bubble-header.screen-size-overlay .left-margin h1.club,
+    .left-content.bubble-header.screen-size-overlay .left-margin h1.event {
+        font-size: 1.6em;
+    }
+}

tournaments/static/tournaments/js/tournament_bracket.js

@@ -49,11 +49,11 @@ function renderBracket(options) {
   let topMargin = 0;
   if (isBroadcast) {
     responsiveMatchWidth = Math.min(
-      500,
+      600,
       Math.floor(availableWidth / roundTotalCount),
     );
-
+    let screenHeight = window.innerHeight;
-    if (roundTotalCount == 1) {
+    if (roundTotalCount <= 1) {
       topMargin = 240;
     } else if (roundTotalCount == 2) {
       topMargin = 180;
@@ -61,9 +61,26 @@ function renderBracket(options) {
       topMargin = 120;
     } else if (roundTotalCount == 4) {
       topMargin = 60;
+    } else if (roundTotalCount == 5) {
+      topMargin = 40;
+    } else if (roundTotalCount == 6) {
+      topMargin = -20;
     } else {
       topMargin = 0;
     }
+
+    if (screenHeight <= 720) {
+    } else if (screenHeight <= 1080) {
+      if (topMargin <= 0) {
+        topMargin = 40;
+      }
+      topMargin = topMargin * 2;
+    } else {
+      if (topMargin <= 0) {
+        topMargin = 120;
+      }
+      topMargin = topMargin * 3;
+    }
   }
 
   rounds.forEach((roundMatches, roundIndex) => {
@@ -334,6 +351,17 @@ function renderBracket(options) {
         "--next-match-distance",
         `${nextMatchDistance}px`,
       );
+
+      let roundTopMargin = 80;
+      if (doubleButterflyMode) {
+        if (window.innerHeight <= 720) {
+          roundTopMargin = 50;
+        } else if (window.innerHeight > 720 && window.innerHeight <= 1080) {
+          roundTopMargin = 80;
+        } else if (window.innerHeight > 1080) {
+          roundTopMargin = 140;
+        }
+      }
       matchDiv.style.top = `${top + topMargin}px`;
       matchPositions[roundIndex][matchRealIndex] = top;
 
@@ -351,19 +379,27 @@ function renderBracket(options) {
         // }
 
         // Position title above the first match
-        titleDiv.style.top = `${topMargin - 80}px`; // Adjust the 60px offset as needed
+        titleDiv.style.top = `${topMargin - roundTopMargin}px`; // Adjust the 60px offset as needed
         if (
           (roundIndex == finalRoundIndex && realRoundIndex == 0) ||
           isBroadcast == true
         ) {
-          titleDiv.style.top = `${top + topMargin - 80}px`; // Adjust the 60px offset as needed
+          titleDiv.style.top = `${top + topMargin - roundTopMargin}px`; // Adjust the 60px offset as needed
         }
         titleDiv.style.position = "absolute";
         if (roundCount >= 5 && doubleButterflyMode == true) {
+          let offset = 40;
+          if (window.innerHeight <= 720) {
+            offset = 40;
+          } else if (window.innerHeight <= 1080) {
+            offset = 60;
+          } else {
+            offset = 120;
+          }
           if (roundIndex == finalRoundIndex - 1) {
-            titleDiv.style.marginLeft = "50px";
+            titleDiv.style.marginLeft = `${offset}px`;
           } else if (roundIndex == finalRoundIndex + 1) {
-            titleDiv.style.marginLeft = "-50px";
+            titleDiv.style.marginLeft = `-${offset}px`;
           }
         }
         matchesContainer.appendChild(titleDiv);

tournaments/templates/tournaments/broadcast/broadcast.html

@@ -22,7 +22,7 @@
 {% block content %}
 
 <div class="grid-x">
-    <div class="cell medium-6 large-6 topblock">
+    <div class="cell medium-6 large-6 topblock padding10">
         <div class="bubble">
         <div><a href="{% url 'automatic-broadcast' tournament.id %}">Automatique</a></div>
         <div><a href="{% url 'broadcasted-matches' tournament.id %}">Matchs</a></div>

tournaments/templates/tournaments/broadcast/broadcast_club.html

@@ -8,7 +8,7 @@
 
 {% block content %}
 <div class="grid-x">
-    <div class="cell topblock">
+    <div class="cell topblock padding10">
         <div class="bubble">
 
                 {% for tournament in tournaments %}

tournaments/templates/tournaments/broadcast/broadcasted_auto.html

@@ -39,6 +39,7 @@
             paginatedRankings: null,
             active: 1,
             hide_weight: {{ tournament.hide_weight|lower }},
+            has_sponsors: {{ tournament.has_sponsors|lower }},
             prefixTitle: '',
             retrieveData() {
                 fetch('/tournament/{{ tournament.id }}/broadcast/json/')
@@ -58,6 +59,17 @@
             },
             paginateSummons(array) {
                 let pageSize = 16
+                if (window.innerHeight < 768) {
+                    pageSize = 12;
+                    if (this.has_sponsors) {
+                        pageSize = 10
+                    }
+                } else if (window.innerHeight < 1024) {
+                    if (this.has_sponsors) {
+                        pageSize = 12
+                    }
+                }
+
                 pages = this.paginate(array, pageSize)
 
                 const splitGroups = []
@@ -74,6 +86,17 @@
             },
             paginateRankings(array) {
                 let pageSize = 16
+                if (window.innerHeight < 768) {
+                    pageSize = 12;
+                    if (this.has_sponsors) {
+                        pageSize = 10
+                    }
+                } else if (window.innerHeight < 1024) {
+                    if (this.has_sponsors) {
+                        pageSize = 12
+                    }
+                }
+
                 pages = this.paginate(array, pageSize)
 
                 const splitGroups = []

tournaments/templates/tournaments/broadcast/broadcasted_auto_event.html

@@ -38,6 +38,7 @@
             paginatedGroupStages: null,
             paginatedSummons: null,
             paginatedRankings: null,
+            has_sponsors: {{ tournament.has_sponsors|lower }},
             active: 1,
             hide_weight: {{ tournament.hide_weight|lower }},
             prefixTitle: '',
@@ -84,7 +85,18 @@
             },
 
             paginateSummons(array) {
-                let pageSize = 16;
+                let pageSize = 16
+                if (window.innerHeight < 768) {
+                    pageSize = 12;
+                    if (this.has_sponsors) {
+                        pageSize = 10
+                    }
+                } else if (window.innerHeight < 1024) {
+                    if (this.has_sponsors) {
+                        pageSize = 12
+                    }
+                }
+
                 pages = this.paginate(array, pageSize);
 
                 const splitGroups = [];
@@ -101,7 +113,17 @@
             },
 
             paginateRankings(array) {
-                let pageSize = 16;
+                let pageSize = 16
+                if (window.innerHeight < 768) {
+                    pageSize = 12;
+                    if (this.has_sponsors) {
+                        pageSize = 10
+                    }
+                } else if (window.innerHeight < 1024) {
+                    if (this.has_sponsors) {
+                        pageSize = 12
+                    }
+                }
                 pages = this.paginate(array, pageSize);
 
                 const splitGroups = [];

tournaments/templates/tournaments/broadcast/broadcasted_bracket.html

@@ -42,7 +42,6 @@
         color: white;
         padding: 20px;
         max-width: 40%;
-        font-size: clamp(0.4em, 1vw, 1.2em) !important;
         z-index: 1000; /* Ensure it's on top of other elements */
       }
     </style>
@@ -52,7 +51,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" style="height: 80px; min-width: 80px; object-fit: contain;">
+                <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo" style="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_group_stages.html

@@ -85,7 +85,7 @@
                         <template x-for="i in paginatedGroupStages.length" >
                             <template x-for="group_stage in paginatedGroupStages[i-1]" >
 
-                                <div class="cell medium-6 large-3" x-show="active === i">
+                                <div class="cell medium-6 large-3 padding10" x-show="active === i">
 
                                     {% include 'tournaments/broadcast/broadcasted_group_stage.html' %}
 

tournaments/templates/tournaments/broadcast/broadcasted_matches.html

@@ -83,7 +83,7 @@
                     <template x-for="i in paginatedMatches.length" >
                         <template x-for="match in paginatedMatches[i-1]" >
 
-                            <div class="cell medium-6 large-3" x-show="active === i">
+                            <div class="cell medium-6 large-3 padding10" x-show="active === i">
 
                                 {% include 'tournaments/broadcast/broadcasted_match.html' %}
 

tournaments/templates/tournaments/broadcast/broadcasted_planning.html

@@ -10,6 +10,12 @@
         <link rel="stylesheet" href="{% static 'tournaments/css/style.css' %}" />
         <link rel="stylesheet" href="{% static 'tournaments/css/broadcast.css' %}" />
         <style>
+            .bubble {
+                padding: 10px;
+                background-color: white;
+                border-radius: 24px;
+                box-shadow: 0 0 0px 0px #fbead6;
+            }
             .running {
                 background-color: #90ee90 !important;
             }
@@ -46,6 +52,9 @@
                 background-color: rgba(173, 216, 230, 0.3);
                 color: white;
             }
+            .match-cell .bubble.ended {
+                background-color: rgba(173, 216, 230, 0.3);
+            }
             .court-label {
                 box-sizing: border-box;
                 padding: 0;
@@ -165,10 +174,29 @@
             });
 
             let groupsPerPageThreshold = this.courtCount >= 5 ? Math.ceil(this.groupsPerPage / 2) : this.groupsPerPage;
+            let columns = this.courtCount >= 5 ? 1 : 2;  // Number of columns to display
 
             const paginatedGroups = [];
             for (let i = 0; i < Math.ceil(filteredGroups.length / groupsPerPageThreshold); i++) {
-                paginatedGroups.push(filteredGroups.slice(i * groupsPerPageThreshold, (i + 1) * groupsPerPageThreshold));
+                // For each page
+                const pageGroups = filteredGroups.slice(i * groupsPerPageThreshold, (i + 1) * groupsPerPageThreshold);
+
+                // Rearrange groups in vertical order
+                if (columns === 2) {
+                    const rearrangedGroups = [];
+                    const halfPageLength = Math.ceil(pageGroups.length / 2);
+
+                    // Create groups with alternating order: [0, halfPageLength, 1, halfPageLength+1, ...]
+                    for (let col = 0; col < halfPageLength; col++) {
+                        rearrangedGroups.push(pageGroups[col]); // First column
+                        if (col + halfPageLength < pageGroups.length) {
+                            rearrangedGroups.push(pageGroups[col + halfPageLength]); // Second column
+                        }
+                    }
+                    paginatedGroups.push(rearrangedGroups);
+                } else {
+                    paginatedGroups.push(pageGroups);
+                }
             }
             return paginatedGroups;
         },
@@ -230,7 +258,7 @@
     }" x-init="loop()">
 
         <header>
-            <div id="header">
+            <div id="header" class="header-broadcast">
                 <div class="left-content bubble-header">
                     <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
                     <div class="left-margin">
@@ -250,7 +278,7 @@
                             <div class="bubble-timeslot" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
                                 <h1 class="timeslot">00:00</h1>
                             </div>
-                            <div class="courts-row">
+                            <div class="courts-row" style="margin-left: 10px; margin-bottom: -10px;">
                                 <template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum">
                                     <div class="court-label" :style="{'width': calculateFractionWidth()}">
                                         <div class="bubble">
@@ -266,7 +294,7 @@
                             <div class="bubble-timeslot" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
                                 <h1 class="timeslot">00:00</h1>
                             </div>
-                            <div class="courts-row">
+                            <div class="courts-row" style="margin-bottom: -10px;">
                                 <template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum">
                                     <div class="court-label" :style="{'width': calculateFractionWidth()}">
                                         <div class="bubble">
@@ -280,7 +308,7 @@
                 </div>
 
                 <template x-for="(day, dayIndex) in days" :key="day">
-                    <div x-show="currentDayIndex === dayIndex">
+                    <div class="padding10" x-show="currentDayIndex === dayIndex">
                         <template x-for="(groupPage, pageIndex) in getMatchGroupsForDay(day)" :key="'page-' + pageIndex">
                             <div x-show="currentPageIndex === pageIndex">
                                 <div class="grid-x">
@@ -295,11 +323,12 @@
                                                     <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, 'empty': match.ended}" style="text-align: center;">
+                                                                <div class="bubble" :class="{'running': !match.ended && match.started, 'even': courtIndex % 2 === 1, 'ended': 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>
                                                                     </template>
+                                                                    <div class="bold" x-text="match.group_stage_name ? match.group_stage_name : match.title"></div>
+                                                                    <div class="minor-info" x-text="match.format"></div>
                                                                 </div>
                                                             </template>
                                                             <template x-if="!match">

tournaments/templates/tournaments/broadcast/broadcasted_prog.html

@@ -83,7 +83,7 @@
                     <template x-for="i in paginatedMatches.length" >
                         <template x-for="match in paginatedMatches[i-1]" >
 
-                            <div class="cell medium-6 large-3" x-show="active === i">
+                            <div class="cell medium-6 large-3 padding10" x-show="active === i">
 
                                 <template x-if="!match.empty">
                                     {% include 'tournaments/broadcast/broadcasted_match.html' %}

tournaments/templates/tournaments/broadcast/broadcasted_rankings.html

@@ -22,12 +22,24 @@
 <div x-data="{
         paginatedRankings: null,
         active: 1,
+        has_sponsors: {{ tournament.has_sponsors|lower }},
         retrieveRankings() {
             fetch('/tournament/{{ tournament.id }}/rankings/json/')
                 .then(res => res.json())
                 .then((data) => {
 
                 let pageSize = 16
+                if (window.innerHeight < 768) {
+                    pageSize = 12;
+                    if (this.has_sponsors) {
+                        pageSize = 10
+                    }
+                } else if (window.innerHeight < 1024) {
+                    if (this.has_sponsors) {
+                        pageSize = 12
+                    }
+                }
+
                 this.paginatedRankings = this.paginate(data, pageSize)
 
                 const splitGroups = [];
@@ -64,7 +76,7 @@
     <div class="grid-x">
         <template x-for="i in paginatedRankings.length" >
             <template x-for="column in paginatedRankings[i-1]" >
-                <div class="cell medium-6 large-6 topblock" x-show="active === i">
+                <div class="cell medium-6 large-6 topblock padding10" x-show="active === i">
                     {% include 'tournaments/broadcast/broadcasted_ranking.html' %}
                 </div>
             </template>

tournaments/templates/tournaments/broadcast/broadcasted_summons.html

@@ -22,12 +22,24 @@
 <div x-data="{
         paginatedMatches: null,
         active: 1,
+        has_sponsors: {{ tournament.has_sponsors|lower }},
         retrieveMatches() {
             fetch('/tournament/{{ tournament.id }}/summons/json/')
                 .then(res => res.json())
                 .then((data) => {
 
                 let pageSize = 16
+                if (window.innerHeight < 768) {
+                    pageSize = 12;
+                    if (this.has_sponsors) {
+                        pageSize = 10
+                    }
+                } else if (window.innerHeight < 1024) {
+                    if (this.has_sponsors) {
+                        pageSize = 12
+                    }
+                }
+
                 this.paginatedMatches = this.paginate(data, pageSize)
 
                 const splitGroups = [];
@@ -64,7 +76,7 @@
     <div class="grid-x">
         <template x-for="i in paginatedMatches.length" >
             <template x-for="column in paginatedMatches[i-1]" >
-                <div class="cell medium-6 large-6 topblock" x-show="active === i">
+                <div class="cell medium-6 large-6 topblock padding10" x-show="active === i">
 
                     {% include 'tournaments/broadcast/broadcasted_summon.html' %}
 

tournaments/templates/tournaments/match_cell.html

@@ -1,15 +1,19 @@
 {% load static %}
 
         <div class="cell medium-12 large-3 padding10">
-            <div class="bubble">
-
-                <div class="match-status-container-header flex-row">
             {% if match.tournament_title %}
-                    <label class="minor-info">{{ match.tournament_title }}</label>
+            <label class="minor-info bold padding10">{{ match.tournament_title }}</label>
             {% endif %}
+
+            <div class="bubble">
+                <div class="match-status-container-header flex-row">
+                    {% if prog_mode and match.group_stage_name %}
+                    <label class="matchtitle">{{ match.group_stage_name }}</label>
+                    {% else %}
                     <label class="matchtitle">{{ match.title }}</label>
+                    {% endif %}
                     {% if not match.ended %}
-                    <label class="right-label minor-info bold">{{ match.court }}</label>
+                    <label class="right-label minor-info">{{ match.court }}</label>
                     {% endif %}
                 </div>
 

tournaments/views.py

@@ -348,7 +348,7 @@ def qr_code_url_with_query(request, club_id):
     return url_with_query
 
 def qr_code_options():
-    return QRCodeOptions(size=9, border=4, error_correction='L')
+    return QRCodeOptions(size=8, border=4, error_correction='L')
 
 def tournament_matches(request, tournament_id):
     tournament = get_object_or_404(Tournament, pk=tournament_id)
@@ -392,7 +392,7 @@ def tournament_planning_json(request, tournament_id):
     day_param = request.GET.get('day', None)
 
     # Get days and match groups using the planned_matches_by_day method
-    days, match_groups = tournament.planned_matches_by_day(day=day_param, all=True, event_mode=True)
+    days, match_groups = tournament.planned_matches_by_day(day=day_param, all=True, event_mode=True, broadcast=True)
 
     # Format data for JSON response
     formatted_days = [formats.date_format(day, format='l j F').capitalize() for day in days]
@@ -1041,6 +1041,7 @@ def tournament_prog(request, tournament_id):
 
     context = {
         'tournament': tournament,
+        'prog_mode': True,
         'match_groups': match_groups,
         'days': days,
         'formatted_days': formatted_days,