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

feat: recolor ui

Browse source
This commit is contained in:
Mat12143 2025-08-02 10:50:35 +02:00
parent 795a5a3a19
commit 3ee764ad03
3 changed files with 18 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,9 @@
} }
</script> </script>
<div class={`flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600 bg-lime-500 ${disabled ? "disabled" : ""}`}> <div
class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${disabled ? "disabled" : ""}`}
>
<input <input
type="text" type="text"
placeholder="Song & Artist" placeholder="Song & Artist"
@ -32,9 +34,8 @@
</span> </span>
{/if} {/if}
<button <button class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border border-0 font-semibold shadow-xl duration-100 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={sendSong}
class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border-2 border-lime-700 bg-lime-600 font-semibold text-white shadow-xl duration-100 hover:scale-105 active:scale-90" >Add</button
onclick={sendSong}>Add</button
> >
<span class="i-lucide-chevrons-left"></span> <span class="i-lucide-chevrons-left"></span>
</div> </div>

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

@ -12,14 +12,16 @@
<div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto"> <div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
{#if suggestions.length == 0} {#if suggestions.length == 0}
<p>No suggestions yet! Try to add a new one using the <b>Add</b> button</p> <p>No suggestions yet! Try to add a new one using the Add button</p>
{/if} {/if}
{#each suggestions as sug, idx} {#each suggestions as sug, idx}
<div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 bg-indigo-500 p-2 shadow-md duration-100 hover:bg-indigo-400"> <div
<div class="flex w-3/4 flex-row gap-2 items-center"> class="flex h-[80px] w-full flex-row gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay p-2 shadow-md duration-100 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
>
<div class="flex w-3/4 flex-row items-center 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" /> <img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
<div class="text-white flex-col w-fit h-fit"> <div class="h-fit w-fit flex-col text-white">
<b>{sug.title}</b> <b>{sug.title}</b>
<p>{sug.artist}</p> <p>{sug.artist}</p>
</div> </div>
@ -27,15 +29,15 @@
<div class="flex w-1/4 flex-row items-center justify-center gap-2"> <div class="flex w-1/4 flex-row items-center justify-center gap-2">
<button <button
class="text-green-500" class="text-green-500"
onclick={() => { onclick={async () => {
vote(idx, 1, sug.uuid) await vote(idx, 1, sug.uuid)
}}><ThumbsUp /></button }}><ThumbsUp /></button
> >
<p class="font-semibold text-white">{sug.upvote}</p> <p class="font-semibold text-white">{sug.upvote}</p>
<button <button
class="duration-100 hover:scale-150 text-red-500" class="text-red-500 duration-100 hover:scale-150"
onclick={() => { onclick={async () => {
vote(idx, -1, sug.uuid) await vote(idx, -1, sug.uuid)
}}><ThumbsDown /></button }}><ThumbsDown /></button
> >
</div> </div>

4
frontend/src/routes/admin/[id]/+page.svelte
View file

@ -87,8 +87,8 @@
<p>{formatTime(playerInfo.currentTime)} - {formatTime(playerInfo.duration)}</p> <p>{formatTime(playerInfo.currentTime)} - {formatTime(playerInfo.duration)}</p>
<input type="range" min="0" max={playerInfo.duration} disabled step="0.1" value={playerInfo.currentTime} class="w-full accent-blue-500" /> <input type="range" min="0" max={playerInfo.duration} disabled step="0.1" value={playerInfo.currentTime} class="w-full accent-blue-500" />
<div class="flex w-full flex-row items-center justify-center gap-6"> <div class="flex w-full flex-row items-center justify-center gap-6">
<button onclick={audioController.pause}>Pause</button> <button class="rounded-md border border-dark-pine-muted p-2 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={audioController.pause}>Pause</button>
<button onclick={playNext}>Next</button> <button class="rounded-md border border-dark-pine-muted p-2 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={playNext}>Next</button>
</div> </div>
</div> </div>
</div> </div>