godmaire/larsen
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style: show post button if input not empty

Browse source
This commit is contained in:
Roman Godmaire 2023-11-25 18:25:12 -05:00
parent 88d5c14d54
commit 636d706ad5
2 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/lib/components/CommentField.svelte Normal file
View 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>

5
src/lib/components/TrackCard.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import Comment from '$lib/components/Comment.svelte';
import CommentField from '$lib/components/CommentField.svelte';
export let id: number;
export let title: string;
@ -33,9 +34,7 @@
<hr />
{/each}
<label for="comment">
<input type="text" name="comment" placeholder="Leave some feedback" />
</label>
<CommentField />
</footer>
</article>