updated season league view page
This commit is contained in:
129
internal/view/seasonsview/season_league_layout.templ
Normal file
129
internal/view/seasonsview/season_league_layout.templ
Normal file
@@ -0,0 +1,129 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
import "fmt"
|
||||
|
||||
templ SeasonLeagueLayout(activeSection string, season *db.Season, league *db.League) {
|
||||
@baseview.Layout(fmt.Sprintf("%s - %s", season.Name, league.Name)) {
|
||||
<div class="max-w-screen-2xl mx-auto px-4 py-8">
|
||||
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-surface0 border-b border-surface1 px-6 py-8">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-text mb-2">{ season.Name } - { league.Name }</h1>
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="inline-block bg-surface1 px-3 py-1 rounded text-sm text-subtext0 font-mono">
|
||||
{ season.ShortName }
|
||||
</span>
|
||||
<span class="inline-block bg-blue px-3 py-1 rounded-full text-sm font-semibold text-mantle">
|
||||
{ league.ShortName }
|
||||
</span>
|
||||
@SlapVersionBadge(season.SlapVersion)
|
||||
@StatusBadge(season, false, false)
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
href={ templ.SafeURL("/seasons/" + season.ShortName) }
|
||||
class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
|
||||
bg-surface1 hover:bg-surface2 text-text transition"
|
||||
>
|
||||
Back to Season
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Season Dates -->
|
||||
<div class="mt-4 pt-4 border-t border-surface1">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Regular Season -->
|
||||
<div class="bg-mantle border border-surface1 rounded-lg p-4">
|
||||
<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
|
||||
<span class="text-blue">●</span>
|
||||
Regular Season
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
|
||||
<div class="text-sm text-text font-medium">{ formatDateLong(season.StartDate) }</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
|
||||
if !season.EndDate.IsZero() {
|
||||
<div class="text-sm text-text font-medium">{ formatDateLong(season.EndDate.Time) }</div>
|
||||
} else {
|
||||
<div class="text-sm text-subtext1 italic">Not set</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Finals -->
|
||||
<div class="bg-mantle border border-surface1 rounded-lg p-4">
|
||||
<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
|
||||
<span class="text-yellow">★</span>
|
||||
Finals
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
|
||||
if !season.FinalsStartDate.IsZero() {
|
||||
<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsStartDate.Time) }</div>
|
||||
} else {
|
||||
<div class="text-sm text-subtext1 italic">Not set</div>
|
||||
}
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
|
||||
if !season.FinalsEndDate.IsZero() {
|
||||
<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsEndDate.Time) }</div>
|
||||
} else {
|
||||
<div class="text-sm text-subtext1 italic">Not set</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab Navigation -->
|
||||
<nav class="bg-surface0 border-b border-surface1" data-tab-nav="season-league-content">
|
||||
<ul class="flex flex-wrap">
|
||||
@leagueNavItem("table", "Table", activeSection, season, league)
|
||||
@leagueNavItem("fixtures", "Fixtures", activeSection, season, league)
|
||||
@leagueNavItem("teams", "Teams", activeSection, season, league)
|
||||
@leagueNavItem("stats", "Stats", activeSection, season, league)
|
||||
@leagueNavItem("finals", "Finals", activeSection, season, league)
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- Content Area -->
|
||||
<main class="bg-crust p-6" id="season-league-content">
|
||||
{ children... }
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/tabs.js" defer></script>
|
||||
}
|
||||
}
|
||||
|
||||
templ leagueNavItem(section string, label string, activeSection string, season *db.Season, league *db.League) {
|
||||
{{
|
||||
isActive := section == activeSection
|
||||
baseClasses := "inline-block px-6 py-3 transition-colors cursor-pointer border-b-2"
|
||||
activeClasses := "border-blue text-blue font-semibold"
|
||||
inactiveClasses := "border-transparent text-subtext0 hover:text-text hover:border-surface2"
|
||||
url := fmt.Sprintf("/seasons/%s/leagues/%s/%s", season.ShortName, league.ShortName, section)
|
||||
}}
|
||||
<li class="inline-block">
|
||||
<a
|
||||
href={ templ.SafeURL(url) }
|
||||
hx-post={ url }
|
||||
hx-target="#season-league-content"
|
||||
hx-swap="innerHTML"
|
||||
hx-push-url={ url }
|
||||
class={ baseClasses, templ.KV(activeClasses, isActive), templ.KV(inactiveClasses, !isActive) }
|
||||
>
|
||||
{ label }
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
Reference in New Issue
Block a user