AI/open-webui
1
0
Fork 1
mirror of https://git.mirrors.martin98.com/https://github.com/open-webui/open-webui synced 2025-08-20 03:49:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-05-05 01:51:51 +04:00
parent f24d0085c2
commit 9faf2d9849
1 changed files with 72 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/lib/components/notes/Notes.svelte
View File

@ -276,7 +276,7 @@
<FilesOverlay show={dragged} /> <FilesOverlay show={dragged} />
<div id="notes-container" class="w-full h-full"> <div id="notes-container" class="w-full min-h-full">
{#if loaded} {#if loaded}
<DeleteConfirmDialog <DeleteConfirmDialog
bind:show={showDeleteConfirm} bind:show={showDeleteConfirm}
@ -293,82 +293,86 @@
<div class="px-4.5 @container h-full pt-2"> <div class="px-4.5 @container h-full pt-2">
{#if Object.keys(notes).length > 0} {#if Object.keys(notes).length > 0}
{#each Object.keys(notes) as timeRange} <div class="pb-10">
<div class="w-full text-xs text-gray-500 dark:text-gray-500 font-medium pb-2.5"> {#each Object.keys(notes) as timeRange}
{$i18n.t(timeRange)} <div class="w-full text-xs text-gray-500 dark:text-gray-500 font-medium pb-2.5">
</div> {$i18n.t(timeRange)}
</div>
<div class="mb-5 gap-2.5 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> <div
{#each notes[timeRange] as note, idx (note.id)} class="mb-5 gap-2.5 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
<div >
class=" flex space-x-4 cursor-pointer w-full px-4.5 py-4 bg-gray-50 dark:bg-gray-850 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl transition" {#each notes[timeRange] as note, idx (note.id)}
> <div
<div class=" flex flex-1 space-x-4 cursor-pointer w-full"> class=" flex space-x-4 cursor-pointer w-full px-4.5 py-4 bg-gray-50 dark:bg-gray-850 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl transition"
<a >
href={`/notes/${note.id}`} <div class=" flex flex-1 space-x-4 cursor-pointer w-full">
class="w-full -translate-y-0.5 flex flex-col justify-between" <a
> href={`/notes/${note.id}`}
<div class="flex-1"> class="w-full -translate-y-0.5 flex flex-col justify-between"
<div class=" flex items-center gap-2 self-center mb-1 justify-between"> >
<div class=" font-semibold line-clamp-1 capitalize">{note.title}</div> <div class="flex-1">
<div class=" flex items-center gap-2 self-center mb-1 justify-between">
<div class=" font-semibold line-clamp-1 capitalize">{note.title}</div>
<div> <div>
<NoteMenu <NoteMenu
onDownload={(type) => { onDownload={(type) => {
selectedNote = note; selectedNote = note;
downloadHandler(type); downloadHandler(type);
}} }}
onDelete={() => { onDelete={() => {
selectedNote = note; selectedNote = note;
showDeleteConfirm = true; showDeleteConfirm = true;
}} }}
>
<button
class="self-center w-fit text-sm p-1 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
> >
<EllipsisHorizontal className="size-5" /> <button
</button> class="self-center w-fit text-sm p-1 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
</NoteMenu> type="button"
>
<EllipsisHorizontal className="size-5" />
</button>
</NoteMenu>
</div>
</div>
<div
class=" text-xs text-gray-500 dark:text-gray-500 mb-3 line-clamp-5 min-h-18"
>
{#if note.data?.content?.md}
{note.data?.content?.md}
{:else}
{$i18n.t('No content')}
{/if}
</div> </div>
</div> </div>
<div <div class=" text-xs px-0.5 w-full flex justify-between items-center">
class=" text-xs text-gray-500 dark:text-gray-500 mb-3 line-clamp-5 min-h-18" <div>
> {dayjs(note.updated_at / 1000000).fromNow()}
{#if note.data?.content?.md}
{note.data?.content?.md}
{:else}
{$i18n.t('No content')}
{/if}
</div>
</div>
<div class=" text-xs px-0.5 w-full flex justify-between items-center">
<div>
{dayjs(note.updated_at / 1000000).fromNow()}
</div>
<Tooltip
content={note?.user?.email ?? $i18n.t('Deleted User')}
className="flex shrink-0"
placement="top-start"
>
<div class="shrink-0 text-gray-500">
{$i18n.t('By {{name}}', {
name: capitalizeFirstLetter(
note?.user?.name ?? note?.user?.email ?? $i18n.t('Deleted User')
)
})}
</div> </div>
</Tooltip> <Tooltip
</div> content={note?.user?.email ?? $i18n.t('Deleted User')}
</a> className="flex shrink-0"
placement="top-start"
>
<div class="shrink-0 text-gray-500">
{$i18n.t('By {{name}}', {
name: capitalizeFirstLetter(
note?.user?.name ?? note?.user?.email ?? $i18n.t('Deleted User')
)
})}
</div>
</Tooltip>
</div>
</a>
</div>
</div> </div>
</div> {/each}
{/each} </div>
</div> {/each}
{/each} </div>
{:else} {:else}
<div class="w-full h-full flex flex-col items-center justify-center"> <div class="w-full h-full flex flex-col items-center justify-center">
<div class="pb-20 text-center"> <div class="pb-20 text-center">