stats page layout tweaks

This commit is contained in:
2026-03-07 13:13:09 +11:00
parent c2b047723f
commit a1ee591e6f
2 changed files with 29 additions and 15 deletions

View File

@@ -720,6 +720,9 @@
.items-start {
align-items: flex-start;
}
.items-stretch {
align-items: stretch;
}
.justify-between {
justify-content: space-between;
}
@@ -2316,6 +2319,11 @@
display: flex;
}
}
.lg\:w-auto {
@media (width >= 64rem) {
width: auto;
}
}
.lg\:grid-cols-2 {
@media (width >= 64rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));

View File

@@ -37,16 +37,16 @@ templ SeasonLeagueStats(
if len(topGoals) > 0 || len(topAssists) > 0 || len(topSaves) > 0 {
<div class="space-y-4">
<h2 class="text-xl font-bold text-text text-center">Trophy Leaders</h2>
<!-- Triangle layout: two side-by-side on wide screens, saves centered below -->
<div class="flex flex-col items-center gap-6">
<!-- Top row: Goals and Assists side by side when room allows -->
<div class="flex flex-col lg:flex-row gap-6 justify-center items-center lg:items-start">
@topGoalScorersTable(season, league, topGoals)
@topAssistersTable(season, league, topAssists)
</div>
<!-- Bottom row: Saves centered -->
@topSaversTable(season, league, topSaves)
<!-- Triangle layout: two side-by-side on wide screens, saves centered below -->
<div class="flex flex-col items-center gap-6 w-full">
<!-- Top row: Goals and Assists side by side when room allows -->
<div class="flex flex-col lg:flex-row gap-6 justify-center items-stretch w-full lg:w-auto">
@topGoalScorersTable(season, league, topGoals)
@topAssistersTable(season, league, topAssists)
</div>
<!-- Bottom row: Saves centered -->
@topSaversTable(season, league, topSaves)
</div>
</div>
}
<!-- All Stats Section -->
@@ -61,7 +61,7 @@ templ SeasonLeagueStats(
}
templ topGoalScorersTable(season *db.Season, league *db.League, goals []*db.LeagueTopGoalScorer) {
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden min-w-0 w-full lg:w-auto">
<div class="bg-mantle border-b border-surface1 px-4 py-3">
<h3 class="text-sm font-semibold text-text">
Top Goal Scorers
@@ -79,7 +79,8 @@ templ topGoalScorersTable(season *db.Season, league *db.League, goals []*db.Leag
<p class="text-subtext0 text-sm">No goal data available yet.</p>
</div>
} else {
<table>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-mantle border-b border-surface1">
<tr>
<th class="px-3 py-2 text-center text-xs font-semibold text-subtext0 w-10">#</th>
@@ -109,12 +110,13 @@ templ topGoalScorersTable(season *db.Season, league *db.League, goals []*db.Leag
}
</tbody>
</table>
</div>
}
</div>
}
templ topAssistersTable(season *db.Season, league *db.League, assists []*db.LeagueTopAssister) {
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden min-w-0 w-full lg:w-auto">
<div class="bg-mantle border-b border-surface1 px-4 py-3">
<h3 class="text-sm font-semibold text-text">
Top Assisters
@@ -132,7 +134,8 @@ templ topAssistersTable(season *db.Season, league *db.League, assists []*db.Leag
<p class="text-subtext0 text-sm">No assist data available yet.</p>
</div>
} else {
<table>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-mantle border-b border-surface1">
<tr>
<th class="px-3 py-2 text-center text-xs font-semibold text-subtext0 w-10">#</th>
@@ -162,12 +165,13 @@ templ topAssistersTable(season *db.Season, league *db.League, assists []*db.Leag
}
</tbody>
</table>
</div>
}
</div>
}
templ topSaversTable(season *db.Season, league *db.League, saves []*db.LeagueTopSaver) {
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden min-w-0 w-full lg:w-auto">
<div class="bg-mantle border-b border-surface1 px-4 py-3">
<h3 class="text-sm font-semibold text-text">
Top Saves
@@ -185,7 +189,8 @@ templ topSaversTable(season *db.Season, league *db.League, saves []*db.LeagueTop
<p class="text-subtext0 text-sm">No save data available yet.</p>
</div>
} else {
<table>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-mantle border-b border-surface1">
<tr>
<th class="px-3 py-2 text-center text-xs font-semibold text-subtext0 w-10">#</th>
@@ -215,6 +220,7 @@ templ topSaversTable(season *db.Season, league *db.League, saves []*db.LeagueTop
}
</tbody>
</table>
</div>
}
</div>
}