fix folder list component

2025-06-06 03:05:35 +00:00 · 2021-11-20 14:56:07 +03:00 · 2021-11-20 14:56:07 +03:00 · 7584a8a8ea
commit 7584a8a8ea
parent cf8ba6554b
23 changed files with 142 additions and 30 deletions
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/img/icons/android-chrome-192x192.png
+++ b/public/img/icons/android-chrome-192x192.png
--- a/public/img/icons/android-chrome-512x512.png
+++ b/public/img/icons/android-chrome-512x512.png
--- a/public/img/icons/android-chrome-maskable-192x192.png
+++ b/public/img/icons/android-chrome-maskable-192x192.png
--- a/public/img/icons/android-chrome-maskable-512x512.png
+++ b/public/img/icons/android-chrome-maskable-512x512.png
--- a/public/img/icons/apple-touch-icon-120x120.png
+++ b/public/img/icons/apple-touch-icon-120x120.png
--- a/public/img/icons/apple-touch-icon-152x152.png
+++ b/public/img/icons/apple-touch-icon-152x152.png
--- a/public/img/icons/apple-touch-icon-180x180.png
+++ b/public/img/icons/apple-touch-icon-180x180.png
--- a/public/img/icons/apple-touch-icon-60x60.png
+++ b/public/img/icons/apple-touch-icon-60x60.png
--- a/public/img/icons/apple-touch-icon-76x76.png
+++ b/public/img/icons/apple-touch-icon-76x76.png
--- a/public/img/icons/apple-touch-icon.png
+++ b/public/img/icons/apple-touch-icon.png
--- a/public/img/icons/favicon-16x16.png
+++ b/public/img/icons/favicon-16x16.png
--- a/public/img/icons/favicon-32x32.png
+++ b/public/img/icons/favicon-32x32.png
--- a/public/img/icons/msapplication-icon-144x144.png
+++ b/public/img/icons/msapplication-icon-144x144.png
--- a/public/img/icons/mstile-150x150.png
+++ b/public/img/icons/mstile-150x150.png
--- a/public/img/icons/safari-pinned-tab.svg
+++ b/public/img/icons/safari-pinned-tab.svg
@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
-</svg>
--- a/public/index.html
+++ b/public/index.html
@ -4,7 +4,7 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="./favicon.ico">
    <title>MusicX</title>
  </head>
  <body>
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@ -47,6 +47,7 @@ a {
  background: rgba(0, 0, 0, 0.575);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
+  -moz-backdrop-filter: blur(40px)
 }

 #bg-blur {
@ -96,7 +97,6 @@ a {
  border-radius: 5px;
  padding: 10px;
  overflow: hidden;
-  height: 100%;
 }

 .r-sidebar {
@ -104,3 +104,35 @@ a {
  border: 1px solid rgb(109, 109, 109);
  border-radius: 5px;
 }
+
+
+/* scrollbars */
+
+/* width */
+::-webkit-scrollbar {
+  width: .5em;
+  display: none;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--green);
+  border-radius: 1em;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #21a13d;
+}
+
+
+:root {
+  scrollbar-color: transparent transparent !important;
+  scrollbar-width: none !important;
+}
+
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@ -1,8 +1,8 @@
 <template>
-  <div class="f-container" v-for="folder in folders" :key="folder">
-    <router-link :to="{ path: '/' }">
+  <div class="f-container">
+    <h3>folders in this directory</h3>
+    <router-link :to="{ path: '/' }" v-for="folder in folders" :key="folder">
      <div class="f-item circular">
-        <div class="f-item-bg"></div>
        <span class="f-item-text">{{ folder.name }}</span>
      </div>
    </router-link>
