refac: styling

This commit is contained in:
Timothy J. Baek 2024-06-09 02:05:36 -07:00
parent 1bc96de620
commit f7de01cbc2
10 changed files with 179 additions and 178 deletions

View File

@ -22,13 +22,13 @@
<div class="flex flex-col md:flex-row w-full h-full py-3 md:space-x-4"> <div class="flex flex-col md:flex-row w-full h-full py-3 md:space-x-4">
<div <div
class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col md:flex-none md:w-40 dark:text-gray-200 text-xs text-left scrollbar-hidden" class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col md:flex-none md:w-44 dark:text-gray-200 text-xs text-left scrollbar-hidden"
> >
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'general' 'general'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'general'; selectedTab = 'general';
}} }}
@ -53,8 +53,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'connections' 'connections'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'connections'; selectedTab = 'connections';
}} }}
@ -77,8 +77,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'models' 'models'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'models'; selectedTab = 'models';
}} }}
@ -103,8 +103,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'users' 'users'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'users'; selectedTab = 'users';
}} }}
@ -127,8 +127,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'interface' 'interface'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'interface'; selectedTab = 'interface';
}} }}
@ -153,8 +153,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'audio' 'audio'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'audio'; selectedTab = 'audio';
}} }}
@ -180,8 +180,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'images' 'images'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'images'; selectedTab = 'images';
}} }}
@ -206,8 +206,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'banners' 'banners'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'banners'; selectedTab = 'banners';
}} }}
@ -235,8 +235,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'pipelines' 'pipelines'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'pipelines'; selectedTab = 'pipelines';
}} }}
@ -265,8 +265,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'db' 'db'
? 'bg-gray-200 dark:bg-gray-700' ? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-850'}"
on:click={() => { on:click={() => {
selectedTab = 'db'; selectedTab = 'db';
}} }}

View File

@ -113,6 +113,7 @@
dispatch('save'); dispatch('save');
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<div> <div>
<div class=" mb-1 text-sm font-medium">{$i18n.t('STT Settings')}</div> <div class=" mb-1 text-sm font-medium">{$i18n.t('STT Settings')}</div>
@ -289,7 +290,7 @@
{/if} {/if}
</div> </div>
</div> </div>
</div>
<div class="flex justify-end text-sm font-medium"> <div class="flex justify-end text-sm font-medium">
<button <button
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg" class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"

View File

@ -33,7 +33,7 @@
saveHandler(); saveHandler();
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
<div class=" space-y-3 pr-1.5"> <div class=" space-y-3 pr-1.5">
<div class="flex w-full justify-between mb-2"> <div class="flex w-full justify-between mb-2">
<div class=" self-center text-sm font-semibold"> <div class=" self-center text-sm font-semibold">

View File

@ -162,7 +162,7 @@
dispatch('save'); dispatch('save');
}} }}
> >
<div class="space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class="space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null} {#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null}
<div class=" space-y-3"> <div class=" space-y-3">
<div class="mt-2 space-y-2 pr-1.5"> <div class="mt-2 space-y-2 pr-1.5">

View File

@ -30,7 +30,7 @@
saveHandler(); saveHandler();
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
<div> <div>
<div class=" mb-2 text-sm font-medium">{$i18n.t('Database')}</div> <div class=" mb-2 text-sm font-medium">{$i18n.t('Database')}</div>

View File

@ -56,7 +56,7 @@
saveHandler(); saveHandler();
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
{#if adminConfig !== null} {#if adminConfig !== null}
<div> <div>
<div class=" mb-3 text-sm font-medium">{$i18n.t('General Settings')}</div> <div class=" mb-3 text-sm font-medium">{$i18n.t('General Settings')}</div>

View File

@ -169,7 +169,7 @@
loading = false; loading = false;
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[24rem]"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden">
<div> <div>
<div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div> <div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div>

View File

@ -38,7 +38,7 @@
dispatch('save'); dispatch('save');
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden">
<div> <div>
<div class=" mb-2.5 text-sm font-medium flex"> <div class=" mb-2.5 text-sm font-medium flex">
<div class=" mr-1">{$i18n.t('Set Task Model')}</div> <div class=" mr-1">{$i18n.t('Set Task Model')}</div>

View File

@ -550,7 +550,7 @@
</script> </script>
<div class="flex flex-col h-full justify-between text-sm"> <div class="flex flex-col h-full justify-between text-sm">
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-full"> <div class=" space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
{#if ollamaEnabled} {#if ollamaEnabled}
{#if ollamaVersion !== null} {#if ollamaVersion !== null}
<div class="space-y-2 pr-1.5"> <div class="space-y-2 pr-1.5">

View File

@ -200,7 +200,7 @@
updateHandler(); updateHandler();
}} }}
> >
<div class=" pr-1.5 overflow-y-scroll h-full"> <div class=" pr-1.5 overflow-y-scroll scrollbar-hidden h-full">
{#if PIPELINES_LIST !== null} {#if PIPELINES_LIST !== null}
<div class="flex w-full justify-between mb-2"> <div class="flex w-full justify-between mb-2">
<div class=" self-center text-sm font-semibold"> <div class=" self-center text-sm font-semibold">