Updated AlbumCard to have a placeholder
This commit is contained in:
1 parent
247f196533
commit
7761e5b6a0
1 file changed
+8
-6
@@ -12,7 +12,13 @@ const props = defineProps<AlbumProps>()
|
||||
<template>
|
||||
<article class="card">
|
||||
<NuxtLink :to="`/album/${props._id}`">
|
||||
<NuxtImg :src="props.file" :alt="props.name" />
|
||||
<NuxtImg
|
||||
:src="props.file"
|
||||
:alt="props.name"
|
||||
placeholder
|
||||
width="240"
|
||||
height="240"
|
||||
/>
|
||||
<p>{{ props.name }}</p>
|
||||
</NuxtLink>
|
||||
<ArtistName :artists="props.artists" class="artist" />
|
||||
@@ -23,12 +29,10 @@ const props = defineProps<AlbumProps>()
|
||||
@use "@/styles/util" as *;
|
||||
@use "@/styles/variables" as *;
|
||||
|
||||
$width: 240px;
|
||||
|
||||
.card {
|
||||
@include fontSize(14px);
|
||||
|
||||
max-width: $width;
|
||||
max-width: 240px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -37,8 +41,6 @@ $width: 240px;
|
||||
& > a {
|
||||
& img {
|
||||
border-radius: $border-radius-standard;
|
||||
|
||||
width: $width;
|
||||
}
|
||||
|
||||
& p {
|
||||
|
||||
Reference in new issue
Block a user