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
+11 -7
View File
@@ -65,7 +65,7 @@
<title>关注的合集 - Bili Sync</title> <title>关注的合集 - Bili Sync</title>
</svelte:head> </svelte:head>
<div class="max-w-6xl"> <div>
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold">关注的合集</h1> <h1 class="text-2xl font-bold">关注的合集</h1>
@@ -83,13 +83,17 @@
<div class="text-muted-foreground">加载中...</div> <div class="text-muted-foreground">加载中...</div>
</div> </div>
{:else if collections.length > 0} {: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)} {#each collections as collection (collection.id)}
<SubscriptionCard <div style="max-width: 450px; width: 100%;">
item={collection} <SubscriptionCard
type="collection" item={collection}
onSubscriptionSuccess={handleSubscriptionSuccess} type="collection"
/> onSubscriptionSuccess={handleSubscriptionSuccess}
/>
</div>
{/each} {/each}
</div> </div>
+11 -7
View File
@@ -50,7 +50,7 @@
<title>我的收藏夹 - Bili Sync</title> <title>我的收藏夹 - Bili Sync</title>
</svelte:head> </svelte:head>
<div class="max-w-6xl"> <div>
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold">我的收藏夹</h1> <h1 class="text-2xl font-bold">我的收藏夹</h1>
@@ -68,13 +68,17 @@
<div class="text-muted-foreground">加载中...</div> <div class="text-muted-foreground">加载中...</div>
</div> </div>
{:else if favorites.length > 0} {: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)} {#each favorites as favorite (favorite.fid)}
<SubscriptionCard <div style="max-width: 450px; width: 100%;">
item={favorite} <SubscriptionCard
type="favorite" item={favorite}
onSubscriptionSuccess={handleSubscriptionSuccess} type="favorite"
/> onSubscriptionSuccess={handleSubscriptionSuccess}
/>
</div>
{/each} {/each}
</div> </div>
{:else} {:else}
+11 -7
View File
@@ -63,7 +63,7 @@
<title>关注的UP主 - Bili Sync</title> <title>关注的UP主 - Bili Sync</title>
</svelte:head> </svelte:head>
<div class="max-w-6xl"> <div>
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold">关注的UP主</h1> <h1 class="text-2xl font-bold">关注的UP主</h1>
@@ -81,13 +81,17 @@
<div class="text-muted-foreground">加载中...</div> <div class="text-muted-foreground">加载中...</div>
</div> </div>
{:else if uppers.length > 0} {: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)} {#each uppers as upper (upper.mid)}
<SubscriptionCard <div style="max-width: 450px; width: 100%;">
item={upper} <SubscriptionCard
type="upper" item={upper}
onSubscriptionSuccess={handleSubscriptionSuccess} type="upper"
/> onSubscriptionSuccess={handleSubscriptionSuccess}
/>
</div>
{/each} {/each}
</div> </div>