UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-10 07:35:53 +00:00
Code Issues Actions4 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-07-08 18:31:58 -07:00
parent b8d153ebb2
commit 9cea5f75bb
5 changed files with 21 additions and 24 deletions

9
src/lib/components/chat/Chat.svelte
View File

@ -1460,11 +1460,9 @@
</div> </div>
{/if} {/if}
<div class="flex flex-col flex-auto z-10"> <div class="flex flex-col flex-auto z-10 {showControls ? 'lg:pr-[24rem]' : ''}">
<div <div
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden {showControls class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden"
? 'lg:pr-[28rem]'
: ''} "
id="messages-container" id="messages-container"
bind:this={messagesContainerElement} bind:this={messagesContainerElement}
on:scroll={(e) => { on:scroll={(e) => {
@ -1490,7 +1488,7 @@
</div> </div>
</div> </div>
<div class={showControls ? 'lg:pr-[28rem]' : ''}> <div class="">
<MessageInput <MessageInput
bind:files bind:files
bind:prompt bind:prompt
@ -1513,7 +1511,6 @@
/> />
</div> </div>
</div> </div>
<ChatControls bind:show={showControls} /> <ChatControls bind:show={showControls} />
</div> </div>
{/if} {/if}

28
src/lib/components/chat/ChatControls.svelte
View File

@ -31,23 +31,21 @@
</script> </script>
{#if largeScreen} {#if largeScreen}
<div {#if show}
class="fixed h-screen max-h-[100dvh] min-h-screen z-50 top-0 right-0 {show <div class=" absolute bottom-0 right-0 z-20 h-full pointer-events-none">
? 'w-[28rem]' <div class="pr-4 pt-14 pb-8 w-[24rem] h-full" in:slide={{ duration: 200, axis: 'x' }}>
: 'w-0 translate-x-[28rem] '} transition" <div
> class="w-full h-full px-5 py-4 dark:bg-gray-850 border border-gray-100 dark:border-gray-800 rounded-xl shadow-lg z-50 pointer-events-auto"
<div class="px-6 pt-14 pb-8 h-full"> >
<div <Controls
class=" px-5 py-4 h-full dark:bg-gray-850 border border-gray-100 dark:border-gray-800 rounded-xl shadow-lg" on:close={() => {
> show = false;
<Controls }}
on:close={() => { />
show = false; </div>
}}
/>
</div> </div>
</div> </div>
</div> {/if}
{:else} {:else}
<Modal bind:show> <Modal bind:show>
<div class=" px-5 py-4 h-full"> <div class=" px-5 py-4 h-full">

2
src/lib/components/chat/Controls/Controls.svelte
View File

@ -7,7 +7,7 @@
<div class=" dark:text-white"> <div class=" dark:text-white">
<div class="mb-2 flex justify-between items-center"> <div class="mb-2 flex justify-between items-center">
<div class=" text-xl font-medium font-primary">Chat Controls</div> <div class=" text-lg font-medium font-primary">Chat Controls</div>
<div> <div>
<button <button

5
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@ -152,7 +152,10 @@
} }
tooltipInstance = tippy(`#info-${message.id}`, { tooltipInstance = tippy(`#info-${message.id}`, {
content: `<span class="text-xs" id="tooltip-${message.id}">${tooltipContent}</span>`, content: `<span class="text-xs" id="tooltip-${message.id}">${tooltipContent}</span>`,
allowHTML: true allowHTML: true,
theme: 'dark',
arrow: false,
offset: [0, 4]
}); });
} }
}; };

1
src/lib/components/layout/Navbar.svelte
View File

@ -107,7 +107,6 @@
<Tooltip content={$i18n.t('Controls')}> <Tooltip content={$i18n.t('Controls')}>
<button <button
id="new-chat-button"
class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition" class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => { on:click={() => {
showControls = !showControls; showControls = !showControls;