From bc449631a6a6067f959bd34b604d454a6a567d51 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 2 Aug 2022 03:27:39 +0300
Subject: [PATCH] use flex to space folder page

---
 src/components/FolderView/FolderList.vue |  1 -
 src/views/FolderView.vue                 | 25 +++++++++++++-----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index d97449a2..71042fed 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -25,7 +25,6 @@ defineProps<{
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: $medium;
   padding: $small;
-  margin-bottom: 1rem;
   background-color: $gray5;
 }
 </style>
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 6ce808df..4272a3f4 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -3,11 +3,15 @@
     <div id="scrollable" ref="scrollable">
       <div class="banner shadow-lg">
         <div class="text abs rounded pad-medium">
-          <h1><FolderSvg /> {{ getFolderName($route) }}</h1>
+          <h3><FolderSvg /> {{ getFolderName($route) }}</h3>
         </div>
-        <img src="../assets/images/one.jpg" alt="" class="rounded" />
+        <img
+          src="../assets/images/one.jpg"
+          alt="folder page banner"
+          class="rounded"
+        />
       </div>
-      <FolderList :folders="FStore.dirs" />
+      <FolderList :folders="FStore.dirs" v-if="FStore.dirs.length" />
       <SongList :tracks="FStore.tracks" :path="FStore.path" />
     </div>
   </div>
@@ -62,23 +66,22 @@ onBeforeRouteUpdate((to, from) => {
 }
 
 #scrollable {
-  overflow-y: auto;
   scrollbar-color: grey transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 
   .banner {
-    margin-bottom: $small;
     position: relative;
-
-    svg {
-      transform: scale(1.5);
-    }
+    height: max-content;
+    height: $banner-height;
 
     .text {
       bottom: 1rem;
       left: 1rem;
       background-color: $black;
 
-      h1 {
+      h3 {
         margin: $small;
         display: flex;
         align-items: center;
@@ -88,7 +91,7 @@ onBeforeRouteUpdate((to, from) => {
     }
 
     img {
-      height: $banner-height;
+      height: 100%;
       width: 100%;
       object-fit: cover;
     }