From c74a117c34109ac88237d978357ee1c5e6a1a08e Mon Sep 17 00:00:00 2001
From: Raz <razmig@staxriver.com>
Date: Wed, 7 May 2025 14:15:13 +0200
Subject: [PATCH] fix broadcast sponsor logo

---
 .../static/tournaments/css/broadcast.css      | 37 +++++++++++++++++++
 .../broadcast/broadcasted_auto.html           |  8 ++--
 .../broadcast/broadcasted_bracket.html        |  8 ++--
 .../broadcast/broadcasted_group_stages.html   |  8 ++--
 .../broadcast/broadcasted_matches.html        |  8 ++--
 .../broadcast/broadcasted_prog.html           |  8 ++--
 .../broadcast/broadcasted_rankings.html       |  6 +--
 .../broadcast/broadcasted_summons.html        |  6 +--
 8 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/tournaments/static/tournaments/css/broadcast.css b/tournaments/static/tournaments/css/broadcast.css
index f106b0f..c3c0814 100644
--- a/tournaments/static/tournaments/css/broadcast.css
+++ b/tournaments/static/tournaments/css/broadcast.css
@@ -29,6 +29,43 @@ body {
     box-shadow: 0 0 0px 0px #fbead6;
 }
 
+.bubble-footer {
+    background-color: white;
+    display: flex;
+    border-radius: 24px;
+    box-shadow: 0 0 0px 0px #fbead6;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    margin: 0;
+}
+
+.bubble-sponsor {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-broadcast {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    z-index: 100;
+}
+
+.sponsor-logo-broadcast {
+    max-height: 100px;
+    max-width: 100px;
+    object-fit: contain;
+}
+
 .bold {
     font-family: "Montserrat-Bold";
 }
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_auto.html b/tournaments/templates/tournaments/broadcast/broadcasted_auto.html
index 0448b0d..7db9743 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_auto.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_auto.html
@@ -178,13 +178,13 @@
         </div>
     </body>
 
-    <footer style="position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 100;">
+    <footer class="footer-broadcast">
         {% if tournament.event.images.exists %}
-        <div class="bubble" style="display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0;">
-            <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center;">
+        <div class="bubble-footer">
+            <div class="bubble-sponsor">
                 {% for image in tournament.event.images.all %}
                     <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
-                         style="max-height: 100px; max-width: 100px; object-fit: contain;">
+                        class="sponsor-logo-broadcast">
                 {% endfor %}
             </div>
         </div>
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html b/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
index 9b004eb..c1f95b7 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_bracket.html
@@ -157,13 +157,13 @@
         setInterval(fetchAndRenderBracket, 15000);
     </script>
 </body>
-<footer style="position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 100;">
+<footer class="footer-broadcast">
     {% if tournament.event.images.exists %}
-    <div class="bubble" style="display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0;">
-        <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center;">
+    <div class="bubble-footer">
+        <div class="bubble-sponsor">
             {% for image in tournament.event.images.all %}
                 <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
-                     style="max-height: 100px; max-width: 100px; object-fit: contain;">
+                    class="sponsor-logo-broadcast">
             {% endfor %}
         </div>
     </div>
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_group_stages.html b/tournaments/templates/tournaments/broadcast/broadcasted_group_stages.html
index a51d9c7..560d1c7 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_group_stages.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_group_stages.html
@@ -101,13 +101,13 @@
         </div>
 
     </body>
-    <footer style="position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 100;">
+    <footer class="footer-broadcast">
         {% if tournament.event.images.exists %}
-        <div class="bubble" style="display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0;">
-            <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center;">
+        <div class="bubble-footer">
+            <div class="bubble-sponsor">
                 {% for image in tournament.event.images.all %}
                     <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
-                         style="max-height: 100px; max-width: 100px; object-fit: contain;">
+                        class="sponsor-logo-broadcast">
                 {% endfor %}
             </div>
         </div>
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_matches.html b/tournaments/templates/tournaments/broadcast/broadcasted_matches.html
index 838fe95..33b6493 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_matches.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_matches.html
@@ -97,13 +97,13 @@
             </main>
         </div>
     </body>
-    <footer style="position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 100;">
+    <footer class="footer-broadcast">
         {% if tournament.event.images.exists %}
-        <div class="bubble" style="display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0;">
-            <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center;">
+        <div class="bubble-footer">
+            <div class="bubble-sponsor">
                 {% for image in tournament.event.images.all %}
                     <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
-                         style="max-height: 100px; max-width: 100px; object-fit: contain;">
+                        class="sponsor-logo-broadcast">
                 {% endfor %}
             </div>
         </div>
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_prog.html b/tournaments/templates/tournaments/broadcast/broadcasted_prog.html
index 9e56bf8..9755f45 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_prog.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_prog.html
@@ -97,13 +97,13 @@
             </main>
         </div>
     </body>
-    <footer style="position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 100;">
+    <footer class="footer-broadcast">
         {% if tournament.event.images.exists %}
-        <div class="bubble" style="display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0;">
-            <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center;">
+        <div class="bubble-footer">
+            <div class="bubble-sponsor">
                 {% for image in tournament.event.images.all %}
                     <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
-                         style="max-height: 100px; max-width: 100px; object-fit: contain;">
+                        class="sponsor-logo-broadcast">
                 {% endfor %}
             </div>
         </div>
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_rankings.html b/tournaments/templates/tournaments/broadcast/broadcasted_rankings.html
index 16ae564..45e2205 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_rankings.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_rankings.html
@@ -5,11 +5,11 @@
 {% block second_title %}Classement {{ tournament.broadcast_display_name }}{% endblock %}
 {% block sponsors %}
     {% if tournament.event.images.exists %}
-    <div class="bubble" style="display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0;">
-        <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center;">
+    <div class="bubble-footer">
+        <div class="bubble-sponsor">
             {% for image in tournament.event.images.all %}
                 <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
-                     style="max-height: 100px; max-width: 100px; object-fit: contain;">
+                    class="sponsor-logo-broadcast">
             {% endfor %}
         </div>
     </div>
diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_summons.html b/tournaments/templates/tournaments/broadcast/broadcasted_summons.html
index 8e31b13..c300a69 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_summons.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_summons.html
@@ -5,11 +5,11 @@
 {% block second_title %}Convocations {{ tournament.broadcast_display_name }}{% endblock %}
 {% block sponsors %}
     {% if tournament.event.images.exists %}
-    <div class="bubble" style="display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0;">
-        <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center;">
+    <div class="bubble-footer">
+        <div class="bubble-sponsor">
             {% for image in tournament.event.images.all %}
                 <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
-                     style="max-height: 100px; max-width: 100px; object-fit: contain;">
+                    class="sponsor-logo-broadcast">
             {% endfor %}
         </div>
     </div>