style: show post button if input not empty
This commit is contained in:
parent
88d5c14d54
commit
636d706ad5
2 changed files with 31 additions and 3 deletions
29
src/lib/components/CommentField.svelte
Normal file
29
src/lib/components/CommentField.svelte
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
<script lang="ts">
|
||||||
|
let content = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="comment-field">
|
||||||
|
<label for="comment" class="comment-input">
|
||||||
|
<input type="text" name="comment" placeholder="Leave some feedback" bind:value={content} />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{#if content.length > 0}
|
||||||
|
<button class="post-button">Post</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.comment-field {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-button {
|
||||||
|
width: 6em;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,5 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Comment from '$lib/components/Comment.svelte';
|
import Comment from '$lib/components/Comment.svelte';
|
||||||
|
import CommentField from '$lib/components/CommentField.svelte';
|
||||||
|
|
||||||
export let id: number;
|
export let id: number;
|
||||||
export let title: string;
|
export let title: string;
|
||||||
|
@ -33,9 +34,7 @@
|
||||||
<hr />
|
<hr />
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
<label for="comment">
|
<CommentField />
|
||||||
<input type="text" name="comment" placeholder="Leave some feedback" />
|
|
||||||
</label>
|
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue