mirror of
https://github.com/maxdorninger/MediaManager.git
synced 2026-02-19 23:49:11 -05:00
refactor layout and improve card responsiveness in Svelte components
This commit is contained in:
@@ -33,9 +33,9 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card.Root class="h-full max-w-sm">
|
||||
<Card.Root class="h-full overflow-x-hidden col-span-full">
|
||||
<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}
|
||||
{#if result.year != null}
|
||||
({result.year})
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
{request.authorized_by?.email ?? 'N/A'}
|
||||
</Table.Cell>
|
||||
<!-- 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}
|
||||
<Button
|
||||
class=""
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
/>
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
</picture>
|
||||
@@ -57,7 +57,7 @@
|
||||
{:then tvShows}
|
||||
{#each tvShows as show}
|
||||
<a href={'/dashboard/tv/' + show.id}>
|
||||
<Card.Root class="h-full ">
|
||||
<Card.Root class="col-span-full max-w-[90vw] ">
|
||||
<Card.Header>
|
||||
<Card.Title class="h-6 truncate">{getFullyQualifiedShowName(show)}</Card.Title>
|
||||
<Card.Description class="truncate">{show.overview}</Card.Description>
|
||||
@@ -67,6 +67,7 @@
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</a>
|
||||
|
||||
{:else}
|
||||
<div class="col-span-full text-center text-muted-foreground">
|
||||
No TV shows added yet.
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
</div>
|
||||
</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">
|
||||
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
|
||||
Add a show
|
||||
@@ -128,7 +128,7 @@
|
||||
<h3 class="mx-auto">No Shows found.</h3>
|
||||
{:else}
|
||||
<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"
|
||||
>
|
||||
{#each results as result}
|
||||
|
||||
Reference in New Issue
Block a user