mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-06 03:05:35 +00:00
add folder list
This commit is contained in:
geoffrey45
parent
12c0669c90
commit
cf8ba6554b
@ -8,9 +8,7 @@
|
||||
><div ref="logo" class="logo"></div
|
||||
></router-link>
|
||||
</div>
|
||||
<!-- <hr class="seperator" /> -->
|
||||
<Navigation :collapsed="collapsed" />
|
||||
<!-- <hr class="seperator" /> -->
|
||||
<PinnedStuff :collapsed="collapsed" />
|
||||
<div id="settings-button">
|
||||
<div class="in">
|
||||
@ -53,8 +51,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.logo {
|
||||
height: 30px;
|
||||
width: 150px;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
:root {
|
||||
--grey: #ffffff48;
|
||||
--seperator: #ffffff48;
|
||||
--green: #4AD168;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -19,10 +20,10 @@ a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
hr,
|
||||
.seperator {
|
||||
border: 1px solid;
|
||||
color: #ffffff48;
|
||||
color: transparent;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
@ -75,7 +76,10 @@ hr,
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.circular {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
@ -91,6 +95,8 @@ hr,
|
||||
grid-area: content;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.r-sidebar {
|
||||
|
||||
BIN
src/assets/images/Jim_Reeves.png
Normal file
BIN
src/assets/images/Jim_Reeves.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="f-container" v-for="folder in folders" :key="folder">
|
||||
<router-link :to="{ path: '/' }">
|
||||
<div class="f-item circular">
|
||||
<div class="f-item-bg"></div>
|
||||
<span class="f-item-text">{{ folder.name }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Folders from "../../data/folders.js";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const folders = Folders.folders;
|
||||
|
||||
return { folders };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.f-item {
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
background-color: var(--green);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background-image: url(../../assets/icons/folder.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 50%;
|
||||
}
|
||||
|
||||
.f-item-text {
|
||||
width: calc(100% - 10%);
|
||||
line-height-step: 2;
|
||||
position: absolute;
|
||||
bottom: -3em;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.f-item-bg {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
68
src/components/FolderView/SearchBox.vue
Normal file
68
src/components/FolderView/SearchBox.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="folder-top flex">
|
||||
<div class="fname">
|
||||
<span>Oldies Volume 1</span>
|
||||
</div>
|
||||
<div class="fsearch">
|
||||
<div>
|
||||
<input type="search" placeholder="Search here" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.folder-top {
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px solid var(--seperator);
|
||||
}
|
||||
|
||||
.folder-top .fname {
|
||||
width: 50%;
|
||||
color: rgba(255, 255, 255, 0.438);
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-top .fsearch {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.folder-top .fsearch div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.folder-top .fsearch input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
padding-left: 1em;
|
||||
background-color: #0101016c;
|
||||
color: rgba(255, 255, 255, 0.521);
|
||||
font-size: 1em;
|
||||
line-height: 3em;
|
||||
outline: none;
|
||||
}
|
||||
.folder-top .fsearch input::-webkit-search-cancel-button {
|
||||
position: relative;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: solid;
|
||||
}
|
||||
|
||||
.folder-top .fsearch input:focus {
|
||||
color: rgb(75, 74, 74);
|
||||
outline: 0.1em solid var(--green);
|
||||
}
|
||||
</style>
|
||||
@ -1,115 +1,126 @@
|
||||
<template>
|
||||
<div class="rounded folder">
|
||||
<div class="folder-top flex">
|
||||
<div class="fname">
|
||||
<span>Oldies Volume 1</span>
|
||||
</div>
|
||||
<div class="fsearch">
|
||||
<div>
|
||||
<input type="text" placeholder="Search here" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div>
|
||||
<div class="theaders">
|
||||
<div>Track</div>
|
||||
<div>Artist</div>
|
||||
<div>Album</div>
|
||||
<div>Duration</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="theaders">
|
||||
<div class="flex">
|
||||
<div class="folder">
|
||||
<div class="table" ref="songtitle">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Track</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th v-if="songTitleWidth > minWidth">Duration</th>
|
||||
</tr>
|
||||
<tr v-for="song in songs" :key="song">
|
||||
<td class="flex">
|
||||
<div class="album-art rounded"></div>
|
||||
<span>Some broken hearts never mend</span>
|
||||
</div>
|
||||
<div class="flex">Don Williams</div>
|
||||
<div class="flex">Best Of</div>
|
||||
<div class="flex">3:17</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-artist">
|
||||
<span :style="{ width: songTitleWidth + 'px' }">{{
|
||||
song.title
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td :style="{ width: songTitleWidth + 'px' }"><span class="artist" v-for="artist in song.artists" :key="artist">{{ artist}}</span></td>
|
||||
<td :style="{ width: songTitleWidth + 'px' }">{{ song.album }}</td>
|
||||
<td
|
||||
:style="{ width: songTitleWidth + 'px' }"
|
||||
v-if="songTitleWidth > minWidth"
|
||||
>
|
||||
{{ song.duration }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
import { ref } from "@vue/reactivity";
|
||||
import { onMounted, onUnmounted } from "@vue/runtime-core";
|
||||
import Songs from '../../data/songs.js'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const songtitle = ref(null);
|
||||
const songTitleWidth = ref(null);
|
||||
|
||||
const minWidth = ref(250);
|
||||
|
||||
const songs = Songs.songs
|
||||
|
||||
const resizeSongTitleWidth = () => {
|
||||
songTitleWidth.value = songtitle.value.clientWidth / 3;
|
||||
console.log(songtitle.value.clientWidth / 3);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", () => {
|
||||
resizeSongTitleWidth();
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", () => {
|
||||
resizeSongTitleWidth();
|
||||
});
|
||||
});
|
||||
|
||||
return { songtitle, songTitleWidth, songs, minWidth };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.theaders {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-auto-columns: 1fr;
|
||||
gap: 0px 0px;
|
||||
grid-auto-flow: row;
|
||||
.table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.theaders .flex {
|
||||
.folder .table table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.folder .table table td .album-art {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
margin-right: 1em;
|
||||
background-color: #ccc;
|
||||
background-image: url(../../assets/images/Jim_Reeves.png);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.folder .table .flex {
|
||||
align-items: center;
|
||||
/* border: solid; */
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.theaders .flex span {
|
||||
.folder .table .flex span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.theaders .album-art {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
background: rgb(172, 13, 13);
|
||||
|
||||
td,
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
th {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid var(--seperator);
|
||||
}
|
||||
|
||||
.folder {
|
||||
background-color: rgba(0, 0, 0, 0.144);
|
||||
padding: 20px 20px 20px 20px;
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.folder-top {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.445);
|
||||
}
|
||||
|
||||
.folder-top .fname {
|
||||
width: 50%;
|
||||
color: rgba(255, 255, 255, 0.438);
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-top .fsearch {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.folder-top .fsearch div {
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.folder-top .fsearch input {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
padding-left: 10px;
|
||||
background-color: #0101016c;
|
||||
color: rgba(255, 255, 255, 0.521);
|
||||
font-size: large;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.folder-top .fsearch input:focus {
|
||||
color: #fff;
|
||||
td .artist {
|
||||
color: #b1b1b1fd;
|
||||
font-weight: lighter;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
</style>
|
||||
@ -126,7 +126,7 @@ export default {
|
||||
}
|
||||
|
||||
#pinned-container .seperator {
|
||||
color: var(--grey);
|
||||
color: var(--seperator);
|
||||
}
|
||||
|
||||
#pinned-container {
|
||||
|
||||
24
src/data/folders.js
Normal file
24
src/data/folders.js
Normal file
@ -0,0 +1,24 @@
|
||||
const folders = [
|
||||
{
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
folders,
|
||||
};
|
||||
24
src/data/songs.js
Normal file
24
src/data/songs.js
Normal file
@ -0,0 +1,24 @@
|
||||
const songs = [
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams,", "Kenny Rogers"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
songs
|
||||
}
|
||||
@ -1,19 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<SongList/>
|
||||
<!-- <hr> -->
|
||||
<FolderList/>
|
||||
<div id="f-view-parent" class="rounded">
|
||||
<SearchBox />
|
||||
<div id="scrollable">
|
||||
<SongList />
|
||||
<FolderList />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SongList from "@/components/FolderView/SongList.vue";
|
||||
import FolderList from "@/components/FolderView/FolderList.vue";
|
||||
import SearchBox from "@/components/FolderView/SearchBox.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SongList,
|
||||
FolderList
|
||||
FolderList,
|
||||
SearchBox,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
@ -24,5 +28,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#f-view-parent {
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.24);
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 1em;
|
||||
overflow: hidden;
|
||||
/* border: solid; */
|
||||
}
|
||||
|
||||
#scrollable {
|
||||
overflow: scroll;
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user