forked from open-webui/open-webui
refac: styling
This commit is contained in:
Timothy J. Baek
parent
c419949bf9
commit
82fcec826c
8 changed files with 309 additions and 322 deletions
|
|
@ -83,10 +83,16 @@
|
|||
<div class="py-10 w-full">
|
||||
<div class=" flex flex-col justify-center">
|
||||
<div class=" flex justify-between items-center">
|
||||
<div class=" text-2xl font-semibold">Users ({users.length})</div>
|
||||
<div class="flex items-center text-2xl font-semibold">
|
||||
All Users
|
||||
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
|
||||
<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
|
||||
>{users.length}</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center space-x-1 border border-gray-200 dark:border-gray-600 px-3 py-1 rounded-lg"
|
||||
class="flex items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
showSettingsModal = !showSettingsModal;
|
||||
|
|
@ -110,7 +116,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class=" text-gray-500 text-xs mt-1">
|
||||
Click on the user role cell in the table to change a user's role.
|
||||
ⓘ Click on the user role button to change a user's role.
|
||||
</div>
|
||||
|
||||
<hr class=" my-3 dark:border-gray-600" />
|
||||
|
|
|
|||
|
|
@ -184,14 +184,15 @@
|
|||
<SettingsModal bind:show={showSettingsModal} />
|
||||
|
||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
||||
<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class=" flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<div class="mb-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class=" text-2xl font-semibold self-center">My Documents</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center space-x-1 border border-gray-200 dark:border-gray-600 px-3 py-1 rounded-lg"
|
||||
class="flex items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
showSettingsModal = !showSettingsModal;
|
||||
|
|
@ -214,6 +215,10 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" text-gray-500 text-xs mt-1">
|
||||
ⓘ Use '#' in the prompt input to load and select your documents.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" flex w-full space-x-2">
|
||||
<div class="flex flex-1">
|
||||
|
|
@ -240,7 +245,7 @@
|
|||
|
||||
<div>
|
||||
<button
|
||||
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
|
||||
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
|
||||
on:click={() => {
|
||||
document.getElementById('upload-doc-input')?.click();
|
||||
}}
|
||||
|
|
@ -307,6 +312,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="my-3 mb-5">
|
||||
{#each $documents.filter((doc) => (selectedTag === '' || (doc?.content?.tags ?? [])
|
||||
.map((tag) => tag.name)
|
||||
.includes(selectedTag)) && (query === '' || doc.name.includes(query))) as doc}
|
||||
|
|
@ -451,12 +457,9 @@
|
|||
|
||||
<div class=" my-2.5" />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if $documents.length > 0}
|
||||
<hr class=" dark:border-gray-700 my-2.5" />
|
||||
{/if}
|
||||
|
||||
<div class=" flex justify-between w-full mb-3">
|
||||
<div class=" flex justify-end w-full mb-2">
|
||||
<div class="flex space-x-2">
|
||||
<input
|
||||
id="documents-import-input"
|
||||
|
|
@ -544,29 +547,6 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs flex items-center space-x-1">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-3 h-3"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="line-clamp-1">
|
||||
Tip: Use '#' in the prompt input to swiftly load and select your documents.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -70,11 +70,11 @@
|
|||
</script>
|
||||
|
||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
||||
<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
|
||||
<div class=" text-2xl font-semibold mb-6">My Modelfiles</div>
|
||||
<div class=" text-2xl font-semibold mb-3">My Modelfiles</div>
|
||||
|
||||
<a class=" flex space-x-4 cursor-pointer w-full mb-3" href="/modelfiles/create">
|
||||
<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2" href="/modelfiles/create">
|
||||
<div class=" self-center w-10">
|
||||
<div
|
||||
class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
|
||||
|
|
@ -100,9 +100,13 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<hr class=" dark:border-gray-700" />
|
||||
|
||||
<div class=" my-2 mb-5">
|
||||
{#each $modelfiles as modelfile}
|
||||
<hr class=" dark:border-gray-700 my-2.5" />
|
||||
<div class=" flex space-x-4 cursor-pointer w-full mb-3">
|
||||
<div
|
||||
class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
|
||||
>
|
||||
<a
|
||||
class=" flex flex-1 space-x-4 cursor-pointer w-full"
|
||||
href={`/?models=${encodeURIComponent(modelfile.tagName)}`}
|
||||
|
|
@ -119,7 +123,7 @@
|
|||
|
||||
<div class=" flex-1 self-center">
|
||||
<div class=" font-bold capitalize">{modelfile.title}</div>
|
||||
<div class=" text-sm overflow-hidden text-ellipsis line-clamp-2">
|
||||
<div class=" text-sm overflow-hidden text-ellipsis line-clamp-1">
|
||||
{modelfile.desc}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -220,10 +224,9 @@
|
|||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<hr class=" dark:border-gray-700 my-2.5" />
|
||||
|
||||
<div class=" flex justify-between w-full mb-3">
|
||||
<div class=" flex justify-end w-full mb-3">
|
||||
<div class="flex space-x-1">
|
||||
<input
|
||||
id="modelfiles-import-input"
|
||||
|
|
@ -374,10 +377,10 @@
|
|||
</div>
|
||||
|
||||
<div class=" my-16">
|
||||
<div class=" text-2xl font-semibold mb-6">Made by OpenWebUI Community</div>
|
||||
<div class=" text-2xl font-semibold mb-3">Made by OpenWebUI Community</div>
|
||||
|
||||
<a
|
||||
class=" flex space-x-4 cursor-pointer w-full mb-3"
|
||||
class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
|
||||
href="https://openwebui.com/"
|
||||
target="_blank"
|
||||
>
|
||||
|
|
@ -402,7 +405,7 @@
|
|||
|
||||
<div class=" self-center">
|
||||
<div class=" font-bold">Discover a modelfile</div>
|
||||
<div class=" text-sm">Discover, download, and explore Ollama Modelfiles</div>
|
||||
<div class=" text-sm">Discover, download, and explore model presets</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -282,7 +282,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
|
|||
</script>
|
||||
|
||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
||||
<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class=" flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
|
||||
<input
|
||||
bind:this={filesInputElement}
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@
|
|||
</script>
|
||||
|
||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
||||
<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
|
||||
<input
|
||||
bind:this={filesInputElement}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
</script>
|
||||
|
||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
||||
<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<div class=" text-2xl font-semibold self-center">My Prompts</div>
|
||||
|
|
@ -84,13 +84,13 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $prompts.length === 0}
|
||||
<div />
|
||||
{:else}
|
||||
{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}
|
||||
<hr class=" dark:border-gray-700 my-2.5" />
|
||||
<div class=" flex space-x-4 cursor-pointer w-full mb-3">
|
||||
|
||||
<div class="my-3 mb-5">
|
||||
{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}
|
||||
<div
|
||||
class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
|
||||
>
|
||||
<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
|
||||
<a href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}>
|
||||
<div class=" flex-1 self-center pl-5">
|
||||
|
|
@ -196,11 +196,9 @@
|
|||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<hr class=" dark:border-gray-700 my-2.5" />
|
||||
|
||||
<div class=" flex justify-between w-full mb-3">
|
||||
<div class=" flex justify-end w-full mb-3">
|
||||
<div class="flex space-x-2">
|
||||
<input
|
||||
id="prompts-import-input"
|
||||
|
|
@ -301,7 +299,7 @@
|
|||
<div class=" text-2xl font-semibold mb-6">Made by OpenWebUI Community</div>
|
||||
|
||||
<a
|
||||
class=" flex space-x-4 cursor-pointer w-full mb-3"
|
||||
class=" flex space-x-4 cursor-pointer w-full mb-3 px-3 py-2"
|
||||
href="https://openwebui.com/?type=prompts"
|
||||
target="_blank"
|
||||
>
|
||||
|
|
@ -326,7 +324,7 @@
|
|||
|
||||
<div class=" self-center">
|
||||
<div class=" font-bold">Discover a prompt</div>
|
||||
<div class=" text-sm">Discover, download, and explore custom Prompts</div>
|
||||
<div class=" text-sm">Discover, download, and explore custom prompts</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
</script>
|
||||
|
||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
||||
<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class=" flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
|
||||
<div class=" text-2xl font-semibold mb-6">My Prompts</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
</script>
|
||||
|
||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
||||
<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="flex flex-col justify-between w-full overflow-y-auto">
|
||||
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
|
||||
<div class=" text-2xl font-semibold mb-6">My Prompts</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue