juli0n21/pwa-player
1
0
Fork 0
mirror of https://github.com/JuLi0n21/pwa-player.git synced 2026-04-19 23:40:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix alligment, remove scrollbars, clean up layout to support desktop properly

Browse Source
This commit is contained in:
Julian Schlüter
2025-05-25 03:14:30 +02:00
parent 8e5adaec96
commit 6058a96258
12 changed files with 80 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/SongItem.vue
View File

@@ -13,7 +13,6 @@ const audioStore = useAudio();
function updateSong() {
let updated = props.song;
console.log("updating song:", updated)
audioStore.setSong(updated)
}
</script>
@@ -21,19 +20,19 @@ function updateSong() {
<template>
<div @click="updateSong" :style="{ borderColor: border }" class="m-1 border bordercolor rounded-lg flex">
<img class="h-14 w-14 m-1 rounded-lg"
<div @click="updateSong" :style="{ borderColor: border }" class="m-1 md:text-xl border bordercolor rounded-lg flex">
<img class="h-14 w-14 md:w-24 md:h-24 m-1 rounded-lg"
:src="encodeURI(props.song?.previewimage ? props.song?.previewimage + '?h=56&w=56' : '/default-bg.png')"
loading="lazy" />
<div class="flex flex-col overflow-hidden">
<p :style="{ color: info }" class="text-nowrap text-ellipsis overflow-hidden text-base info">
<slot name="songName">{{ props.song?.name ?? 'Title' }}</slot>
<slot name="songName">{{ props.song?.name ? props.song?.name : 'Unknown Title' }}</slot>
</p>
<h5 :style="{ color: action }" class="action text-sm text-nowrap text-ellipsis overflow-hidden text-base">
<slot name="artist">{{ props.song?.artist ?? 'Artist' }}</slot>
<slot name="artist">{{ props.song?.artist ? props.song.artist : 'Unknown Artist' }}</slot>
</h5>
<h5 :style="{ color: action }" class="action text-sm">
<slot name="length">{{ Math.floor(props.song?.length ?? 0 / 60000) }}:{{ Math.floor((props.song?.length ?? 0 /
<slot name="length">{{ Math.floor(props.song?.length / 60000 ?? 0) }}:{{ Math.floor((props.song?.length ?? 0 /
1000)
% 60).toString().padStart(2, '0') }}</slot>
</h5>