Merge branch 'main' into sync

tournaments/templates/tournaments/navigation_tournament.html

@@ -1,7 +1,10 @@
 <nav class="margin10">
 
     <a href="{% url 'tournament-info' tournament.id %}" class="topmargin5 orange">Informations</a>
-    <!-- <a href="{% url 'tournament-bracket' tournament.id %}" class="topmargin5 orange">Tableau</a> -->
+
+    {% if tournament.display_matches %}
+    <a href="{% url 'tournament-bracket' tournament.id %}" class="topmargin5 orange">Tableau</a>
+    {% endif %}
 
     {% if tournament.display_matches or tournament.display_group_stages %}
     <a href="{% url 'tournament' tournament.id %}" class="topmargin5 orange">Matches</a>

tournaments/templates/tournaments/tournament_bracket.html

@@ -93,13 +93,13 @@ function renderBracket() {
         if (roundIndex == finalRoundIndex || roundIndex == finalRoundIndex - 1 && displayLoserFinal ||roundIndex == finalRoundIndex + 1 && displayLoserFinal) {
         } else {
           nameSpan = document.createElement('a');
-          nameSpan.className = 'round-name btn small-button';
+          nameSpan.className = 'round-name';
+          nameSpan.classList.add('button');
           nameSpan.textContent = matchGroupName;
           if (roundId) {
               nameSpan.href = `/tournament/${tournamentId}/round/${roundId}/bracket/`;
               nameSpan.style.cursor = 'pointer';
           }
-          nameSpan.style.textDecoration = 'None';
         }
 
         const formatSpan = document.createElement('div');
@@ -372,18 +372,27 @@ function renderBracket() {
 }
 
 .round-name {
+    color: #707070;
     font-size: 1.5em;
-    margin-bottom: 5px;
+    padding: 8px 12px;
-    transition: color 0.2s;
 }
 
-.round-name a:hover {
+.round-name.button {
-    color: orange;
+    border-radius: 16px;
+    width: 100%;
+    display: inline-block;
+    background-color: #fae7ce;
+}
+
+.button:hover {
+    color: white;
+    background-color: #f39200;
 }
 
 .round-format {
     font-size: 0.9em;
-    color: #666;
+    color: #707070;
+    margin-top: -10px;
 }
 
 .matches-container {
@@ -416,7 +425,7 @@ function renderBracket() {
     top: 50%;
     width: 20px;
     height: 2px;
-    background: #666;
+    background: #707070;
 }
 
 .semi-final::after {
@@ -425,7 +434,7 @@ function renderBracket() {
     left: calc(100% + 20px); /* After horizontal line */
     width: 2px;
     height: calc((var(--next-match-distance)) / 2);
-    background: #666;
+    background: #707070;
 }
 
 /* Vertical line connecting pair of matches */
@@ -436,7 +445,7 @@ function renderBracket() {
     top: 50%;
     width: 2px;
     height: calc((var(--next-match-distance)) / 2);
-    background: #666;
+    background: #707070;
 }
 
 .butterfly-match:nth-child(2n+1)::before {
@@ -446,7 +455,7 @@ function renderBracket() {
     bottom: calc(50% - 2px); /* Account for half of horizontal line height */
     width: 2px;
     height: calc(((var(--next-match-distance)) / 2)); /* Add half of horizontal line height */
-    background: #666;
+    background: #707070;
 }
 
 /* Vertical line connecting pair of matches */
@@ -457,7 +466,7 @@ function renderBracket() {
     top: 50%;
     width: 2px;
     height: calc((var(--next-match-distance)) / 2);
-    background: #666;
+    background: #707070;
 }
 
 .butterfly-match.reverse-bracket:nth-child(2n+1)::before {
@@ -467,7 +476,7 @@ function renderBracket() {
     bottom: 50%; /* Account for half of horizontal line height */
     width: 2px;
     height: calc((var(--next-match-distance)) / 2); /* Add half of horizontal line height */
-    background: #666;
+    background: #707070;
 }
 
 /* Horizontal line to next round match */
@@ -477,7 +486,7 @@ function renderBracket() {
     top: 50%;
     width: 20px;
     height: 2px;
-    background: #666;
+    background: #707070;
 }
 
 .inward .incoming-line {