chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: reorganize league page layout into 2/3 and 1/3 column grid

Browse source
This commit is contained in:
Chris Parsons 2025-10-14 21:54:46 -07:00
parent 7729da9cc8
commit 025ba82cb2
1 changed files with 122 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/routes/leagues/$leagueId.tsx
View file

@ -183,9 +183,11 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
)}
</div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div className="grid gap-6 md:grid-cols-3">
{/* Left Column - 2/3 width on desktop */}
<div className="md:col-span-2 space-y-6">
{isUserCommissioner && season && availableTeamCount > 0 && (
<Card className="md:col-span-2 lg:col-span-3">
<Card>
<CardHeader>
<CardTitle>Invite Link</CardTitle>
<CardDescription>
@ -218,7 +220,7 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
</Card>
)}
<Card className="md:col-span-2 lg:col-span-3">
<Card>
<CardHeader>
<CardTitle>Teams</CardTitle>
<CardDescription>
@ -226,7 +228,7 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div className="space-y-3">
{teams.map((team) => {
const isOwned = team.ownerId === currentUserId;
const ownerName = team.ownerId ? ownerMap[team.ownerId] : null;
@ -259,7 +261,10 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
</div>
</CardContent>
</Card>
</div>
{/* Right Column - 1/3 width on desktop */}
<div className="space-y-6">
<Card>
<CardHeader>
<CardTitle>League Info</CardTitle>
@ -313,5 +318,6 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
</Card>
</div>
</div>
</div>
);
}