ethan.chen/score-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UI components with improved styling, transitions, and layout adjustments across App, MediaFormModal, MediaItem, and StarRating components

Browse Source
This commit is contained in:
ethan.chen
2025-06-03 17:41:10 +08:00
parent 701021c112
commit 35e0df26fe
5 changed files with 70 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/MediaFormModal.svelte
View File

@@ -50,23 +50,23 @@
{#if show}
<div
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50"
transition:fade={{ duration: 200 }}
onclick={handleClose}
role="presentation"
>
<div
class="bg-white rounded-lg p-6 w-full mx-4 max-w-[800px]"
class="bg-gradient-to-br from-white to-gray-50 rounded-xl p-6 w-full mx-4 max-w-[800px] shadow-2xl"
transition:scale={{ duration: 200 }}
onclick={(e) => e.stopPropagation()}
role="presentation"
>
<div class="flex justify-between items-center mb-6">
<h2 id="modal-title" class="text-xl font-semibold text-gray-900">
<h2 id="modal-title" class="text-xl font-semibold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
{mode === 'add' ? '添加新作品' : '编辑作品'}
</h2>
<button
class="text-gray-400 hover:text-gray-500"
class="text-gray-400 hover:text-gray-600 transition-colors duration-200"
onclick={handleClose}
type="button"
aria-label="关闭"
@@ -84,7 +84,7 @@
id="title"
type="text"
bind:value={media.title}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
placeholder="请输入标题"
required
aria-required="true"
@@ -96,7 +96,7 @@
<select
id="type"
bind:value={media.type}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
required
aria-required="true"
>
@@ -131,7 +131,7 @@
id="platform"
type="text"
bind:value={media.platform}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
placeholder="例如：Steam、Netflix、Kindle等"
aria-label="输入平台名称"
/>
@@ -142,7 +142,7 @@
<textarea
id="notes"
bind:value={media.notes}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
rows="10"
placeholder="添加一些备注..."
aria-label="添加备注信息"
@@ -152,7 +152,7 @@
<div class="flex justify-end gap-3 mt-6">
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200"
onclick={handleClose}
>
取消
@@ -160,7 +160,7 @@
<button
type="button"
onclick={() => submitMedia(media)}
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-lg hover:from-indigo-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 shadow-sm hover:shadow-md"
>
{mode === 'add' ? '添加' : '保存'}
</button>