mirror of
https://github.com/open-webui/open-webui
synced 2025-05-14 18:46:02 +00:00
refac: styling
This commit is contained in:
Timothy J. Baek
parent
210456e424
commit
e9decf2dda
@ -277,7 +277,7 @@
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<hr class=" dark:border-gray-700 my-2.5" />
|
||||
<hr class=" dark:border-gray-850 my-2.5" />
|
||||
|
||||
{#if tags.length > 0}
|
||||
<div class="px-2.5 pt-1 flex gap-1 flex-wrap">
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<hr class=" dark:border-gray-700" />
|
||||
<hr class=" dark:border-gray-850" />
|
||||
|
||||
<div class=" my-2 mb-5">
|
||||
{#each $modelfiles as modelfile}
|
||||
|
||||
@ -400,7 +400,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pb-2">
|
||||
<div class="pb-3">
|
||||
{#if !loading}
|
||||
<button
|
||||
class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class=" dark:border-gray-700 my-2.5" />
|
||||
<hr class=" dark:border-gray-850 my-2.5" />
|
||||
|
||||
<div class="my-3 mb-5">
|
||||
{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}
|
||||
|
||||
@ -89,95 +89,83 @@
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
||||
<div class=" flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class=" mx-auto w-full h-full">
|
||||
<div class="w-full h-full">
|
||||
<div class=" flex flex-col justify-center">
|
||||
<div class=" px-4 pt-3 mb-1.5">
|
||||
<div class=" flex items-center">
|
||||
<div
|
||||
class="{$showSidebar
|
||||
? 'md:hidden'
|
||||
: ''} mr-1 self-start flex flex-none items-center"
|
||||
>
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class="cursor-pointer p-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">
|
||||
<MenuLines />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div>
|
||||
</div>
|
||||
<div class=" flex flex-col w-full min-h-screen">
|
||||
<div class=" px-4 pt-3 mb-1.5">
|
||||
<div class=" flex items-center">
|
||||
<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-start flex flex-none items-center">
|
||||
<button
|
||||
id="sidebar-toggle-button"
|
||||
class="cursor-pointer p-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">
|
||||
<MenuLines />
|
||||
</div>
|
||||
|
||||
<div class="px-4 mb-1">
|
||||
<div
|
||||
class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
|
||||
>
|
||||
<button
|
||||
class="min-w-fit rounded-lg p-1.5 px-3 {tab === ''
|
||||
? 'bg-gray-50 dark:bg-gray-850'
|
||||
: ''} transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
tab = '';
|
||||
}}>Modelfiles</button
|
||||
>
|
||||
|
||||
<button
|
||||
class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'prompts'
|
||||
? 'bg-gray-50 dark:bg-gray-850'
|
||||
: ''} transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
tab = 'prompts';
|
||||
}}>Prompts</button
|
||||
>
|
||||
|
||||
<button
|
||||
class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'documents'
|
||||
? 'bg-gray-50 dark:bg-gray-850'
|
||||
: ''} transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
tab = 'documents';
|
||||
}}>Documents</button
|
||||
>
|
||||
|
||||
<button
|
||||
class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'playground'
|
||||
? 'bg-gray-50 dark:bg-gray-850'
|
||||
: ''} transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
tab = 'playground';
|
||||
}}>Playground</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class=" my-2 dark:border-gray-850" />
|
||||
|
||||
<div class=" py-1 px-5 min-h-full">
|
||||
{#if tab === ''}
|
||||
<Modelfiles />
|
||||
{:else if tab === 'prompts'}
|
||||
<Prompts />
|
||||
{:else if tab === 'documents'}
|
||||
<Documents />
|
||||
{:else if tab === 'playground'}
|
||||
<Playground />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 mb-1">
|
||||
<div
|
||||
class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
|
||||
>
|
||||
<button
|
||||
class="min-w-fit rounded-lg p-1.5 px-3 {tab === ''
|
||||
? 'bg-gray-50 dark:bg-gray-850'
|
||||
: ''} transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
tab = '';
|
||||
}}>Modelfiles</button
|
||||
>
|
||||
|
||||
<button
|
||||
class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'prompts'
|
||||
? 'bg-gray-50 dark:bg-gray-850'
|
||||
: ''} transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
tab = 'prompts';
|
||||
}}>Prompts</button
|
||||
>
|
||||
|
||||
<button
|
||||
class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'documents'
|
||||
? 'bg-gray-50 dark:bg-gray-850'
|
||||
: ''} transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
tab = 'documents';
|
||||
}}>Documents</button
|
||||
>
|
||||
|
||||
<button
|
||||
class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'playground'
|
||||
? 'bg-gray-50 dark:bg-gray-850'
|
||||
: ''} transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
tab = 'playground';
|
||||
}}>Playground</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class=" my-2 dark:border-gray-850" />
|
||||
|
||||
<div class=" py-1 px-5 h-full">
|
||||
{#if tab === ''}
|
||||
<Modelfiles />
|
||||
{:else if tab === 'prompts'}
|
||||
<Prompts />
|
||||
{:else if tab === 'documents'}
|
||||
<Documents />
|
||||
{:else if tab === 'playground'}
|
||||
<Playground />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user