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

fix: style for YouTube video list

Browse source
This commit is contained in:
Phan An 2022-07-08 00:57:25 +02:00
parent 46b21b2625
commit 1e6358fd11
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
2 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
resources/assets/js/components/ui/YouTubeVideoItem.vue
View file

@ -23,7 +23,7 @@ const play = () => youTubeService.play(video.value)
<style lang="scss" scoped>
a {
display: flex;
padding: 12px 0;
gap: 10px;
&:hover, &:active, &:focus {
color: var(--color-text-primary);
@ -40,7 +40,10 @@ a {
}
img {
margin-right: 10px;
align-self: self-start;
}
.meta {
overflow-wrap: anywhere;
}
</style>

13
resources/assets/js/components/ui/YouTubeVideoList.vue
View file

@ -1,7 +1,11 @@
<template>
<div class="youtube-extra-wrapper">
<template v-if="videos.length">
<YouTubeVideo v-for="video in videos" :key="video.id.videoId" :video="video"/>
<ul>
<li v-for="video in videos" :key="video.id.videoId">
<YouTubeVideo :video="video"/>
</li>
</ul>
<Btn v-if="!loading" class="more" data-testid="youtube-search-more-btn" @click.prevent="loadMore">Load More</Btn>
</template>
@ -53,8 +57,11 @@ watchEffect(() => {
.youtube-extra-wrapper {
overflow-x: hidden;
a:last-of-type {
margin-bottom: 16px;
ul {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
}
</style>