mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-05 04:53:01 +00:00
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:
committed by
Mungai Njoroge
parent
da852e72f3
commit
4a49d48011
@@ -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>
|
||||
Reference in New Issue
Block a user