tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-06 19:25:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix folder list component

Browse Source
This commit is contained in:
geoffrey45 2021-11-20 14:56:07 +03:00
parent cf8ba6554b
commit 7584a8a8ea
23 changed files with 142 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/img/icons/android-chrome-192x192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.2 KiB

BIN
public/img/icons/android-chrome-512x512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
public/img/icons/android-chrome-maskable-192x192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/img/icons/android-chrome-maskable-512x512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
public/img/icons/apple-touch-icon-120x120.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/img/icons/apple-touch-icon-152x152.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
public/img/icons/apple-touch-icon-180x180.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.6 KiB

BIN
public/img/icons/apple-touch-icon-60x60.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/img/icons/apple-touch-icon-76x76.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public/img/icons/apple-touch-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.6 KiB

BIN
public/img/icons/favicon-16x16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 799 B

BIN
public/img/icons/favicon-32x32.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/img/icons/msapplication-icon-144x144.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/img/icons/mstile-150x150.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

3
public/img/icons/safari-pinned-tab.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 215 B

2
public/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> <title>MusicX</title>
</head> </head>
<body> <body>

34
src/assets/css/global.css
View File

@ -47,6 +47,7 @@ a {
background: rgba(0, 0, 0, 0.575); background: rgba(0, 0, 0, 0.575);
backdrop-filter: blur(40px); backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
-moz-backdrop-filter: blur(40px)
} }
#bg-blur { #bg-blur {
@ -96,7 +97,6 @@ a {
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
overflow: hidden; overflow: hidden;
height: 100%;
} }
.r-sidebar { .r-sidebar {
@ -104,3 +104,35 @@ a {
border: 1px solid rgb(109, 109, 109); border: 1px solid rgb(109, 109, 109);
border-radius: 5px; 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;
}

44
src/components/FolderView/FolderList.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="f-container" v-for="folder in folders" :key="folder"> <div class="f-container">
<router-link :to="{ path: '/' }"> <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 circular">
<div class="f-item-bg"></div>
<span class="f-item-text">{{ folder.name }}</span> <span class="f-item-text">{{ folder.name }}</span>
</div> </div>
</router-link> </router-link>
@ -22,24 +22,42 @@ export default {
</script> </script>
<style> <style>
.f-item { .f-container {
width: 10em; margin-bottom: 20em;
height: 10em; }
background-color: var(--green); .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; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
background-image: url(../../assets/icons/folder.svg); background-image: url(../../assets/icons/folder.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; 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%); width: calc(100% - 10%);
line-height-step: 2; line-height-step: 2;
position: absolute; position: absolute;
bottom: -3em; bottom: 0.5em;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -48,10 +66,4 @@ export default {
line-clamp: 2; line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.f-item-bg {
height: 100px;
width: 100%;
color: red;
}
</style> </style>

4
src/components/FolderView/SearchBox.vue
View File

@ -62,7 +62,7 @@ export default {};
} }
.folder-top .fsearch input:focus { .folder-top .fsearch input:focus {
color: rgb(75, 74, 74); color: rgb(255, 255, 255);
outline: 0.1em solid var(--green); outline: 0.1em solid #9d0208;
} }
</style> </style>

1
src/components/FolderView/SongList.vue
View File

@ -115,7 +115,6 @@ tr {
.folder { .folder {
padding-bottom: 1em; padding-bottom: 1em;
margin-bottom: 1em;
} }
td .artist { td .artist {

68
src/data/folders.js
View File

@ -14,6 +14,74 @@ const folders = [
{ {
name: "Flashback party", 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", name: "HiFi Gold by Elton John",
}, },

16
src/views/FolderView.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div id="f-view-parent" class="rounded"> <div id="f-view-parent" class="rounded">
<SearchBox /> <div class="fixed">
<SearchBox />
</div>
<div id="scrollable"> <div id="scrollable">
<SongList /> <SongList />
<FolderList /> <FolderList />
@ -29,17 +31,19 @@ export default {
<style> <style>
#f-view-parent { #f-view-parent {
height: 100%; height: 99%;
background-color: rgba(0, 0, 0, 0.24); background-color: rgba(0, 0, 0, 0.24);
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-top: 1em; padding-top: 1em;
overflow: hidden;
/* border: solid; */
} }
#f-view-parent .fixed {
height: min-content;
}
#scrollable { #scrollable {
overflow: scroll; overflow-y: auto;
height: 90%;
margin-bottom: 2em;
} }
</style> </style>