tcsenpai/pensieve
1
0
Fork 0
mirror of https://github.com/tcsenpai/pensieve.git synced 2025-06-07 03:35:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): update figure info style

Browse Source
This commit is contained in:
arkohut 2024-10-31 19:09:18 +08:00
parent cee18e7b35
commit 9dc1c856d0
1 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/lib/Figure.svelte
View File

@ -12,7 +12,7 @@
Library, Library,
Folder, Folder,
FileClock, FileClock,
Info IndentIncrease
} from 'lucide-svelte'; } from 'lucide-svelte';
import { translateAppName } from '$lib/utils'; import { translateAppName } from '$lib/utils';
import LucideIcon from '$lib/components/LucideIcon.svelte'; import LucideIcon from '$lib/components/LucideIcon.svelte';
@ -162,20 +162,26 @@
<div class="mb-4 relative z-[52]"> <div class="mb-4 relative z-[52]">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex-1" /> <div class="flex-1" />
<div class="flex items-center space-x-2 text-lg leading-tight font-medium text-black"> <div class="flex items-center text-lg leading-tight font-medium text-black {showDetails ? 'w-full' : 'w-4/5'}">
<LucideIcon name={translateAppName(app_name) || 'Image'} size={24} /> <div class="flex items-center justify-between w-full">
<p>{title}</p> <div class="flex-1 flex items-center justify-center min-w-0">
</div> <div class="flex items-center space-x-2 min-w-0">
<div class="flex-1 flex justify-end"> <LucideIcon name={translateAppName(app_name) || 'Image'} size={24} />
{#if showDetails} <p class="truncate">{title}</p>
</div>
</div>
<button <button
class="p-2 hover:bg-gray-100 rounded-full transition-colors" class="p-2 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0"
on:click={toggleDetails} on:click={toggleDetails}
> >
<Info size={24} class={showDetails ? 'text-indigo-600' : 'text-gray-400'} /> <IndentIncrease
size={24}
class={showDetails ? 'text-indigo-600' : 'text-gray-400'}
/>
</button> </button>
{/if} </div>
</div> </div>
<div class="flex-1" />
</div> </div>
</div> </div>
@ -223,22 +229,14 @@
</div> </div>
{/if} {/if}
<div class="relative flex-grow overflow-hidden"> <div class="relative flex-1 overflow-hidden flex items-center justify-center">
<a href={video} target="_blank" rel="noopener noreferrer" class="block"> <a href={video} target="_blank" rel="noopener noreferrer" class="block w-full h-full flex items-center justify-center">
<img <img
class="w-full h-full object-contain rounded-lg drop-shadow-md" class="w-full h-full object-contain rounded-lg drop-shadow-md"
src={image} src={image}
alt={title} alt={title}
/> />
</a> </a>
{#if !showDetails}
<button
class="opacity-0 group-hover:opacity-100 absolute top-4 right-4 p-0.5 rounded-full transition-all duration-200 hover:bg-gray-100 bg-white/80"
on:click={toggleDetails}
>
<Info size={24} class="text-indigo-600" />
</button>
{/if}
</div> </div>
{#if !showDetails} {#if !showDetails}