mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-07-12 04:30:08 +00:00
add a HeaderContentBottom layout
- rewrite album page to use the above layout
This commit is contained in:
geoffrey45
parent
1bfa43350c
commit
7a953d366e
@ -54,6 +54,10 @@ a {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.noscroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-dark {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import useFStore from "@/stores/pages/folder";
|
||||
import usePTrackStore from "@/stores/pages/playlist";
|
||||
import usePStore from "@/stores/pages/playlists";
|
||||
import AlbumsExplorer from "@/views/AlbumsExplorer.vue";
|
||||
import AlbumView from "@/views/AlbumView.vue";
|
||||
import AlbumView from "@/views/album/index.vue";
|
||||
import ArtistsExplorer from "@/views/ArtistsExplorer.vue";
|
||||
import FolderView from "@/views/FolderView.vue";
|
||||
import Home from "@/views/Home.vue";
|
||||
|
||||
@ -1,183 +0,0 @@
|
||||
<template>
|
||||
<div class="al-view rounded">
|
||||
<div class="al-content" id="albumcontent">
|
||||
<div>
|
||||
<Header :album="album.info" @resetBottomPadding="resetBottomPadding" />
|
||||
</div>
|
||||
<div class="songs rounded">
|
||||
<SongList :tracks="album.tracks" :on_album_page="true" />
|
||||
</div>
|
||||
<div
|
||||
id="bottom-items"
|
||||
class="rounded"
|
||||
ref="albumbottomcards"
|
||||
:class="{
|
||||
bottomexpanded: bottomContainerRaised,
|
||||
}"
|
||||
>
|
||||
<div class="click-to-expand" @click="toggleBottom">
|
||||
<div>
|
||||
<div class="arrow">↑</div>
|
||||
<span>tap here</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-content">
|
||||
<FeaturedArtists :artists="album.artists" />
|
||||
<div v-if="album.bio">
|
||||
<div class="separator" id="av-sep"></div>
|
||||
<AlbumBio :bio="album.bio" />
|
||||
</div>
|
||||
<div class="dummy"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Header from "../components/AlbumView/Header.vue";
|
||||
import AlbumBio from "../components/AlbumView/AlbumBio.vue";
|
||||
|
||||
import SongList from "../components/FolderView/SongList.vue";
|
||||
import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
|
||||
import useAStore from "../stores/pages/album";
|
||||
import { onBeforeRouteUpdate } from "vue-router";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
const album = useAStore();
|
||||
const albumbottomcards = ref<HTMLElement>(null);
|
||||
const bottomContainerRaised = ref(false);
|
||||
let elem: HTMLElement = null;
|
||||
let classlist: DOMTokenList = null;
|
||||
|
||||
onMounted(() => {
|
||||
elem = document.getElementById("albumcontent");
|
||||
classlist = elem.classList;
|
||||
});
|
||||
|
||||
onBeforeRouteUpdate(async (to) => {
|
||||
await album.fetchTracksAndArtists(to.params.hash.toString());
|
||||
album.fetchBio(to.params.hash.toString());
|
||||
});
|
||||
|
||||
/**
|
||||
* Toggles the state of the bottom container. Adds the `addbottompadding` class that adds a bottom padding to the album content div.
|
||||
*/
|
||||
function toggleBottom() {
|
||||
bottomContainerRaised.value = !bottomContainerRaised.value;
|
||||
|
||||
if (bottomContainerRaised.value) {
|
||||
classlist.add("addbottompadding");
|
||||
return;
|
||||
}
|
||||
|
||||
if (elem.scrollTop == 0) {
|
||||
classlist.remove("addbottompadding");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the album page header gets into the viewport.
|
||||
* Removes the bottom padding which was added when you expand the bottom container.
|
||||
*/
|
||||
function resetBottomPadding() {
|
||||
if (bottomContainerRaised.value) return;
|
||||
|
||||
classlist.remove("addbottompadding");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.al-view {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin-right: -$small;
|
||||
overflow: hidden;
|
||||
|
||||
.al-content {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom: 17rem;
|
||||
padding-right: $small;
|
||||
transition: all 0.5s;
|
||||
z-index: -1 !important;
|
||||
}
|
||||
|
||||
.addbottompadding {
|
||||
padding-bottom: 37rem;
|
||||
}
|
||||
|
||||
.songs {
|
||||
min-height: calc(100% - 31.5rem);
|
||||
margin-top: $small;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#av-sep {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#bottom-items {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: calc(100% - $small);
|
||||
height: 15rem;
|
||||
background-color: $gray;
|
||||
transition: all 0.5s ease;
|
||||
overscroll-behavior: contain;
|
||||
display: grid;
|
||||
grid-template-rows: 2rem 1fr;
|
||||
|
||||
.bottom-content {
|
||||
overflow: hidden;
|
||||
scroll-behavior: contain;
|
||||
}
|
||||
|
||||
.click-to-expand {
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $gray1;
|
||||
|
||||
div {
|
||||
margin: 0 auto;
|
||||
font-size: small;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
gap: $small;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
max-width: min-content;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottomexpanded {
|
||||
height: 32rem !important;
|
||||
scroll-behavior: contain;
|
||||
|
||||
.arrow {
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
|
||||
.bottom-content {
|
||||
overflow: auto !important;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/views/album/Bottom.vue
Normal file
22
src/views/album/Bottom.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="bottom-content">
|
||||
<FeaturedArtists :artists="artists" />
|
||||
<div v-if="bio">
|
||||
<div class="separator" id="av-sep"></div>
|
||||
<AlbumBio :bio="bio" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Artist } from "@/interfaces";
|
||||
import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
|
||||
import AlbumBio from "@/components/AlbumView/AlbumBio.vue";
|
||||
|
||||
defineProps<{
|
||||
artists: Artist[];
|
||||
bio: string | null;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
14
src/views/album/Content.vue
Normal file
14
src/views/album/Content.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="songs rounded">
|
||||
<SongList :tracks="tracks" :on_album_page="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Track } from "@/interfaces";
|
||||
import SongList from "@/components/FolderView/SongList.vue";
|
||||
|
||||
defineProps<{
|
||||
tracks: Track[];
|
||||
}>();
|
||||
</script>
|
||||
14
src/views/album/Header.vue
Normal file
14
src/views/album/Header.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header :album="album" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Header from "@/components/AlbumView/Header.vue";
|
||||
import { AlbumInfo } from "@/interfaces";
|
||||
|
||||
defineProps<{
|
||||
album: AlbumInfo;
|
||||
}>();
|
||||
</script>
|
||||
30
src/views/album/index.vue
Normal file
30
src/views/album/index.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<Page>
|
||||
<template #header>
|
||||
<Header :album="album.info" />
|
||||
</template>
|
||||
<template #content>
|
||||
<Content :tracks="album.tracks" />
|
||||
</template>
|
||||
<template #bottom>
|
||||
<Bottom :artists="album.artists" :bio="album.bio" />
|
||||
</template>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeRouteUpdate, RouteLocationNormalized } from "vue-router";
|
||||
import useAStore from "@/stores/pages/album";
|
||||
|
||||
import Page from "../layouts/HeaderContentBottom.vue";
|
||||
import Header from "./Header.vue";
|
||||
import Content from "./Content.vue";
|
||||
import Bottom from "./Bottom.vue";
|
||||
|
||||
const album = useAStore();
|
||||
|
||||
onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
|
||||
await album.fetchTracksAndArtists(to.params.hash.toString());
|
||||
album.fetchBio(to.params.hash.toString());
|
||||
});
|
||||
</script>
|
||||
159
src/views/layouts/HeaderContentBottom.vue
Normal file
159
src/views/layouts/HeaderContentBottom.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="ap-container noscroll">
|
||||
<div id="ap-page">
|
||||
<header class="ap-page-header" ref="apheader">
|
||||
<slot name="header"></slot>
|
||||
</header>
|
||||
<main class="ap-page-content">
|
||||
<slot name="content"></slot>
|
||||
</main>
|
||||
</div>
|
||||
<div
|
||||
class="ap-page-bottom-container rounded"
|
||||
ref="apbottomcontainer"
|
||||
:class="{
|
||||
bottomexpanded: bottomContainerRaised,
|
||||
}"
|
||||
>
|
||||
<div class="click-to-expand" @click="toggleBottom">
|
||||
<div>
|
||||
<div class="arrow">↑</div>
|
||||
<span>tap here</span>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="bottom"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import useVisibility from "../../composables/useVisibility";
|
||||
import useNavStore from "../../stores/nav";
|
||||
|
||||
const nav = useNavStore();
|
||||
|
||||
let elem: HTMLElement = null;
|
||||
let classlist: DOMTokenList = null;
|
||||
|
||||
const apheader = ref<HTMLElement>(null);
|
||||
const apbottomcontainer = ref(null);
|
||||
const bottomContainerRaised = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
elem = document.getElementById("ap-page");
|
||||
classlist = elem.classList;
|
||||
});
|
||||
|
||||
function handleVisibilityState(state: boolean) {
|
||||
resetBottomPadding();
|
||||
|
||||
nav.toggleShowPlay(state);
|
||||
}
|
||||
|
||||
useVisibility(apheader, handleVisibilityState);
|
||||
|
||||
function resetBottomPadding() {
|
||||
if (bottomContainerRaised.value) return;
|
||||
|
||||
classlist.remove("addbottompadding");
|
||||
}
|
||||
|
||||
function toggleBottom() {
|
||||
bottomContainerRaised.value = !bottomContainerRaised.value;
|
||||
|
||||
if (bottomContainerRaised.value) {
|
||||
classlist.add("addbottompadding");
|
||||
return;
|
||||
}
|
||||
|
||||
if (elem.scrollTop == 0) {
|
||||
classlist.remove("addbottompadding");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ap-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin-right: -$small;
|
||||
|
||||
.ap-page-bottom-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 15rem;
|
||||
width: calc(100% - $small);
|
||||
background-color: $gray;
|
||||
transition: all 0.5s ease !important;
|
||||
overscroll-behavior: contain;
|
||||
display: grid;
|
||||
grid-template-rows: 2rem 1fr;
|
||||
|
||||
.bottom-content {
|
||||
overflow: hidden;
|
||||
scroll-behavior: contain;
|
||||
}
|
||||
|
||||
.click-to-expand {
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $gray1;
|
||||
|
||||
div {
|
||||
margin: 0 auto;
|
||||
font-size: small;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
gap: $small;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
max-width: min-content;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottomexpanded {
|
||||
height: 32rem !important;
|
||||
scroll-behavior: contain;
|
||||
|
||||
.arrow {
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
|
||||
.bottom-content {
|
||||
overflow: auto !important;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addbottompadding {
|
||||
padding-bottom: 17rem;
|
||||
}
|
||||
}
|
||||
|
||||
#ap-page {
|
||||
padding-right: $small;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
grid-template-rows: 18rem 1fr;
|
||||
|
||||
.ap-page-content {
|
||||
padding-bottom: 17rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user