@ -22,24 +22,42 @@ export default {
 </script>

 <style>
-.f-item {
-  width: 10em;
-  height: 10em;
-  background-color: var(--green);
+.f-container {
+  margin-bottom: 20em;
+}
+.f-container h3 {
+  text-transform: uppercase;
+  font-weight: normal;
+  color: rgba(255, 255, 255, 0.438);
+  margin-bottom: 0em;
+}
+.f-container .f-item {
+  float: left;
+  width: 9em;
+  height: 8em;
+  /* background-color: #9d020781; */
  display: flex;
  justify-content: center;
  position: relative;
  background-image: url(../../assets/icons/folder.svg);
  background-repeat: no-repeat;
  background-position: center;
-  background-size: 50%;
+  background-size: 30%;
+  margin: 2em 2em 0em 0;
+  padding: 1em;
+  /* border: .1em solid var(--seperator); */
+  background-color: rgba(80, 80, 80, 0.247);
 }

-.f-item-text {
+.f-container .f-item:hover {
+  background-color: rgba(0, 0, 0, 0.527);
+}
+
+.f-container .f-item-text {
  width: calc(100% - 10%);
  line-height-step: 2;
  position: absolute;
-  bottom: -3em;
+  bottom: 0.5em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
@ -48,10 +66,4 @@ export default {
  line-clamp: 2;
  -webkit-box-orient: vertical;
 }
-
-.f-item-bg {
-  height: 100px;
-  width: 100%;
-  color: red;
-}
 </style>
--- a/src/components/FolderView/SearchBox.vue
+++ b/src/components/FolderView/SearchBox.vue
@ -62,7 +62,7 @@ export default {};
 }

 .folder-top .fsearch input:focus {
-  color: rgb(75, 74, 74);
-  outline: 0.1em solid var(--green);
+  color: rgb(255, 255, 255);
+  outline: 0.1em solid #9d0208;
 }
 </style>
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@ -115,7 +115,6 @@ tr {

 .folder {
  padding-bottom: 1em;
-  margin-bottom: 1em;
 }

 td .artist {
--- a/src/data/folders.js
+++ b/src/data/folders.js
@ -14,6 +14,74 @@ const folders = [
  {
    name: "Flashback party",
  },
+  {
+    name: "HiFi Gold by Elton John",
+  },  {
+    name: "Jim Reeves - 14 number 1s",
+  },
+  {
+    name: "Nadina",
+  },
+  {
+    name: "Lil Peep - Carlifornia girls",
+  },
+  {
+    name: "Legends never die",
+  },
+  {
+    name: "Flashback party",
+  },
+  {
+    name: "HiFi Gold by Elton John",
+  },  {
+    name: "Jim Reeves - 14 number 1s",
+  },
+  {
+    name: "Nadina",
+  },
+  {
+    name: "Lil Peep - Carlifornia girls",
+  },
+  {
+    name: "Legends never die",
+  },
+  {
+    name: "Flashback party",
+  },
+  {
+    name: "HiFi Gold by Elton John",
+  },  {
+    name: "Jim Reeves - 14 number 1s",
+  },
+  {
+    name: "Nadina",
+  },
+  {
+    name: "Lil Peep - Carlifornia girls",
+  },
+  {
+    name: "Legends never die",
+  },
+  {
+    name: "Flashback party",
+  },
+  {
+    name: "HiFi Gold by Elton John",
+  },  {
+    name: "Jim Reeves - 14 number 1s",
+  },
+  {
+    name: "Nadina",
+  },
+  {
+    name: "Lil Peep - Carlifornia girls",
+  },
+  {
+    name: "Legends never die",
+  },
+  {
+    name: "Flashback party",
+  },
  {
    name: "HiFi Gold by Elton John",
  },
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@ -1,6 +1,8 @@
 <template>
  <div id="f-view-parent" class="rounded">
-    <SearchBox />
+    <div class="fixed">
+      <SearchBox />
+    </div>
    <div id="scrollable">
      <SongList />
      <FolderList />
@ -29,17 +31,19 @@ export default {

 <style>
 #f-view-parent {
-  height: 100%;
+  height: 99%;
  background-color: rgba(0, 0, 0, 0.24);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 1em;
-  overflow: hidden;
-  /* border: solid; */
 }

+#f-view-parent .fixed {
+  height: min-content;
+}
 #scrollable {
-  overflow: scroll;
-  
+  overflow-y: auto;
+  height: 90%;
+  margin-bottom: 2em;
 }
 </style>