starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-20 15:55:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor layout and improve card responsiveness in Svelte components

Browse Source
This commit is contained in:
maxDorninger
2025-06-09 00:12:42 +02:00
parent deb51570a2
commit d3d83b31ff
5 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/add-show-card.svelte
View File

@@ -33,9 +33,9 @@
} }
</script> </script>
<Card.Root class="h-full max-w-sm"> <Card.Root class="h-full overflow-x-hidden col-span-full">
<Card.Header> <Card.Header>
<Card.Title class="flex h-12 items-center overflow-hidden leading-tight"> <Card.Title class="flex h-12 items-center leading-tight">
{result.name} {result.name}
{#if result.year != null} {#if result.year != null}
({result.year}) ({result.year})

2
web/src/lib/components/season-requests-table.svelte
View File

@@ -124,7 +124,7 @@
{request.authorized_by?.email ?? 'N/A'} {request.authorized_by?.email ?? 'N/A'}
</Table.Cell> </Table.Cell>
<!-- TODO: ADD DIALOGUE TO MODIFY REQUEST --> <!-- TODO: ADD DIALOGUE TO MODIFY REQUEST -->
<Table.Cell class="flex flex-col items-center gap-1"> <Table.Cell class="flex flex-col max-w-[150px] gap-1">
{#if user().is_superuser} {#if user().is_superuser}
<Button <Button
class="" class=""

2
web/src/lib/components/show-picture.svelte
View File

@@ -18,7 +18,7 @@
/> />
<img <img
alt="{getFullyQualifiedShowName(show)}'s Poster Image" alt="{getFullyQualifiedShowName(show)}'s Poster Image"
class="aspect-9/16 center h-auto max-w-full rounded-lg object-cover" class="aspect-9/16 center h-auto w-full rounded-lg object-cover"
src="{apiUrl}/static/image/{show.id}.jpeg" src="{apiUrl}/static/image/{show.id}.jpeg"
/> />
</picture> </picture>

3
web/src/routes/dashboard/tv/+page.svelte
View File

@@ -57,7 +57,7 @@
{:then tvShows} {:then tvShows}
{#each tvShows as show} {#each tvShows as show}
<a href={'/dashboard/tv/' + show.id}> <a href={'/dashboard/tv/' + show.id}>
<Card.Root class="h-full "> <Card.Root class="col-span-full max-w-[90vw] ">
<Card.Header> <Card.Header>
<Card.Title class="h-6 truncate">{getFullyQualifiedShowName(show)}</Card.Title> <Card.Title class="h-6 truncate">{getFullyQualifiedShowName(show)}</Card.Title>
<Card.Description class="truncate">{show.overview}</Card.Description> <Card.Description class="truncate">{show.overview}</Card.Description>
@@ -67,6 +67,7 @@
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
</a> </a>
{:else} {:else}
<div class="col-span-full text-center text-muted-foreground"> <div class="col-span-full text-center text-muted-foreground">
No TV shows added yet. No TV shows added yet.

4
web/src/routes/dashboard/tv/add-show/+page.svelte
View File

@@ -80,7 +80,7 @@
</div> </div>
</header> </header>
<div class="flex w-full flex-1 flex-col items-center gap-4 p-4 pt-0"> <div class="flex w-full flex-1 max-w-[90vw] flex-col items-center gap-4 p-4 pt-0">
<div class="grid w-full max-w-sm items-center gap-12"> <div class="grid w-full max-w-sm items-center gap-12">
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl"> <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
Add a show Add a show
@@ -128,7 +128,7 @@
<h3 class="mx-auto">No Shows found.</h3> <h3 class="mx-auto">No Shows found.</h3>
{:else} {:else}
<div <div
class="grid w-full max-w-full auto-rows-min gap-4 sm:grid-cols-1 class="grid w-full auto-rows-min gap-4 sm:grid-cols-1
md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5" md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
> >
{#each results as result} {#each results as result}