OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-05-20 05:07:59 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-11-06 21:13:37 -08:00
parent 6dc429504a
commit d961e8943e
4 changed files with 44 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/playground/Notes.svelte
View File

@ -18,7 +18,7 @@
let loading = false; let loading = false;
</script> </script>
<div class="relative flex-1 w-full h-full flex justify-center overflow-auto px-5 py-1"> <div class="relative flex-1 w-full h-full flex justify-center overflow-auto px-5">
{#if loading} {#if loading}
<div class=" absolute top-0 bottom-0 left-0 right-0 flex"> <div class=" absolute top-0 bottom-0 left-0 right-0 flex">
<div class="m-auto"> <div class="m-auto">

29
src/routes/(app)/admin/+layout.svelte
View File

@ -30,9 +30,9 @@
? 'md:max-w-[calc(100%-260px)]' ? 'md:max-w-[calc(100%-260px)]'
: ''}" : ''}"
> >
<div class=" px-3.5 py-2"> <div class=" px-3.5 pt-1.5">
<div class=" flex items-center gap-1"> <div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 flex flex-none items-center"> <div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
<button <button
id="sidebar-toggle-button" id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition" class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
@ -46,36 +46,31 @@
</div> </div>
</button> </button>
</div> </div>
<!-- <div class="flex items-center text-xl font-semibold">{$i18n.t('Admin Panel')}</div> -->
<div class=" flex w-full"> <div class=" flex w-full">
<div <div
class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent/10 p-1" class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1"
> >
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {['/admin', '/admin/'].includes( class="min-w-fit rounded-full p-1.5 {['/admin', '/admin/'].includes(
$page.url.pathname $page.url.pathname
) )
? 'bg-gray-50 dark:bg-gray-850' ? ''
: ''} transition" : 'text-gray-300 dark:text-gray-600'} transition"
href="/admin">{$i18n.t('Dashboard')}</a href="/admin">{$i18n.t('Dashboard')}</a
> >
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/admin/evaluations')
'/admin/evaluations' ? ''
) : 'text-gray-300 dark:text-gray-600'} transition"
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/admin/evaluations">{$i18n.t('Evaluations')}</a href="/admin/evaluations">{$i18n.t('Evaluations')}</a
> >
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/admin/settings')
'/admin/settings' ? ''
) : 'text-gray-300 dark:text-gray-600'} transition"
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/admin/settings">{$i18n.t('Settings')}</a href="/admin/settings">{$i18n.t('Settings')}</a
> >
</div> </div>

29
src/routes/(app)/playground/+layout.svelte
View File

@ -20,9 +20,9 @@
? 'md:max-w-[calc(100%-260px)]' ? 'md:max-w-[calc(100%-260px)]'
: ''}" : ''}"
> >
<div class=" px-3.5 py-2"> <div class=" px-3.5 mt-1.5">
<div class=" flex items-center gap-1"> <div class=" flex items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 flex flex-none items-center"> <div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
<button <button
id="sidebar-toggle-button" id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition" class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
@ -36,36 +36,33 @@
</div> </div>
</button> </button>
</div> </div>
<!-- <div class="flex items-center text-xl font-semibold">{$i18n.t('Admin Panel')}</div> -->
<div class=" flex w-full"> <div class=" flex w-full">
<div <div
class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent/10 p-1" class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1"
> >
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {['/playground', '/playground/'].includes( class="min-w-fit rounded-full p-1.5 {['/playground', '/playground/'].includes(
$page.url.pathname $page.url.pathname
) )
? 'bg-gray-50 dark:bg-gray-850' ? ''
: ''} transition" : 'text-gray-300 dark:text-gray-600'} transition"
href="/playground">{$i18n.t('Chat')}</a href="/playground">{$i18n.t('Chat')}</a
> >
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/playground/notes')
'/playground/notes' ? ''
) : 'text-gray-300 dark:text-gray-600'} transition"
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/playground/notes">{$i18n.t('Notes')}</a href="/playground/notes">{$i18n.t('Notes')}</a
> >
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
'/playground/completions' '/playground/completions'
) )
? 'bg-gray-50 dark:bg-gray-850' ? ''
: ''} transition" : 'text-gray-300 dark:text-gray-600'} transition"
href="/playground/completions">{$i18n.t('Completions')}</a href="/playground/completions">{$i18n.t('Completions')}</a
> >
</div> </div>

44
src/routes/(app)/workspace/+layout.svelte
View File

@ -30,9 +30,9 @@
? 'md:max-w-[calc(100%-260px)]' ? 'md:max-w-[calc(100%-260px)]'
: ''}" : ''}"
> >
<div class=" px-3.5 my-2 bg-transparent backdrop-blur-xl"> <div class=" px-3.5 mt-1.5 bg-transparent backdrop-blur-xl">
<div class=" flex items-center gap-1"> <div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-center flex flex-none items-center"> <div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
<button <button
id="sidebar-toggle-button" id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition" class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
@ -47,58 +47,50 @@
</button> </button>
</div> </div>
<!-- <div class="flex items-center text-xl font-semibold mr-3">{$i18n.t('Workspace')}</div> -->
<div class=""> <div class="">
<div <div
class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent/10 backdrop-blur-2xl p-1 touch-auto pointer-events-auto" class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1 touch-auto pointer-events-auto"
> >
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/models')
'/workspace/models' ? ''
) : 'text-gray-300 dark:text-gray-600'} transition"
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/workspace/models">{$i18n.t('Models')}</a href="/workspace/models">{$i18n.t('Models')}</a
> >
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
'/workspace/knowledge' '/workspace/knowledge'
) )
? 'bg-gray-50 dark:bg-gray-850' ? ''
: ''} transition" : 'text-gray-300 dark:text-gray-600'} transition"
href="/workspace/knowledge" href="/workspace/knowledge"
> >
{$i18n.t('Knowledge')} {$i18n.t('Knowledge')}
</a> </a>
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/prompts')
'/workspace/prompts' ? ''
) : 'text-gray-300 dark:text-gray-600'} transition"
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/workspace/prompts">{$i18n.t('Prompts')}</a href="/workspace/prompts">{$i18n.t('Prompts')}</a
> >
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/tools')
'/workspace/tools' ? ''
) : 'text-gray-300 dark:text-gray-600'} transition"
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/workspace/tools" href="/workspace/tools"
> >
{$i18n.t('Tools')} {$i18n.t('Tools')}
</a> </a>
<a <a
class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes( class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
'/workspace/functions' '/workspace/functions'
) )
? 'bg-gray-50 dark:bg-gray-850' ? ''
: ''} transition" : 'text-gray-300 dark:text-gray-600'} transition"
href="/workspace/functions" href="/workspace/functions"
> >
{$i18n.t('Functions')} {$i18n.t('Functions')}