2022-07-30 15:08:20 +00:00
|
|
|
<template>
|
|
|
|
|
<article class="skeleton" :class="layout">
|
2022-12-02 16:17:37 +00:00
|
|
|
<aside class="thumbnail pulse" />
|
2022-07-30 15:08:20 +00:00
|
|
|
|
|
|
|
|
<footer>
|
2022-12-02 16:17:37 +00:00
|
|
|
<p class="name pulse" />
|
|
|
|
|
<p class="artist pulse" />
|
|
|
|
|
<p class="meta pulse" />
|
2022-07-30 15:08:20 +00:00
|
|
|
</footer>
|
|
|
|
|
</article>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
const props = withDefaults(defineProps<{ layout?: ArtistAlbumCardLayout }>(), { layout: 'full' })
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.skeleton {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 1.5rem;
|
|
|
|
|
border: 1px solid var(--color-bg-secondary);
|
|
|
|
|
padding: 16px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
max-width: 256px;
|
|
|
|
|
|
|
|
|
|
aside {
|
|
|
|
|
aspect-ratio: 1/1;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: 0.7rem;
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
height: 1.2em;
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
|
|
|
|
&.artist {
|
|
|
|
|
width: 33%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.meta {
|
|
|
|
|
width: 55%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.compact {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
|
|
aside {
|
|
|
|
|
width: 80px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
