fix lucky loser and running match

tournaments/static/tournaments/css/style.css

@@ -827,3 +827,25 @@ h-margin {
 .strikethrough {
     text-decoration: line-through;
 }
+
+.status-container {
+    margin: 0 -20px -20px -20px; /* Negative margin to counter the bubble padding, including bottom */
+    padding: 10px 20px 20px 20px; /* Add padding back to maintain text alignment, including bottom */
+    border-radius: 0 0 24px 24px; /* Match the bubble's bottom corners */
+}
+
+.status-container.running {
+    background-color: #90ee90; /* Light green color */
+}
+
+.player {
+    position: relative; /* Ensures the overlay is positioned within this block */
+}
+
+.overlay-text {
+    position: absolute;
+    top: 50%;
+    right: 0%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+}

tournaments/templates/tournaments/broadcast/broadcasted_match.html

@@ -16,18 +16,18 @@
          <div>
 
              <div class="match-result">
-                <div class="player bold">
+                <div class="player">
                     <!-- Show lucky loser or walkout status -->
                     <template x-if="match.teams[i-1].is_lucky_loser">
-                        <div class="small">Repêché</div>
+                        <div class="overlay-text right-label minor-info semibold">(LL)</div>
                     </template>
                     <template x-if="match.teams[i-1].walk_out === 1">
-                        <div class="small">Forfait</div>
+                        <div class="overlay-text right-label minor-info semibold">(WO)</div>
                     </template>
 
                     <template x-for="name in match.teams[i-1].names">
                         <div :class="{
-                                'semibold': true,
+                                'bold': true,
                                 'strikethrough': match.teams[i-1].walk_out === 1,
                                 'winner': match.teams[i-1].is_winner
                             }">
@@ -74,7 +74,7 @@
 
          </div>
      </template>
-
+     <div class="status-container" :class="{'running': !match.ended && match.started}">
      <div class="top-margin flex-row">
          <label class="left-label minor-info bold"><span x-text="match.time_indication"></span></label>
          <label class="right-label minor-info semibold"><span x-text="match.format"></span></label>

tournaments/templates/tournaments/match_cell.html

@@ -16,14 +16,15 @@
                 <div class="match-result {% cycle 'bottom-border' '' %}">
                     <div class="player">
                         {% if team.id %}
-                        <a href="{% url 'team-details' tournament.id team.id %}" class="player-link"> <!-- Add this anchor tag -->
+                        <a href="{% url 'team-details' tournament.id team.id %}" class="player-link">
                         {% endif %}
 
-                        {% if team.is_lucky_loser %}
-                        <div class="small">Repêché</div>
-                        {% elif team.walk_out == 1 %}
-                        <div class="small">Forfait</div>
+                        {% if team.is_lucky_loser or team.walk_out == 1 %}
+                        <div class="overlay-text">
+                            {% if team.is_lucky_loser %}(LL){% elif team.walk_out == 1 %}(WO){% endif %}
+                        </div>
                         {% endif %}
+
                         {% for name in team.names %}
                         <div class="semibold{% if team.walk_out == 1 %} strikethrough{% endif %}{% if team.is_winner %} winner{% endif %}">
                             {% if name|length > 0 %}
@@ -61,19 +62,20 @@
                 {% endfor %}
 
                 </div>
-
-                <div class="flex-row top-margin">
-                    <label class="left-label minor-info bold">
-                        {% if match.show_time_indication %}
-                        {{ match.time_indication }}
-                        {% endif %}
-                    </label>
-                    <label class="right-label minor-info">
-                        {% if not match.ended %}
-                        {{ match.format }}
-                        {% endif %}
-                    </label>
-                    <!-- <a href="" class="right-label">{{ match.court }}</a> -->
+                <div class="status-container {% if not match.ended and match.started %}running{% endif %}">
+                    <div class="flex-row top-margin">
+                        <label class="left-label minor-info bold">
+                            {% if match.show_time_indication %}
+                            {{ match.time_indication }}
+                            {% endif %}
+                        </label>
+                        <label class="right-label minor-info">
+                            {% if not match.ended %}
+                            {{ match.format }}
+                            {% endif %}
+                        </label>
+                        <!-- <a href="" class="right-label">{{ match.court }}</a> -->
+                    </div>
                 </div>
 
             </div>