Made track display be in middle if no lyrics are found
This commit is contained in:
1 parent
2b01ed688c
commit
603620a418
2 files changed
+14
-3
No files matched your search
@@ -46,7 +46,7 @@ nuxtApp.hook("page:finish", () => {
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<section class="screen-container">
|
<section class="screen-container" v-if="song">
|
||||||
<Icon
|
<Icon
|
||||||
name="lucide:x"
|
name="lucide:x"
|
||||||
class="close-btn"
|
class="close-btn"
|
||||||
@@ -54,7 +54,7 @@ nuxtApp.hook("page:finish", () => {
|
|||||||
@click="fullscreen = false"
|
@click="fullscreen = false"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="content-container">
|
<div class="content-container" :class="{ lyrics: song.lyrics }">
|
||||||
<PlayerFullscreenTrackDisplay
|
<PlayerFullscreenTrackDisplay
|
||||||
:show-buttons="mouseMovedRecently"
|
:show-buttons="mouseMovedRecently"
|
||||||
/>
|
/>
|
||||||
@@ -130,13 +130,22 @@ nuxtApp.hook("page:finish", () => {
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 500px 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 110px;
|
gap: 110px;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
max-height: 675px;
|
max-height: 675px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.lyrics {
|
||||||
|
grid-template-columns: 500px 1fr;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin: initial;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -78,6 +78,8 @@ const durationFormatted = computed(() =>
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
|
||||||
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cover {
|
.cover {
|
||||||
|
|||||||
Reference in new issue
Block a user