alikia2x/cvsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve: UI for song info page & titlebar on mobile

Browse Source
This commit is contained in:
alikia2x (寒寒) 2025-03-30 18:54:10 +08:00
parent cded4cd825
commit 6fd34a88e7
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
2 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/TitleBarMobile.svelte
View File

@ -15,9 +15,9 @@
} }
</script> </script>
<div class="md:hidden fixed top-0 left-0 w-full h-16 bg-white/80 dark:bg-zinc-800/70 backdrop-blur-lg z-100"> <div class="md:hidden fixed top-0 left-0 w-full h-16 bg-white/80 dark:bg-zinc-800/70 backdrop-blur-lg z-50">
{#if !showSearchBox} {#if !showSearchBox}
<button class="inline-block ml-4 mt-4 text-white"> <button class="inline-block ml-4 mt-4 dark:text-white">
<MenuIcon /> <MenuIcon />
</button> </button>
<div class="ml-8 inline-flex h-full items-center"> <div class="ml-8 inline-flex h-full items-center">

76
packages/frontend/src/pages/song/[id]/info.astro
View File

@ -97,48 +97,48 @@ interface Snapshot {
<table class="table-auto w-full"> <table class="table-auto w-full">
<tbody> <tbody>
<tr> <tr>
<td class="border px-4 py-2 font-bold">ID</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">ID</td>
<td class="border px-4 py-2">{videoInfo?.id}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.id}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">AID</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">AID</td>
<td class="border px-4 py-2">{videoInfo?.aid}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.aid}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">BVID</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">BVID</td>
<td class="border px-4 py-2">{videoInfo?.bvid}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.bvid}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">标题</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">标题</td>
<td class="border px-4 py-2">{videoInfo?.title}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.title}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">描述</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">描述</td>
<td class="border px-4 py-2">{videoInfo?.description}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.description}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">UID</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">UID</td>
<td class="border px-4 py-2">{videoInfo?.uid}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.uid}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">标签</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">标签</td>
<td class="border px-4 py-2">{videoInfo?.tags}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.tags}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">发布时间</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">发布时间</td>
<td class="border px-4 py-2">{videoInfo?.published_at ? format(new Date(videoInfo.published_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.published_at ? format(new Date(videoInfo.published_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">时长 (秒)</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">时长 (秒)</td>
<td class="border px-4 py-2">{videoInfo?.duration}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.duration}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">创建时间</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">创建时间</td>
<td class="border px-4 py-2">{videoInfo?.created_at ? format(new Date(videoInfo.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.created_at ? format(new Date(videoInfo.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
</tr> </tr>
<tr> <tr>
<td class="border px-4 py-2 font-bold">封面</td> <td class="border dark:border-zinc-500 px-4 py-2 font-bold">封面</td>
<td class="border px-4 py-2">{videoInfo?.cover_url ? videoInfo.cover_url : '-'}</td> <td class="border dark:border-zinc-500 px-4 py-2">{videoInfo?.cover_url ? videoInfo.cover_url : '-'}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -152,27 +152,27 @@ interface Snapshot {
<table class="table-auto w-full"> <table class="table-auto w-full">
<thead> <thead>
<tr> <tr>
<th class="border px-4 py-2">创建时间</th> <th class="border dark:border-zinc-500 px-4 py-2">创建时间</th>
<th class="border px-4 py-2">观看</th> <th class="border dark:border-zinc-500 px-4 py-2">观看</th>
<th class="border px-4 py-2">硬币</th> <th class="border dark:border-zinc-500 px-4 py-2">硬币</th>
<th class="border px-4 py-2">点赞</th> <th class="border dark:border-zinc-500 px-4 py-2">点赞</th>
<th class="border px-4 py-2">收藏</th> <th class="border dark:border-zinc-500 px-4 py-2">收藏</th>
<th class="border px-4 py-2">分享</th> <th class="border dark:border-zinc-500 px-4 py-2">分享</th>
<th class="border px-4 py-2">弹幕</th> <th class="border dark:border-zinc-500 px-4 py-2">弹幕</th>
<th class="border px-4 py-2">评论</th> <th class="border dark:border-zinc-500 px-4 py-2">评论</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{snapshots.map((snapshot: Snapshot) => ( {snapshots.map((snapshot: Snapshot) => (
<tr> <tr>
<td class="border px-4 py-2">{format(new Date(snapshot.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN })}</td> <td class="border dark:border-zinc-500 px-4 py-2">{format(new Date(snapshot.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN })}</td>
<td class="border px-4 py-2">{snapshot.views}</td> <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.views}</td>
<td class="border px-4 py-2">{snapshot.coins}</td> <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.coins}</td>
<td class="border px-4 py-2">{snapshot.likes}</td> <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.likes}</td>
<td class="border px-4 py-2">{snapshot.favorites}</td> <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.favorites}</td>
<td class="border px-4 py-2">{snapshot.shares}</td> <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.shares}</td>
<td class="border px-4 py-2">{snapshot.danmakus}</td> <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.danmakus}</td>
<td class="border px-4 py-2">{snapshot.replies}</td> <td class="border dark:border-zinc-500 px-4 py-2">{snapshot.replies}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>