refac: styling
This commit is contained in:
@@ -3,8 +3,9 @@
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { WEBUI_NAME, showSidebar, user } from '$lib/stores';
|
||||
import MenuLines from '$lib/components/icons/MenuLines.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Sidebar from '$lib/components/icons/Sidebar.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -30,21 +31,22 @@
|
||||
? 'md:max-w-[calc(100%-260px)]'
|
||||
: ''} max-w-full"
|
||||
>
|
||||
<nav class=" px-2.5 pt-1 backdrop-blur-xl drag-region">
|
||||
<nav class=" px-2.5 pt-1.5 backdrop-blur-xl drag-region">
|
||||
<div class=" flex items-center gap-1">
|
||||
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
aria-label="Toggle Sidebar"
|
||||
>
|
||||
<div class=" m-auto self-center">
|
||||
<MenuLines />
|
||||
</div>
|
||||
</button>
|
||||
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
>
|
||||
<div class=" self-center p-1.5">
|
||||
<Sidebar />
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class=" flex w-full">
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { onMount, getContext } from 'svelte';
|
||||
import { WEBUI_NAME, showSidebar, functions } from '$lib/stores';
|
||||
import MenuLines from '$lib/components/icons/MenuLines.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Sidebar from '$lib/components/icons/Sidebar.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -22,19 +23,20 @@
|
||||
>
|
||||
<nav class=" px-2.5 pt-1 backdrop-blur-xl w-full drag-region">
|
||||
<div class=" flex items-center">
|
||||
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
aria-label="Toggle Sidebar"
|
||||
>
|
||||
<div class=" m-auto self-center">
|
||||
<MenuLines />
|
||||
</div>
|
||||
</button>
|
||||
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end mt-1.5">
|
||||
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
>
|
||||
<div class=" self-center p-1.5">
|
||||
<Sidebar />
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class=" flex w-full">
|
||||
|
||||
@@ -3,9 +3,6 @@
|
||||
import { WEBUI_NAME, showSidebar, functions, config, user, showArchivedChats } from '$lib/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import MenuLines from '$lib/components/icons/MenuLines.svelte';
|
||||
import UserMenu from '$lib/components/layout/Sidebar/UserMenu.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
let loaded = false;
|
||||
|
||||
@@ -4,9 +4,10 @@
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import MenuLines from '$lib/components/icons/MenuLines.svelte';
|
||||
import UserMenu from '$lib/components/layout/Sidebar/UserMenu.svelte';
|
||||
import Notes from '$lib/components/notes/Notes.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Sidebar from '$lib/components/icons/Sidebar.svelte';
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -14,21 +15,22 @@
|
||||
? 'md:max-w-[calc(100%-260px)]'
|
||||
: ''} max-w-full"
|
||||
>
|
||||
<nav class=" px-2 pt-1 backdrop-blur-xl w-full drag-region">
|
||||
<nav class=" px-2 pt-1.5 ml-0.5 backdrop-blur-xl w-full drag-region">
|
||||
<div class=" flex items-center">
|
||||
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
aria-label="Toggle Sidebar"
|
||||
>
|
||||
<div class=" m-auto self-center">
|
||||
<MenuLines />
|
||||
</div>
|
||||
</button>
|
||||
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
>
|
||||
<div class=" self-center p-1.5">
|
||||
<Sidebar />
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="ml-2 py-0.5 self-center flex items-center justify-between w-full">
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { onMount, getContext } from 'svelte';
|
||||
import { WEBUI_NAME, showSidebar, functions } from '$lib/stores';
|
||||
import MenuLines from '$lib/components/icons/MenuLines.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Sidebar from '$lib/components/icons/Sidebar.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -20,21 +21,22 @@
|
||||
? 'md:max-w-[calc(100%-260px)]'
|
||||
: ''} max-w-full"
|
||||
>
|
||||
<nav class=" px-2.5 pt-1 backdrop-blur-xl w-full drag-region">
|
||||
<nav class=" px-2.5 pt-1.5 backdrop-blur-xl w-full drag-region">
|
||||
<div class=" flex items-center">
|
||||
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
aria-label="Toggle Sidebar"
|
||||
>
|
||||
<div class=" m-auto self-center">
|
||||
<MenuLines />
|
||||
</div>
|
||||
</button>
|
||||
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
>
|
||||
<div class=" self-center p-1.5">
|
||||
<Sidebar />
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class=" flex w-full">
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
} from '$lib/stores';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import MenuLines from '$lib/components/icons/MenuLines.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Sidebar from '$lib/components/icons/Sidebar.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -55,21 +55,22 @@
|
||||
? 'md:max-w-[calc(100%-260px)]'
|
||||
: ''} max-w-full"
|
||||
>
|
||||
<nav class=" px-2.5 pt-1 backdrop-blur-xl drag-region">
|
||||
<nav class=" px-2.5 pt-1.5 backdrop-blur-xl drag-region">
|
||||
<div class=" flex items-center gap-1">
|
||||
<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
aria-label="Toggle Sidebar"
|
||||
>
|
||||
<div class=" m-auto self-center">
|
||||
<MenuLines />
|
||||
</div>
|
||||
</button>
|
||||
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
|
||||
on:click={() => {
|
||||
showSidebar.set(!$showSidebar);
|
||||
}}
|
||||
>
|
||||
<div class=" self-center p-1.5">
|
||||
<Sidebar />
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
import { getChatByShareId, cloneSharedChatById } from '$lib/apis/chats';
|
||||
|
||||
import Messages from '$lib/components/chat/Messages.svelte';
|
||||
import Navbar from '$lib/components/layout/Navbar.svelte';
|
||||
|
||||
import { getUserById, getUserSettings } from '$lib/apis/users';
|
||||
import { getModels } from '$lib/apis';
|
||||
|
||||
Reference in New Issue
Block a user