refac: collection styling

This commit is contained in:
Timothy J. Baek 2024-10-07 14:49:26 -07:00
parent 854024cdf8
commit 5a78f1d915

View File

@ -553,6 +553,7 @@
/>
<div class="flex flex-col w-full max-h-[100dvh] h-full">
<div class="flex items-center justify-between">
<button
class="flex space-x-1 w-fit"
on:click={() => {
@ -576,42 +577,14 @@
<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button>
<div class="flex flex-col my-2 flex-1 overflow-auto h-0">
{#if id && knowledge}
<div class=" flex w-full mt-1 mb-3.5">
<div class="flex-1">
<div class="flex items-center justify-between w-full px-0.5 mb-1">
<div class="w-full">
<input
type="text"
class="w-full font-medium text-2xl font-primary bg-transparent outline-none"
bind:value={knowledge.name}
on:input={() => {
changeDebounceHandler();
}}
/>
</div>
<div class=" flex-shrink-0">
<div>
<Badge type="success" content="Collection" />
</div>
</div>
</div>
<div class="flex w-full px-1">
<input
type="text"
class="w-full text-gray-500 text-sm bg-transparent outline-none"
bind:value={knowledge.description}
on:input={() => {
changeDebounceHandler();
}}
/>
</div>
</div>
</div>
<div class="flex flex-col my-2 flex-1 overflow-auto h-0">
{#if id && knowledge}
<div class="flex flex-row h-0 flex-1 overflow-auto">
<div
class=" {largeScreen
@ -669,7 +642,7 @@
files={filteredItems}
{selectedFileId}
on:click={(e) => {
selectedFileId = e.detail;
selectedFileId = selectedFileId === e.detail ? null : e.detail;
}}
on:delete={(e) => {
console.log(e.detail);
@ -716,12 +689,40 @@
</div>
</div>
{:else}
<div class="m-auto">
<AddFilesPlaceholder title={$i18n.t('Select/Add Files')}>
<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
<div class="m-auto pb-24">
<div>
<div class=" flex w-full mt-1 mb-3.5">
<div class="flex-1">
<div class="flex items-center justify-between w-full px-0.5 mb-1">
<div class="w-full">
<input
type="text"
class="text-center w-full font-medium text-3xl font-primary bg-transparent outline-none"
bind:value={knowledge.name}
on:input={() => {
changeDebounceHandler();
}}
/>
</div>
</div>
<div class="flex w-full px-1">
<input
type="text"
class="text-center w-full text-gray-500 bg-transparent outline-none"
bind:value={knowledge.description}
on:input={() => {
changeDebounceHandler();
}}
/>
</div>
</div>
</div>
</div>
<div class=" mt-2 text-center text-sm dark:text-gray-700 w-full">
Select a file to view or drag and drop a file to upload
</div>
</AddFilesPlaceholder>
</div>
{/if}
</div>