From 20836cf4b743cd631648e98e6ef640d09357cca9 Mon Sep 17 00:00:00 2001
From: maeries <8ij4neqiu@mozmail.com>
Date: Sun, 23 Mar 2025 15:18:07 +0100
Subject: [PATCH] new table design for ranking and competition page
---
competition_page.py | 34 +++++++++++++++++++++++++++++-----
main.py | 2 ++
team_page.py | 22 ++++++++++++----------
world_ranking_list.py | 38 ++++++++++++++++++++++++++------------
4 files changed, 69 insertions(+), 27 deletions(-)
diff --git a/competition_page.py b/competition_page.py
index adcb53a..c394d92 100644
--- a/competition_page.py
+++ b/competition_page.py
@@ -60,9 +60,24 @@ def get_competition_page_html(self, competition_id):
tr:hover {{
background-color: #f5f5f5;
}}
+
+ tr:nth-child(even)>td:nth-child(1) {{
+ background-color: {self.BORDER_COLOR_DARK};
+ }}
+
+ tr:nth-child(odd)>td:nth-child(1) {{
+ background-color: {self.BORDER_COLOR};
+ }}
+
+ td:nth-child(1) {{
+ text-align: center;
+ font-weight: bold;
+ }}
+
p {{
animation: fadeInUp 0.5s ease-out forwards;
}}
+
.chart-container {{
margin-top: 30px;
display: flex;
@@ -77,19 +92,22 @@ def get_competition_page_html(self, competition_id):
padding: 20px;
box-sizing: border-box;
}}
+
.chart-container img {{
max-width: 100%;
height: auto;
}}
+
a {{
- color: {self.LINK_COLOR};
- text-decoration: none;
+ color: black;
transition: color 0.3s ease;
}}
+
a:hover {{
- color: {self.LINK_COLOR_HOVER};
- text-decoration: none;
+ color: {self.LINK_COLOR};
+ text-decoration: underline;
}}
+
.summary-stats {{
display: flex;
justify-content: space-around;
@@ -97,6 +115,7 @@ def get_competition_page_html(self, competition_id):
flex-wrap: wrap;
animation: fadeInUp 0.5s ease-out forwards;
}}
+
.stat-box {{
padding: 15px;
border: 1px solid #ddd;
@@ -107,21 +126,26 @@ def get_competition_page_html(self, competition_id):
text-align: center;
background-color: #f9f9f9;
}}
+
.stat-value {{
font-size: 24px;
font-weight: bold;
color: #333;
}}
+
.stat-label {{
font-size: 14px;
color: #666;
}}
+
.positive {{
color: green;
}}
+
.negative {{
color: red;
}}
+
@keyframes fadeInUp {{
from {{
opacity: 0;
@@ -151,7 +175,7 @@ def get_competition_page_html(self, competition_id):
<h2>Results</h2>
<table>
<tr>
- <th>Placement</th>
+ <th></th>
<th>Team</th>
<th>Elo Before</th>
<th>Elo Change</th>
diff --git a/main.py b/main.py
index 4bc3d11..4fa5a3a 100644
--- a/main.py
+++ b/main.py
@@ -38,10 +38,12 @@ class EloSystem:
self.competition_meta_data = self.load_competition_meta_data()
if self.competition_type == "electric":
self.BORDER_COLOR = "#ffff1e"
+ self.BORDER_COLOR_DARK = "#f9f918"
self.LINK_COLOR = "#ffc400"
self.LINK_COLOR_HOVER = "#cc9d00"
elif self.competition_type == "combustion":
self.BORDER_COLOR = "#ff8c00"
+ self.BORDER_COLOR_DARK = "#f98700"
self.LINK_COLOR = "#ff4500"
self.LINK_COLOR_HOVER = "#cc3700"
else:
diff --git a/team_page.py b/team_page.py
index e62d74a..0bc195a 100644
--- a/team_page.py
+++ b/team_page.py
@@ -171,15 +171,16 @@ def get_team_page_html(self, team_name, team_data, team_competitions):
</div>
<h2>Competition History</h2>
- <table>
- <tr>
- <th>Date</th>
- <th>Competition</th>
- <th>Placement</th>
- <th>Elo Before</th>
- <th>Elo After</th>
- <th>Elo Change</th>
- </tr>
+ <div style="overflow: scroll;">
+ <table>
+ <tr>
+ <th>Date</th>
+ <th>Competition</th>
+ <th>Placement</th>
+ <th>Elo Before</th>
+ <th>Elo After</th>
+ <th>Elo Change</th>
+ </tr>
""".format(clean_filename(team_name), team_name)
# Add rows for each competition
@@ -198,7 +199,8 @@ def get_team_page_html(self, team_name, team_data, team_competitions):
</tr>"""
html_content += """
- </table>
+ </table>
+ </div>
<p><small>Generated on {}</small></p>
</body>
diff --git a/world_ranking_list.py b/world_ranking_list.py
index 4c270a1..067f6ec 100644
--- a/world_ranking_list.py
+++ b/world_ranking_list.py
@@ -100,6 +100,19 @@ def get_world_ranking_html(self, sorted_teams):
background-color: #f5f5f5;
}}
+ tr:nth-child(even)>td:nth-child(1) {{
+ background-color: {self.BORDER_COLOR_DARK};
+ }}
+
+ tr:nth-child(odd)>td:nth-child(1) {{
+ background-color: {self.BORDER_COLOR};
+ }}
+
+ td:nth-child(1) {{
+ text-align: center;
+ font-weight: bold;
+ }}
+
.chart-container {{
margin: 30px 0;
display: flex;
@@ -121,14 +134,13 @@ def get_world_ranking_html(self, sorted_teams):
}}
a {{
- color: {self.LINK_COLOR};
- text-decoration: none;
+ color: black;
transition: color 0.3s ease;
}}
a:hover {{
- color: {self.LINK_COLOR_HOVER};
- text-decoration: none;
+ color: {self.LINK_COLOR};
+ text-decoration: underline;
}}
.timestamp {{
@@ -202,13 +214,14 @@ def get_world_ranking_html(self, sorted_teams):
</div>
<h2>Current Rankings</h2>
- <table>
- <tr>
- <th>Rank</th>
- <th>Team</th>
- <th>Elo Rating</th>
- <th>Competitions</th>
- </tr>
+ <div style="overflow: scroll;">
+ <table>
+ <tr>
+ <th></th>
+ <th>Team</th>
+ <th>Elo Rating</th>
+ <th>Competitions</th>
+ </tr>
"""
# Add rows for each team
@@ -222,7 +235,8 @@ def get_world_ranking_html(self, sorted_teams):
</tr>"""
html_content += """
- </table>
+ </table>
+ <div>
<div class="chart-container">
<img src="images/elo_distribution.png" alt="Elo Distribution">
--
GitLab