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>
|
<template>
|
||||||
<article class="card">
|
<article class="card">
|
||||||
<NuxtLink :to="`/album/${props._id}`">
|
<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>
|
<p>{{ props.name }}</p>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<ArtistName :artists="props.artists" class="artist" />
|
<ArtistName :artists="props.artists" class="artist" />
|
||||||
@@ -23,12 +29,10 @@ const props = defineProps<AlbumProps>()
|
|||||||
@use "@/styles/util" as *;
|
@use "@/styles/util" as *;
|
||||||
@use "@/styles/variables" as *;
|
@use "@/styles/variables" as *;
|
||||||
|
|
||||||
$width: 240px;
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
@include fontSize(14px);
|
@include fontSize(14px);
|
||||||
|
|
||||||
max-width: $width;
|
max-width: 240px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -37,8 +41,6 @@ $width: 240px;
|
|||||||
& > a {
|
& > a {
|
||||||
& img {
|
& img {
|
||||||
border-radius: $border-radius-standard;
|
border-radius: $border-radius-standard;
|
||||||
|
|
||||||
width: $width;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
|
|||||||
Reference in new issue
Block a user