UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-03-30 23:28:00 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: sidebar breakpoint

Browse Source
This commit is contained in:
Timothy J. Baek 2024-05-15 08:13:14 -10:00
parent b263e24e56
commit 8f5c671e4c
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/chat/Messages/UserMessage.svelte
View File

@ -60,7 +60,7 @@
class="prose chat-{message.role} w-full max-w-full flex flex-col justify-end dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line" class="prose chat-{message.role} w-full max-w-full flex flex-col justify-end dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
> >
{#if message.files} {#if message.files}
<div class="mt-2.5 mb-1 w-full flex flex-col justify-end overflow-x-auto gap-1.5 flex-wrap"> <div class="mt-2.5 mb-1 w-full flex flex-col justify-end overflow-x-auto gap-1 flex-wrap">
{#each message.files as file} {#each message.files as file}
<div class="self-end"> <div class="self-end">
{#if file.type === 'image'} {#if file.type === 'image'}

29
src/lib/components/layout/Sidebar.svelte
View File

@ -76,7 +76,26 @@
} }
}); });
mobile;
const onResize = () => {
if ($showSidebar && window.innerWidth < BREAKPOINT) {
showSidebar.set(false);
}
};
onMount(async () => { onMount(async () => {
mobile.subscribe((e) => {
console.log(e);
if ($showSidebar && e) {
showSidebar.set(false);
}
if (!$showSidebar && !e) {
showSidebar.set(true);
}
});
showSidebar.set(window.innerWidth > BREAKPOINT); showSidebar.set(window.innerWidth > BREAKPOINT);
await chats.set(await getChatList(localStorage.token)); await chats.set(await getChatList(localStorage.token));
@ -106,20 +125,12 @@
checkDirection(); checkDirection();
}; };
const onResize = () => {
if ($showSidebar && window.innerWidth < BREAKPOINT) {
showSidebar.set(false);
}
};
window.addEventListener('touchstart', onTouchStart); window.addEventListener('touchstart', onTouchStart);
window.addEventListener('touchend', onTouchEnd); window.addEventListener('touchend', onTouchEnd);
window.addEventListener('resize', onResize);
return () => { return () => {
window.removeEventListener('touchstart', onTouchStart); window.removeEventListener('touchstart', onTouchStart);
window.removeEventListener('touchend', onTouchEnd); window.removeEventListener('touchend', onTouchEnd);
window.removeEventListener('resize', onResize);
}; };
}); });
@ -207,7 +218,7 @@
bind:this={navElement} bind:this={navElement}
id="sidebar" id="sidebar"
class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
? 'lg:relative w-[260px]' ? 'md:relative w-[260px]'
: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 rounded-r-2xl : '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 rounded-r-2xl
" "
data-state={$showSidebar} data-state={$showSidebar}