chore: 移除订阅卡片的单行最大宽度限制,支持铺满屏幕 (#359)

This commit is contained in:
ᴀᴍᴛᴏᴀᴇʀ
2025-06-09 12:17:19 +08:00
committed by GitHub
parent a98e49347b
commit a41efdbe78
3 changed files with 33 additions and 21 deletions

View File

@@ -65,7 +65,7 @@
<title>关注的合集 - Bili Sync</title>
</svelte:head>
<div class="max-w-6xl">
<div>
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold">关注的合集</h1>
@@ -83,13 +83,17 @@
<div class="text-muted-foreground">加载中...</div>
</div>
{:else if collections.length > 0}
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div
style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; width: 100%; max-width: none; justify-items: start;"
>
{#each collections as collection (collection.id)}
<SubscriptionCard
item={collection}
type="collection"
onSubscriptionSuccess={handleSubscriptionSuccess}
/>
<div style="max-width: 450px; width: 100%;">
<SubscriptionCard
item={collection}
type="collection"
onSubscriptionSuccess={handleSubscriptionSuccess}
/>
</div>
{/each}
</div>

View File

@@ -50,7 +50,7 @@
<title>我的收藏夹 - Bili Sync</title>
</svelte:head>
<div class="max-w-6xl">
<div>
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold">我的收藏夹</h1>
@@ -68,13 +68,17 @@
<div class="text-muted-foreground">加载中...</div>
</div>
{:else if favorites.length > 0}
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div
style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; width: 100%; max-width: none; justify-items: start;"
>
{#each favorites as favorite (favorite.fid)}
<SubscriptionCard
item={favorite}
type="favorite"
onSubscriptionSuccess={handleSubscriptionSuccess}
/>
<div style="max-width: 450px; width: 100%;">
<SubscriptionCard
item={favorite}
type="favorite"
onSubscriptionSuccess={handleSubscriptionSuccess}
/>
</div>
{/each}
</div>
{:else}

View File

@@ -63,7 +63,7 @@
<title>关注的UP主 - Bili Sync</title>
</svelte:head>
<div class="max-w-6xl">
<div>
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold">关注的UP主</h1>
@@ -81,13 +81,17 @@
<div class="text-muted-foreground">加载中...</div>
</div>
{:else if uppers.length > 0}
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div
style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; width: 100%; max-width: none; justify-items: start;"
>
{#each uppers as upper (upper.mid)}
<SubscriptionCard
item={upper}
type="upper"
onSubscriptionSuccess={handleSubscriptionSuccess}
/>
<div style="max-width: 450px; width: 100%;">
<SubscriptionCard
item={upper}
type="upper"
onSubscriptionSuccess={handleSubscriptionSuccess}
/>
</div>
{/each}
</div>