Skip to content

GitLab

Commit 39fdd95a authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

refac: styling

parent e6ff5af3
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 26 deletions
src/lib/components/chat/ModelSelector.svelte
View file @ 39fdd95a
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
} }
</script> </script>
<div class="flex flex-col mt-0.5 w-full"> <div class="flex flex-col w-full items-center md:items-start">
{#each selectedModels as selectedModel, selectedModelIdx} {#each selectedModels as selectedModel, selectedModelIdx}
<div class="flex w-full max-w-fit"> <div class="flex w-full max-w-fit">
<div class="overflow-hidden w-full"> <div class="overflow-hidden w-full">
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
</div> </div>
{#if showSetDefault} {#if showSetDefault}
<div class="text-left mt-0.5 ml-1 text-[0.7rem] text-gray-500"> <div class="hidden md:absolute text-left mt-0.5 ml-1 text-[0.7rem] text-gray-500">
<button on:click={saveDefaultModel}> {$i18n.t('Set as default')}</button> <button on:click={saveDefaultModel}> {$i18n.t('Set as default')}</button>
</div> </div>
{/if} {/if}
src/lib/components/chat/ModelSelector/Selector.svelte
View file @ 39fdd95a
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
<DropdownMenu.Content <DropdownMenu.Content
class=" z-40 {className} max-w-[calc(100vw-1rem)] justify-start rounded-lg bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50 outline-none " class=" z-40 {className} max-w-[calc(100vw-1rem)] justify-start rounded-lg bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50 outline-none "
transition={flyAndScale} transition={flyAndScale}
side={'bottom-start'} side={'bottom'}
sideOffset={4} sideOffset={4}
> >
<slot> <slot>
......
src/lib/components/layout/Navbar.svelte
View file @ 39fdd95a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { WEBUI_NAME, chatId, modelfiles, settings, showSettings } from '$lib/stores'; import { WEBUI_NAME, chatId, modelfiles, settings, showSettings, showSidebar } from '$lib/stores';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import ShareChatModal from '../chat/ShareChatModal.svelte'; import ShareChatModal from '../chat/ShareChatModal.svelte';
...@@ -28,8 +28,34 @@ ...@@ -28,8 +28,34 @@
<ShareChatModal bind:show={showShareChatModal} chatId={$chatId} /> <ShareChatModal bind:show={showShareChatModal} chatId={$chatId} />
<nav id="nav" class=" sticky py-2.5 top-0 flex flex-row justify-center z-30"> <nav id="nav" class=" sticky py-2.5 top-0 flex flex-row justify-center z-30">
<div class=" flex max-w-full w-full mx-auto px-5 pt-0.5 md:px-[1.3rem]"> <div class=" flex max-w-full w-full mx-auto px-5 pt-0.5 md:px-[1rem]">
<div class="flex items-center w-full max-w-full"> <div class="flex items-center w-full max-w-full">
<div class="{$showSidebar ? 'md:hidden' : ''} mr-3 self-start flex flex-none items-center">
<button
id="new-chat-button"
class="cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" m-auto self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
/>
</svg>
</div>
</button>
</div>
<div class="flex-1 overflow-hidden max-w-full"> <div class="flex-1 overflow-hidden max-w-full">
{#if showModelSelector} {#if showModelSelector}
<ModelSelector bind:selectedModels showSetDefault={!shareEnabled} /> <ModelSelector bind:selectedModels showSetDefault={!shareEnabled} />
...@@ -37,12 +63,12 @@ ...@@ -37,12 +63,12 @@
</div> </div>
<div class="self-start flex flex-none items-center"> <div class="self-start flex flex-none items-center">
<div class="md:hidden flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" /> <!-- <div class="md:hidden flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" /> -->
{#if !shareEnabled} {#if !shareEnabled}
<Tooltip content={$i18n.t('Settings')}> <Tooltip content={$i18n.t('Settings')}>
<button <button
class="cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-full transition" class="cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
id="open-settings-button" id="open-settings-button"
on:click={async () => { on:click={async () => {
await showSettings.set(!$showSettings); await showSettings.set(!$showSettings);
...@@ -81,7 +107,7 @@ ...@@ -81,7 +107,7 @@
}} }}
> >
<button <button
class="cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-full transition" class="cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
> >
<div class=" m-auto self-center"> <div class=" m-auto self-center">
<svg <svg
...@@ -105,7 +131,7 @@ ...@@ -105,7 +131,7 @@
<Tooltip content={$i18n.t('New Chat')}> <Tooltip content={$i18n.t('New Chat')}>
<button <button
id="new-chat-button" id="new-chat-button"
class=" cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-full transition" class="cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => { on:click={() => {
initNewChat(); initNewChat();
}} }}
......
src/lib/components/layout/Sidebar.svelte
View file @ 39fdd95a
...@@ -183,6 +183,17 @@ ...@@ -183,6 +183,17 @@
}} }}
/> />
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#if $showSidebar}
<div
class=" fixed md:hidden z-10 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
on:mousedown={() => {
showSidebar.set(!$showSidebar);
}}
/>
{/if}
<div <div
bind:this={navElement} bind:this={navElement}
id="sidebar" id="sidebar"
...@@ -193,14 +204,38 @@ ...@@ -193,14 +204,38 @@
data-state={$showSidebar} data-state={$showSidebar}
> >
<div <div
class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] {$showSidebar class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] z-50 {$showSidebar
? '' ? ''
: 'invisible'}" : 'invisible'}"
> >
<div class="px-2 flex justify-center space-x-2"> <div class="px-2 flex justify-between space-x-2">
<button
id="new-chat-button"
class=" cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" m-auto self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
/>
</svg>
</div>
</button>
<a <a
id="sidebar-new-chat-button" id="sidebar-new-chat-button"
class="flex-grow flex justify-between rounded-xl px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="flex justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href="/" href="/"
on:click={async () => { on:click={async () => {
selectedChatId = null; selectedChatId = null;
...@@ -212,24 +247,12 @@ ...@@ -212,24 +247,12 @@
}, 0); }, 0);
}} }}
> >
<div class="flex self-center">
<div class="self-center mr-1.5">
<img
src="{WEBUI_BASE_URL}/static/favicon.png"
class=" size-6 -translate-x-1.5 rounded-full"
alt="logo"
/>
</div>
<div class=" self-center font-medium text-sm">{$i18n.t('New Chat')}</div>
</div>
<div class="self-center"> <div class="self-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
class="w-4 h-4" class="size-5"
> >
<path <path
d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z" d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
...@@ -717,7 +740,7 @@ ...@@ -717,7 +740,7 @@
<div <div
id="sidebar-handle" id="sidebar-handle"
class="fixed left-0 top-[50dvh] -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0" class=" hidden md:fixed left-0 top-[50dvh] -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
> >
<Tooltip <Tooltip
placement="right" placement="right"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment