2025-summer/team-1
12
Fork 0
Code Issues Pull requests Projects Releases Activity

Add minimal styling

Browse source
This commit is contained in:
Leonardo Segala 2025-08-02 04:34:45 +02:00
parent a6a7eeb690
commit 2a4a4c3caa
3 changed files with 48 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/lib/components/SuggestionInput.svelte
View file

@ -9,7 +9,11 @@
}
</script>
<div class="flex h-full w-full flex-row items-center gap-2 rounded border-2 border-black p-4">
<input type="text" placeholder="Song & Artist" class="h-full w-3/4 rounded" bind:value={input} />
<button class="w-1/4 rounded" onclick={sendSong}>Send</button>
<div class="bg-lime-500 flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600">
<input type="text" placeholder="Song & Artist" class="font-bold outline-none text-white h-[50px] px-4 w-3/4 rounded" bind:value={input} />
<button
class="shadow-xl hover:scale-105 w-1/4 h-[40px] cursor-pointer bg-lime-600 border-lime-700 font-semibold text-white border-2 i-lucide-check rounded active:scale-90 duration-100"
onclick={sendSong}>Add</button
>
<span class="i-lucide-chevrons-left"></span>
</div>

28
frontend/src/lib/components/SuggestionList.svelte
View file

@ -3,29 +3,39 @@
let { suggestions, roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
async function vote(amount: number, songId: string) {
async function vote(idx: number, amount: number, songId: string) {
suggestions[idx].upvote += amount
await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
}
</script>
<div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
{#each suggestions as sug}
<div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-black p-2">
{#if suggestions.length == 0}
<p>No suggestions yet! Try to add a new one using the <b>Add</b> button</p>
{/if}
{#each suggestions as sug, idx}
<div class="shadow-md hover:bg-indigo-400 duration-100 bg-indigo-500 flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 p-2">
<div class="flex w-3/4 flex-row gap-2">
<img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
<h1>{sug.title} - {sug.artist}</h1>
<div class="text-white">
<p>{sug.title}</p>
<p>{sug.artist}</p>
</div>
</div>
<div class="flex w-1/4 flex-row items-center justify-center gap-2">
<button
class="grayscale"
onclick={() => {
vote(1, sug.uuid)
}}>+1</button
vote(idx, 1, sug.uuid)
}}>👍</button
>
<p>{sug.upvote}</p>
<p class="text-white font-semibold">{sug.upvote}</p>
<button
class="hover:scale-150 duration-100"
onclick={() => {
vote(-1, sug.uuid)
}}>-1</button
vote(idx, -1, sug.uuid)
}}><div class="rotate-180">👍</div></button
>
</div>
</div>