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,65 +553,38 @@
/> />
<div class="flex flex-col w-full max-h-[100dvh] h-full"> <div class="flex flex-col w-full max-h-[100dvh] h-full">
<button <div class="flex items-center justify-between">
class="flex space-x-1 w-fit" <button
on:click={() => { class="flex space-x-1 w-fit"
goto('/workspace/knowledge'); on:click={() => {
}} goto('/workspace/knowledge');
> }}
<div class=" self-center"> >
<svg <div class=" self-center">
xmlns="http://www.w3.org/2000/svg" <svg
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 20"
class="w-4 h-4" fill="currentColor"
> class="w-4 h-4"
<path >
fill-rule="evenodd" <path
d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" fill-rule="evenodd"
clip-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
/> clip-rule="evenodd"
</svg> />
</div> </svg>
<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div> </div>
</button> <div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button>
<div class=" flex-shrink-0">
<div>
<Badge type="success" content="Collection" />
</div>
</div>
</div>
<div class="flex flex-col my-2 flex-1 overflow-auto h-0"> <div class="flex flex-col my-2 flex-1 overflow-auto h-0">
{#if id && knowledge} {#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-row h-0 flex-1 overflow-auto"> <div class="flex flex-row h-0 flex-1 overflow-auto">
<div <div
class=" {largeScreen class=" {largeScreen
@ -669,7 +642,7 @@
files={filteredItems} files={filteredItems}
{selectedFileId} {selectedFileId}
on:click={(e) => { on:click={(e) => {
selectedFileId = e.detail; selectedFileId = selectedFileId === e.detail ? null : e.detail;
}} }}
on:delete={(e) => { on:delete={(e) => {
console.log(e.detail); console.log(e.detail);
@ -716,12 +689,40 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="m-auto"> <div class="m-auto pb-24">
<AddFilesPlaceholder title={$i18n.t('Select/Add Files')}> <div>
<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full"> <div class=" flex w-full mt-1 mb-3.5">
Select a file to view or drag and drop a file to upload <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>
</AddFilesPlaceholder> </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>
</div> </div>
{/if} {/if}
</div> </div>