Refactor card components for enhanced layout consistency
- Updated Card component styles across multiple files to standardize padding and gap settings, improving visual alignment and creating a cohesive appearance throughout the application.
This commit is contained in:
Denozordec
@@ -21,17 +21,17 @@
|
||||
|
||||
<Card.Root class={cn('gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm', className)}>
|
||||
{#if title}
|
||||
<div class="border-b border-border bg-muted/40 px-4 py-3">
|
||||
<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
|
||||
<Card.Title class="text-base font-semibold">{title}</Card.Title>
|
||||
{#if description}
|
||||
<Card.Description class="text-xs sm:text-sm">{description}</Card.Description>
|
||||
{/if}
|
||||
</div>
|
||||
</Card.Header>
|
||||
{/if}
|
||||
{#if toolbar}
|
||||
{@render toolbar()}
|
||||
{/if}
|
||||
<div class="p-0">
|
||||
<Card.Content class="p-0">
|
||||
{@render children()}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
@@ -141,7 +141,7 @@
|
||||
|
||||
<div class="mb-6 grid gap-4 lg:grid-cols-2">
|
||||
<Card.Root class="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
|
||||
<div class="border-b border-border bg-muted/40 px-4 py-3">
|
||||
<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
|
||||
<ServerIcon class="size-5" />
|
||||
@@ -151,13 +151,13 @@
|
||||
<Card.Description class="text-xs">OK vs degraded по fleet-status</Card.Description>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="h-56 p-4">
|
||||
<canvas bind:this={elDonut} class="max-h-full w-full"></canvas>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
<Card.Root class="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
|
||||
<div class="border-b border-border bg-muted/40 px-4 py-3">
|
||||
<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
|
||||
<ChartNoAxesCombinedIcon class="size-5" />
|
||||
@@ -167,7 +167,7 @@
|
||||
<Card.Description class="text-xs">До 8 пользователей, MiB</Card.Description>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="h-56 p-4">
|
||||
<canvas bind:this={elBar} class="max-h-full w-full"></canvas>
|
||||
</Card.Content>
|
||||
|
||||
@@ -563,7 +563,7 @@
|
||||
{#snippet skeleton()}
|
||||
<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
{#each Array.from({ length: 6 }) as _, i (i)}
|
||||
<Card.Root class="border border-border shadow-sm">
|
||||
<Card.Root class="gap-0 py-0 border border-border shadow-sm">
|
||||
<Card.Header class="space-y-2 pb-2">
|
||||
<Skeleton class="h-3 w-24" />
|
||||
<Skeleton class="h-8 w-20" />
|
||||
|
||||
@@ -312,7 +312,7 @@
|
||||
{#snippet skeleton()}
|
||||
<div class="mb-4 grid gap-4 sm:grid-cols-3">
|
||||
{#each Array.from({ length: 3 }) as _, i (i)}
|
||||
<Card.Root>
|
||||
<Card.Root class="gap-0 py-0">
|
||||
<Card.Header class="pb-2">
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="mt-2 h-8 w-12" />
|
||||
@@ -320,7 +320,7 @@
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
<Card.Root>
|
||||
<Card.Root class="gap-0 py-0">
|
||||
<Card.Content class="space-y-2 p-4">
|
||||
{#each Array.from({ length: 6 }) as _, i (i)}
|
||||
<Skeleton class="h-12 w-full" />
|
||||
|
||||
@@ -528,7 +528,7 @@
|
||||
>
|
||||
{#snippet skeleton()}
|
||||
<div class="space-y-4">
|
||||
<Card.Root>
|
||||
<Card.Root class="gap-0 py-0">
|
||||
<Card.Header>
|
||||
<Skeleton class="h-5 w-48" />
|
||||
<Skeleton class="h-4 w-64" />
|
||||
@@ -537,7 +537,7 @@
|
||||
<Skeleton class="h-[420px] w-full rounded-md" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
<Card.Root>
|
||||
<Card.Root class="gap-0 py-0">
|
||||
<Card.Content class="space-y-2 p-4">
|
||||
{#each Array.from({ length: 6 }) as _, i (i)}
|
||||
<Skeleton class="h-10 w-full" />
|
||||
|
||||
@@ -255,7 +255,7 @@
|
||||
</KpiStatCard>
|
||||
</div>
|
||||
|
||||
<Card.Root class="border-l-4 border-l-violet-500/40 shadow-sm">
|
||||
<Card.Root class="gap-0 py-0 border-l-4 border-l-violet-500/40 shadow-sm">
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Title class="text-base">Ноды</Card.Title>
|
||||
<Card.Description>
|
||||
@@ -351,7 +351,7 @@
|
||||
<Card.Root
|
||||
id="mihomo-proxies-{encodeURIComponent(r.alias)}"
|
||||
data-size="sm"
|
||||
class="bg-card/50 min-h-0 min-w-0 scroll-mt-20 gap-0 overflow-hidden pt-0 shadow-sm ring-1 ring-border/60"
|
||||
class="bg-card/50 min-h-0 min-w-0 scroll-mt-20 gap-0 overflow-hidden py-0 shadow-sm ring-1 ring-border/60"
|
||||
>
|
||||
<Card.Header class="border-border/80 border-b px-3 pb-3 pt-3 sm:px-4">
|
||||
<Card.Title class="font-mono text-sm font-semibold leading-none tracking-tight">
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
{#snippet skeleton()}
|
||||
<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{#each Array.from({ length: 4 }) as _, i (i)}
|
||||
<Card.Root class="border border-border shadow-sm">
|
||||
<Card.Root class="gap-0 py-0 border border-border shadow-sm">
|
||||
<Card.Header class="space-y-2 pb-2">
|
||||
<Skeleton class="h-3 w-24" />
|
||||
<Skeleton class="h-8 w-20" />
|
||||
|
||||
@@ -514,7 +514,7 @@
|
||||
<Skeleton class="mb-4 h-6 w-96 max-w-full" />
|
||||
<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
{#each Array.from({ length: 6 }) as _, i (i)}
|
||||
<Card.Root class="border-l-4 border-l-muted-foreground/30 shadow-sm">
|
||||
<Card.Root class="gap-0 py-0 border-l-4 border-l-muted-foreground/30 shadow-sm">
|
||||
<Card.Header class="pb-2">
|
||||
<div class="flex gap-3">
|
||||
<Skeleton class="size-10 shrink-0 rounded-lg" />
|
||||
@@ -532,7 +532,7 @@
|
||||
</div>
|
||||
<div class="grid gap-4 lg:grid-cols-2">
|
||||
{#each Array.from({ length: 6 }) as _, i (i)}
|
||||
<Card.Root class="border-l-4 border-l-muted-foreground/30 shadow-sm">
|
||||
<Card.Root class="gap-0 py-0 border-l-4 border-l-muted-foreground/30 shadow-sm">
|
||||
<Card.Header class="pb-2">
|
||||
<div class="flex gap-3">
|
||||
<Skeleton class="size-10 shrink-0 rounded-lg" />
|
||||
|
||||
@@ -366,7 +366,7 @@
|
||||
isEmpty={isDataEmpty}
|
||||
>
|
||||
{#snippet skeleton()}
|
||||
<Card.Root>
|
||||
<Card.Root class="gap-0 py-0">
|
||||
<Card.Content class="space-y-2 p-4">
|
||||
{#each Array.from({ length: 8 }) as _, i (i)}
|
||||
<Skeleton class="h-10 w-full" />
|
||||
|
||||
Reference in New Issue
Block a user