사진 또는 동영상이 없을 때 홈 페이지의 레이아웃이 깨지는 버그 수정

This commit is contained in:
static
2025-12-29 19:43:25 +09:00
parent 15b6a53710
commit cdb652cacf
2 changed files with 10 additions and 8 deletions

View File

@@ -100,7 +100,7 @@
count={rows.length} count={rows.length}
itemHeight={(index) => itemHeight={(index) =>
rows[index]!.type === "header" rows[index]!.type === "header"
? 32 ? 28
: Math.ceil(rows[index]!.items.length / 4) * 181 + : Math.ceil(rows[index]!.items.length / 4) * 181 +
(Math.ceil(rows[index]!.items.length / 4) - 1) * 4 + (Math.ceil(rows[index]!.items.length / 4) - 1) * 4 +
16} 16}
@@ -109,7 +109,7 @@
{#snippet item(index)} {#snippet item(index)}
{@const row = rows[index]!} {@const row = rows[index]!}
{#if row.type === "header"} {#if row.type === "header"}
<p class="pb-2 font-medium">{row.label}</p> <p class="pb-2 text-sm font-medium">{row.label}</p>
{:else} {:else}
<div class={["grid grid-cols-4 gap-x-1", row.isLast ? "pb-4" : "pb-1"]}> <div class={["grid grid-cols-4 gap-x-1", row.isLast ? "pb-4" : "pb-1"]}>
{#each row.items as { info }} {#each row.items as { info }}

View File

@@ -21,14 +21,16 @@
<div class="min-h-full space-y-4 bg-gray-100 px-4 pb-[5.5em] pt-4"> <div class="min-h-full space-y-4 bg-gray-100 px-4 pb-[5.5em] pt-4">
<p class="px-2 text-2xl font-bold text-gray-800">ArkVault</p> <p class="px-2 text-2xl font-bold text-gray-800">ArkVault</p>
<div class="space-y-2 rounded-xl bg-white px-2 pb-4 pt-2"> <div class="rounded-xl bg-white p-2">
<EntryButton onclick={() => goto("/gallery")} class="w-full"> <EntryButton onclick={() => goto("/gallery")} class="w-full">
<p class="text-left font-semibold">사진 및 동영상</p> <p class="text-left font-semibold">사진 및 동영상</p>
</EntryButton> </EntryButton>
<div class="grid grid-cols-4 gap-2 px-2"> {#if mediaFiles.length > 0}
<div class="grid grid-cols-4 gap-2 p-2">
{#each mediaFiles as file} {#each mediaFiles as file}
<FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} /> <FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
{/each} {/each}
</div> </div>
{/if}
</div> </div>
</div> </div>