swingmusic/src/views/Playlists.vue
geoffrey45 03219166c5 use third-party module to auto-persist queue store
+ more redesign
+ convert js files to ts
2022-08-19 15:58:32 +03:00

41 lines
838 B
Vue

<template>
<div id="p-view">
<div class="grid">
<NewPlaylistCard />
<PlaylistCard
v-for="p in pStore.playlists"
:key="p.playlistid"
:playlist="p"
/>
</div>
</div>
</template>
<script setup lang="ts">
import PlaylistCard from "@/components/playlists/PlaylistCard.vue";
import NewPlaylistCard from "@/components/playlists/NewPlaylistCard.vue";
import usePStore from "@/stores/pages/playlists";
const pStore = usePStore();
</script>
<style lang="scss">
#p-view {
overflow: auto;
scrollbar-color: $gray2 transparent;
.grid {
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 1rem;
@include for-desktop-down {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
.name {
font-size: 0.9rem;
}
}
}
}
</style>