mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 12:33:03 +00:00
add folder list
This commit is contained in:
geoffrey45
@@ -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>
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user