TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 20:43:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rewrite playlist page to use same layout as the album page

Browse Source
This commit is contained in:
geoffrey45
2022-07-07 15:08:31 +03:00
parent dc7f3b12e3
commit 9d5cbfcc93
8 changed files with 104 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/PlaylistView.vue
-51
View File
@@ -1,51 +0,0 @@
<template>
<div class="playlist-view">
<Header :info="playlist.info" />
<div class="separator no-border"></div>
<div class="songlist rounded">
<div v-if="playlist.tracks.length">
<SongList
:tracks="playlist.tracks"
:pname="playlist.info.name"
:playlistid="playlist.info.playlistid"
/>
</div>
<div v-else-if="playlist.tracks.length === 0 && playlist.info.count > 0">
<div class="no-results">
<div class="text">We can't find your music 🦋</div>
</div>
</div>
<div v-else-if="playlist.tracks.length === 0 && playlist.info.count == 0">
<div class="no-results">
<div class="text">Nothing here</div>
</div>
</div>
</div>
<div class="separator no-border"></div>
<FeaturedArtists />
</div>
</template>
<script setup lang="ts">
import Header from "@/components/PlaylistView/Header.vue";
import SongList from "@/components/FolderView/SongList.vue";
import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
import usePTrackStore from "@/stores/pages/playlist";
const playlist = usePTrackStore();
</script>
<style lang="scss">
.playlist-view {
height: 100%;
&::-webkit-scrollbar {
display: none;
}
.songlist {
min-height: calc(100% - 32rem);
}
}
</style>
src/views/album/Header.vue
-2
View File
@@ -1,7 +1,5 @@
<template>
<div>
<Header :album="album" />
</div>
</template>
<script setup lang="ts">
src/views/layouts/HeaderContentBottom.vue
+1
View File
@@ -151,6 +151,7 @@ function toggleBottom() {
overflow: auto;
display: grid;
grid-template-rows: 18rem 1fr;
gap: 1rem;
.ap-page-content {
padding-bottom: 17rem;
src/views/playlist/Content.vue
+29
View File
@@ -0,0 +1,29 @@
<template>
<div class="songlist rounded">
<div v-if="tracks.length">
<SongList :tracks="tracks" :pname="name" :playlistid="playlistid" />
</div>
<div v-else-if="tracks.length === 0 && count > 0">
<div class="no-results">
<div class="text">We can't find your music 🦋</div>
</div>
</div>
<div v-else-if="tracks.length === 0 && count == 0">
<div class="no-results">
<div class="text">Nothing here</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import SongList from "@/components/FolderView/SongList.vue";
import { Track } from "@/interfaces";
defineProps<{
tracks: Track[];
count: number;
name: string;
playlistid: string;
}>();
</script>
src/views/playlist/index.vue
+32
View File
@@ -0,0 +1,32 @@
<template>
<Page>
<template #header>
<Header :info="playlist.info" />
</template>
<template #content>
<Content
:tracks="playlist.tracks"
:count="playlist.info.count"
:name="playlist.info.name"
:playlistid="playlist.info.playlistid"
/>
</template>
<template #bottom>
<FeaturedArtists :artists="[]" />
</template>
</Page>
</template>
<script setup lang="ts">
import Page from "../layouts/HeaderContentBottom.vue";
import Header from "@/components/PlaylistView/Header.vue";
import Content from "./Content.vue";
import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
import usePTrackStore from "@/stores/pages/playlist";
const playlist = usePTrackStore();
</script>
<style lang="scss"></style>