add a click to expand area

src/components/PlaylistView/FeaturedArtists.vue

@@ -49,17 +49,14 @@ const scrollRight = () => {
 
 <style lang="scss">
 .f-artists {
-  height: 14.5em;
   width: calc(100%);
-  padding: $small;
-  padding-bottom: 0;
+  padding: 0 $small;
   border-radius: $small;
   user-select: none;
   position: relative;
 
   .header {
     display: flex;
-    height: 2.5rem;
     align-items: center;
     position: relative;
 
@@ -78,11 +75,11 @@ const scrollRight = () => {
   right: 0;
   display: flex;
   gap: 1rem;
-  justify-content: space-between;
 
   .prev {
     transform: rotate(180deg);
   }
+
   .icon {
     border-radius: $small;
     cursor: pointer;

src/views/AlbumView.vue

@@ -11,12 +11,23 @@
         id="bottom-items"
         class="rounded"
         ref="albumbottomcards"
-        @click="expandBottom"
+        :class="{
+          bottomexpanded: !bottomContainerState,
+        }"
       >
-        <FeaturedArtists :artists="album.artists" />
-        <div v-if="album.bio">
-          <div class="separator" id="av-sep"></div>
-          <AlbumBio :bio="album.bio" />
+        <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>
@@ -29,10 +40,9 @@ 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 { ref } from "vue";
+import { reactive, ref } from "vue";
 
 const album = useAStore();
 const albumbottomcards = ref<HTMLElement>(null);
@@ -42,10 +52,13 @@ onBeforeRouteUpdate(async (to) => {
   album.fetchBio(to.params.hash.toString());
 });
 
-function expandBottom() {
-  const elem = albumbottomcards.value;
-  elem.style.height = `${40}rem`;
+function toggleBottom() {
+  // const elem = albumbottomcards.value;
+  // elem.style.height = `${40}rem`;
+  bottomContainerState.value = !bottomContainerState.value;
 }
+
+const bottomContainerState = ref(true);
 </script>
 
 <style lang="scss">
@@ -76,16 +89,53 @@ function expandBottom() {
 
   #bottom-items {
     z-index: 77;
-    padding: $small;
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 15rem;
-    max-height: 35rem;
-    overflow: hidden;
     background-color: $gray;
     transition: all 0.5s ease;
     overscroll-behavior: contain;
+    display: grid;
+    grid-template-rows: 2rem 1fr;
+
+    .click-to-expand {
+      height: 1.5rem;
+      display: flex;
+      align-items: center;
+
+      div {
+        margin: 0 auto;
+        font-size: small;
+        color: $gray1;
+        cursor: default;
+        user-select: none;
+        display: flex;
+        gap: $small;
+      }
+
+      .arrow {
+        max-width: min-content;
+        transition: all 0.2s ease-in-out;
+      }
+    }
+  }
+
+  .bottomexpanded {
+    height: 35rem !important;
+
+    .arrow {
+      transform: rotate(180deg) !important;
+    }
+
+    .bottom-content {
+      overflow: auto;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
   }
 }
 </style>