adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Pin Listening header so only song content scrolls
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 4m36s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Adam French
2026-05-28 10:53:43 +01:00
parent 06a18eac3d
commit aa14b4c185
1 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
vue/src/views/home/Listening.vue
View File

@@ -30,23 +30,27 @@ onUnmounted(() => {
<template> <template>
<div class="listening-wrapper"> <div class="listening-wrapper">
<Transition name="fade"> <div class="header-wrapper">
<div <Header>Listening To</Header>
@click="nextSong" </div>
:key="song.track.name" <div class="content-scroll">
class="flex flex-col items-center pt-2" <Transition name="fade">
> <div
<Header>Listening To</Header> @click="nextSong"
<img :key="song.track.name"
:src="song.track.album.images[0].url" class="flex flex-col items-center"
:alt="song.track.album.name + ' album art'" >
/> <img
<p class="text-center"><strong>Song:</strong> {{ song.track.name }}</p> :src="song.track.album.images[0].url"
<p class="text-center"> :alt="song.track.album.name + ' album art'"
<strong>Artist:</strong> {{ song.track.artists[0].name }} />
</p> <p class="text-center"><strong>Song:</strong> {{ song.track.name }}</p>
</div> <p class="text-center">
</Transition> <strong>Artist:</strong> {{ song.track.artists[0].name }}
</p>
</div>
</Transition>
</div>
</div> </div>
</template> </template>
@@ -56,6 +60,21 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-width: 0; min-width: 0;
display: flex;
flex-direction: column;
}
.header-wrapper {
flex-shrink: 0;
display: flex;
justify-content: center;
padding-top: 0.5rem;
}
.content-scroll {
position: relative;
flex: 1;
min-height: 0;
overflow-y: auto; overflow-y: auto;
} }