show albums from artist at the bottom of album page

+ add a testing genres strip in album page
+ misc refactors
This commit is contained in:
geoffrey45
2022-11-24 12:01:39 +03:00
committed by Mungai Njoroge
parent da852e72f3
commit 4a49d48011
14 changed files with 211 additions and 24 deletions
+51
View File
@@ -0,0 +1,51 @@
<template>
<div class="albums-from-artist">
<h3>
<span>More from {{ artist.artist }} </span>
<span class="see-more">SEE ALL</span>
</h3>
<div class="cards">
<AlbumCard v-for="a in artist.albums" :album="a" />
</div>
</div>
</template>
<script setup lang="ts">
import AlbumCard from "../shared/AlbumCard.vue";
import useAlbumStore from "@/stores/pages/album";
import { content_width } from "@/stores/content-width";
import { computed, onBeforeMount } from "vue";
import { AlbumInfo } from "@/interfaces";
defineProps<{
artist: {
artist: string;
albums: AlbumInfo[];
};
}>();
</script>
<style lang="scss">
.albums-from-artist {
overflow: hidden;
padding-top: 1rem;
h3 {
display: grid;
grid-template-columns: 1fr max-content;
align-items: center;
padding: 0 $medium;
.see-more {
font-size: $medium;
}
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: 2rem 0
}
}
</style>