Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-24 13:13:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: simplify cards

Browse source
This commit is contained in:
Phan An 2022-07-22 16:25:30 +02:00
parent 200a73ee41
commit f9f21ce654
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
5 changed files with 7 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/assets/js/components/album/AlbumCard.vue
View file

@ -11,9 +11,7 @@
@dragstart="dragStart" @dragstart="dragStart"
@contextmenu.prevent="requestContextMenu" @contextmenu.prevent="requestContextMenu"
> >
<span class="thumbnail-wrapper" :style="{ backgroundImage: `url(${defaultCover})` }">
<AlbumThumbnail :entity="album"/> <AlbumThumbnail :entity="album"/>
</span>
<footer> <footer>
<a :href="`#!/album/${album.id}`" class="name" data-testid="name">{{ album.name }}</a> <a :href="`#!/album/${album.id}`" class="name" data-testid="name">{{ album.name }}</a>
@ -58,7 +56,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { faDownload, faRandom } from '@fortawesome/free-solid-svg-icons' import { faDownload, faRandom } from '@fortawesome/free-solid-svg-icons'
import { computed, toRef, toRefs } from 'vue' import { computed, toRef, toRefs } from 'vue'
import { defaultCover, eventBus, pluralize, secondsToHis, startDragging } from '@/utils' import { eventBus, pluralize, secondsToHis, startDragging } from '@/utils'
import { albumStore, artistStore, commonStore, songStore } from '@/stores' import { albumStore, artistStore, commonStore, songStore } from '@/stores'
import { downloadService, playbackService } from '@/services' import { downloadService, playbackService } from '@/services'

2
resources/assets/js/components/artist/ArtistCard.vue
View file

@ -11,9 +11,7 @@
@dragstart="dragStart" @dragstart="dragStart"
@contextmenu.prevent="requestContextMenu" @contextmenu.prevent="requestContextMenu"
> >
<span class="thumbnail-wrapper">
<ArtistThumbnail :entity="artist"/> <ArtistThumbnail :entity="artist"/>
</span>
<footer> <footer>
<div class="info"> <div class="info">

4
resources/assets/js/components/song/SongCard.vue
View file

@ -101,8 +101,8 @@ article {
} }
.cover { .cover {
flex: 0 0 48px; width: 48px;
height: 48px; aspect-ratio: 1/1;
background-size: cover; background-size: cover;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;

1
resources/assets/js/components/ui/AlbumArtistThumbnail.vue
View file

@ -122,6 +122,7 @@ const onDrop = async (event: DragEvent) => {
.cover { .cover {
position: relative; position: relative;
width: 100%; width: 100%;
aspect-ratio: 1/1;
display: block; display: block;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;

11
resources/assets/sass/partials/_mixins.scss
View file

@ -36,15 +36,6 @@
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1.5rem;
.thumbnail-wrapper {
overflow: hidden;
border-radius: 8px;
display: block;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
max-width: 100%; max-width: 100%;
} }
@ -65,7 +56,7 @@
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
.thumbnail-wrapper { .cover {
width: 80px; width: 80px;
border-radius: 5px; border-radius: 5px;
} }