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

Minimal aesthetic upgrades

Browse source
This commit is contained in:
Leonardo Segala 2025-08-02 08:31:31 +02:00
parent ca0b441229
commit 78f03dec5d
3 changed files with 10 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { Suggestion } from "$lib/types" import type { Suggestion } from "$lib/types"
import { ThumbsUp, ThumbsDown } from "@lucide/svelte"
let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props() let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
@ -16,26 +17,26 @@
{#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 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 class="flex w-3/4 flex-row gap-2"> <div class="flex w-3/4 flex-row gap-2 items-center">
<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"> <div class="text-white flex-col w-fit h-fit">
<p>{sug.title}</p> <b>{sug.title}</b>
<p>{sug.artist}</p> <p>{sug.artist}</p>
</div> </div>
</div> </div>
<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="grayscale" class="text-green-500"
onclick={() => { onclick={() => {
vote(idx, 1, sug.uuid) vote(idx, 1, sug.uuid)
}}>👍</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" class="duration-100 hover:scale-150 text-red-500"
onclick={() => { onclick={() => {
vote(idx, -1, sug.uuid) vote(idx, -1, sug.uuid)
}}><div class="rotate-180">👍</div></button }}><ThumbsDown /></button
> >
</div> </div>
</div> </div>

2
frontend/src/routes/+layout.svelte
View file

@ -4,6 +4,6 @@
let { children } = $props() let { children } = $props()
</script> </script>
<div class="min-h-screen w-full bg-light-pine-base px-6 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text"> <div class="min-h-screen w-full bg-light-pine-base px-1 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
{@render children()} {@render children()}
</div> </div>

2
frontend/src/routes/room/[id]/+page.svelte
View file

@ -69,7 +69,7 @@
{#if returnError} {#if returnError}
<Error {returnError} /> <Error {returnError} />
{:else} {:else}
<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10"> <div class="flex w-full flex-col items-center justify-center py-4 px-2 lg:p-10">
<QueueSlider {queueSongs} {playingIndex} /> <QueueSlider {queueSongs} {playingIndex} />
<div class="w-full py-6 lg:w-[30vw]"> <div class="w-full py-6 lg:w-[30vw]">
<SuggestionInput roomId={data.roomId} /> <SuggestionInput roomId={data.roomId} />