refac: styling

This commit is contained in:
Timothy J. Baek 2024-10-20 19:04:30 -07:00
parent 2f5c65bd1f
commit 438b277be0
3 changed files with 17 additions and 14 deletions

View File

@ -4,6 +4,9 @@
export let value = '';
export let placeholder = '';
export let rows = 1;
export let required = false;
export let className =
'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize-none h-full';
@ -12,7 +15,7 @@
onMount(async () => {
await tick();
if (textareaElement) {
setInterval(adjustHeight, 0);
setTimeout(adjustHeight, 0);
}
});
@ -28,10 +31,8 @@
bind:this={textareaElement}
bind:value
{placeholder}
on:input={adjustHeight}
class={className}
on:input={(e) => {
e.target.style.height = '';
e.target.style.height = `${e.target.scrollHeight}px`;
}}
rows="1"
{rows}
{required}
/>

View File

@ -6,6 +6,7 @@
import { onMount, tick, getContext } from 'svelte';
import { createNewPrompt, getPrompts } from '$lib/apis/prompts';
import Textarea from '$lib/components/common/Textarea.svelte';
const i18n = getContext('i18n');
@ -114,7 +115,7 @@
</button>
<form
class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
class="flex flex-col max-w-2xl mx-auto mt-4 mb-10 pb-10"
on:submit|preventDefault={() => {
submitHandler();
}}
@ -170,11 +171,11 @@
<div class="mt-2">
<div>
<textarea
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
<Textarea
className="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none overflow-y-hidden rounded-lg resize-none"
placeholder={$i18n.t('Write a summary in 50 words that summarizes [topic or keyword].')}
rows="6"
bind:value={content}
rows={6}
required
/>
</div>

View File

@ -9,6 +9,7 @@
import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
import { page } from '$app/stores';
import Textarea from '$lib/components/common/Textarea.svelte';
let loading = false;
@ -100,7 +101,7 @@
</button>
<form
class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
class="flex flex-col max-w-2xl mx-auto mt-4 mb-10 pb-10"
on:submit|preventDefault={() => {
updateHandler();
}}
@ -157,10 +158,10 @@
<div class="mt-2">
<div>
<textarea
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
<Textarea
className="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none overflow-y-hidden rounded-lg resize-none"
placeholder={$i18n.t(`Write a summary in 50 words that summarizes [topic or keyword].`)}
rows="6"
rows={6}
bind:value={content}
required
/>