brasse/lyssnarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Spelaren reserverar plats: --player-h skjuter upp innehåll och modaler
All checks were successful
build-and-push / build (push) Successful in 9s
Details

Browse Source 
CSS-variabeln sätts på :root när spelaren är aktiv (4rem, fast höjd,
ingen radbrytning); main och modal-overlay/max-height räknar med den
så inget kan hamna bakom raden.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01824ZrvG2mDYYrmwqypLNup
This commit is contained in:
claude
2026-08-01 05:54:34 +02:00
parent cbdd1f1296
commit 5a93ebf53f
3 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/App.vue
View File

@@ -2,7 +2,6 @@
import { ref } from 'vue' import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import PlayerBar from './components/PlayerBar.vue' import PlayerBar from './components/PlayerBar.vue'
import { nowPlaying } from './player.js'
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
@@ -39,7 +38,7 @@ async function logout() {
<router-link class="ghost gear" :to="{ name: 'settings' }" title="Inställningar">⚙</router-link> <router-link class="ghost gear" :to="{ name: 'settings' }" title="Inställningar">⚙</router-link>
<button class="ghost" @click="logout">Logga ut</button> <button class="ghost" @click="logout">Logga ut</button>
</header> </header>
<main :class="{ 'with-player': nowPlaying }"> <main>
<router-view /> <router-view />
</main> </main>
<PlayerBar /> <PlayerBar />
@@ -122,9 +121,6 @@ async function logout() {
main { main {
padding: 1.5rem; padding: 1.5rem;
} padding-bottom: calc(1.5rem + var(--player-h, 0rem));
main.with-player {
padding-bottom: 5rem;
} }
</style> </style>

3
frontend/src/components/DetailModal.vue
View File

@@ -71,6 +71,7 @@ const trackCards = computed(() =>
place-items: center; place-items: center;
z-index: 50; z-index: 50;
padding: 1rem; padding: 1rem;
padding-bottom: calc(1rem + var(--player-h, 0rem));
} }
.modal { .modal {
@@ -79,7 +80,7 @@ const trackCards = computed(() =>
border-radius: 1rem; border-radius: 1rem;
padding: 1.2rem 1.4rem; padding: 1.2rem 1.4rem;
width: min(58rem, 95vw); width: min(58rem, 95vw);
max-height: 88vh; max-height: calc(100vh - var(--player-h, 0rem) - 2rem);
overflow-y: auto; overflow-y: auto;
} }

6
frontend/src/components/PlayerBar.vue
View File

@@ -62,6 +62,8 @@ async function start(video) {
} }
watch(nowPlaying, (v) => { watch(nowPlaying, (v) => {
// reservera plats för raden så inget innehåll hamnar bakom den
document.documentElement.style.setProperty('--player-h', v ? '4rem' : '0rem')
if (v) { if (v) {
current.value = 0 current.value = 0
duration.value = 0 duration.value = 0
@@ -128,10 +130,12 @@ onBeforeUnmount(() => clearInterval(timer))
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 90; z-index: 90;
height: 4rem;
display: flex; display: flex;
flex-wrap: nowrap;
align-items: center; align-items: center;
gap: 0.9rem; gap: 0.9rem;
padding: 0.55rem 1.1rem; padding: 0 1.1rem;
background: rgba(11, 17, 32, 0.97); background: rgba(11, 17, 32, 0.97);
border-top: 1px solid rgba(255, 255, 255, 0.12); border-top: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);