Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-09-20 06:11:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: scroll fade problem on Artist/Album screen (#1634)

Browse source
This commit is contained in:
Phan An 2022-12-16 22:30:25 +07:00 committed by GitHub
parent bf29f7e32e
commit 63c155ceaf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/assets/js/components/screens/AlbumScreen.vue
View file

@ -52,7 +52,7 @@
</label>
</template>
<div v-show="activeTab === 'Songs'">
<div v-show="activeTab === 'Songs'" class="songs-pane">
<SongListSkeleton v-if="loading" />
<SongList
v-else
@ -65,7 +65,7 @@
<div v-show="activeTab === 'OtherAlbums'" class="albums-pane" data-testid="albums-pane">
<template v-if="otherAlbums">
<ul v-if="otherAlbums.length" class="as-list">
<ul v-if="otherAlbums.length" class="as-list" v-koel-overflow-fade>
<li v-for="a in otherAlbums" :key="a.id">
<AlbumCard :album="a" layout="compact" />
</li>
@ -186,16 +186,4 @@ eventBus.on('SONGS_UPDATED', () => albumStore.byId(albumId.value!) || go('albums
#albumWrapper {
@include artist-album-info-wrapper();
}
.albums-pane {
padding: 1.8rem;
> ul {
@include artist-album-wrapper();
}
}
.info-pane {
padding: 1.8rem;
}
</style>

14
resources/assets/js/components/screens/ArtistScreen.vue
View file

@ -63,7 +63,7 @@
</div>
<div v-show="activeTab === 'Albums'" class="albums-pane">
<ul v-if="albums" class="as-list">
<ul v-if="albums" class="as-list" v-koel-overflow-fade>
<li v-for="album in albums" :key="album.id">
<AlbumCard :album="album" layout="compact" />
</li>
@ -175,16 +175,4 @@ eventBus.on('SONGS_UPDATED', () => artistStore.byId(artist.value!.id) || go('art
#artistWrapper {
@include artist-album-info-wrapper();
}
.albums-pane {
padding: 1.8rem;
> ul {
@include artist-album-wrapper();
}
}
.info-pane {
padding: 1.8rem;
}
</style>

21
resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
View file

@ -54,7 +54,28 @@
}
:deep(main) {
display: flex;
flex-direction: column;
overflow: auto;
flex: 1;
}
:deep(.songs-pane), :deep(.albums-pane) {
display: flex;
flex-direction: column;
overflow: auto;
}
:deep(.albums-pane) {
> ul {
@include artist-album-wrapper();
padding: 1.8rem;
overflow: auto;
}
}
:deep(.info-pane) {
padding: 1.8rem;
}
</style>