stats page layout tweaks
This commit is contained in:
@@ -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));
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user