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