TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 04:23:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

minor refactors

Browse Source
This commit is contained in:
geoffrey45
2021-12-29 18:42:38 +03:00
parent 585a403a6c
commit 6dbf8efb90
7 changed files with 83 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FolderView/FolderList.vue
+1 -6
View File
@@ -84,11 +84,6 @@ export default {
}
.f-container .f-item:hover {
transition: all 0.2s ease;
background: #000000;
background: no-repeat 8%/100% url(../../assets/icons/folder.svg),
-webkit-linear-gradient(to bottom, #434343, #000000);
background: no-repeat 8%/10% url(../../assets/icons/folder.svg),
linear-gradient(to bottom, #434343, #000000);
background-color: $blue;
}
</style>
src/components/FolderView/SongList.vue
-1
View File
@@ -86,7 +86,6 @@ export default {
const putCommas = perks.putCommas;
const updateQueue = async (song) => {
console.log(song.artists.length);
if (perks.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) {
const queue = song_list.value;
localStorage.setItem("queue", JSON.stringify(queue));
src/components/LeftSidebar/Navigation.vue
+61 -65
View File
@@ -73,13 +73,16 @@ export default {
</script>
<style lang="scss">
.side-nav-container .in {
display: flex;
.collapsed .nav-button {
font-size: smaller;
margin-top: 5px;
align-items: center;
}
justify-content: center;
.collapsed .in {
flex-direction: column;
.in {
width: 100%;
flex-direction: column;
}
}
.side-nav-container {
@@ -91,69 +94,62 @@ export default {
.nav-button {
border-radius: $small;
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-color: transparent;
height: 100%;
padding: 0.6rem 0 0.6rem 0;
&:hover {
background-color: rgb(5, 80, 150);
}
.nav-icon {
height: 1.5rem;
width: 1.5rem;
margin-right: 0.5rem;
margin-left: 10px;
}
.in {
display: flex;
align-items: center;
}
#home-icon {
background-image: url(../../assets/icons/home.svg);
}
#album-icon {
background-image: url(../../assets/icons/album.svg);
}
#text {
margin-top: 5px;
}
#artists-icon {
background-image: url(../../assets/icons/artist.svg);
}
#playlists-icon {
background-image: url(../../assets/icons/playlist.svg);
}
#mixes-icon {
background-image: url(../../assets/icons/mix.svg);
}
#folders-icon {
background-image: url(../../assets/icons/folder.svg);
}
#settings-icon {
background-image: url(../../assets/icons/settings.svg);
}
}
}
.side-nav-container .nav-button {
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-color: transparent;
height: 100%;
padding: 10px;
}
.collapsed .nav-button {
font-size: smaller;
margin-top: 5px;
}
.side-nav-container .nav-button:hover {
background-color: rgb(5, 80, 150);
}
.side-nav-container .nav-button .nav-icon {
height: 24px;
width: 24px;
margin-right: 0.5rem;
margin-left: 10px;
}
.side-nav-container #home-button #home-icon {
background-image: url(../../assets/icons/home.svg);
}
.side-nav-container #album-button #album-icon {
background-image: url(../../assets/icons/album.svg);
}
.side-nav-container #home-button #text {
margin-top: 5px;
}
.side-nav-container #artists-button #artists-icon {
background-image: url(../../assets/icons/artist.svg);
}
.side-nav-container #playlists-button #playlists-icon {
background-image: url(../../assets/icons/playlist.svg);
}
.side-nav-container #mixes-button #mixes-icon {
background-image: url(../../assets/icons/mix.svg);
}
.side-nav-container #folders-button #folders-icon {
background-image: url(../../assets/icons/folder.svg);
}
.side-nav-container #folders-button #settings-icon {
background-image: url(../../assets/icons/settings.svg);
}
.side-nav-container #folders-button #text {
margin-top: 5px;
}
.side-nav-container hr {
display: none;
}
src/components/RightSideBar/Search.vue
+18 -8
View File
@@ -1,9 +1,5 @@
<template>
<div
class="right-search"
@mouseenter="magic_flag = true"
@mouseleave="toggleMagicFlag"
>
<div class="right-search" ref="searchComponent">
<div class="input">
<div class="search-icon image"></div>
<div class="filter">
@@ -19,6 +15,9 @@
<input
type="search"
id="search"
@focus="toggleMagicFlag"
@blur="toggleMagicFlag"
@keyup.backspace="removeLastFilter"
placeholder="find your music"
v-model="query"
/>
@@ -127,6 +126,7 @@ export default {
icon: "🈁",
},
];
const searchComponent = ref(null);
const filters = ref([]);
const albums = [
"Smooth Criminal like wtf ... and im serious",
@@ -148,14 +148,22 @@ export default {
filters.value = filters.value.filter((f) => f !== filter);
}
function removeLastFilter() {
if (query.value === '') {
if (filters.value.length) {
filters.value.pop();
}
}
}
function toggleMagicFlag() {
setTimeout(() => {
magic_flag.value = false;
}, 1000);
magic_flag.value = !magic_flag.value;
}, 300);
}
watch(query, (new_query) => {
if (new_query.length > 0) {
if (new_query) {
emit("expandSearch");
} else {
emit("collapseSearch");
@@ -166,6 +174,7 @@ export default {
addFilter,
toggleMagicFlag,
removeFilter,
removeLastFilter,
songs,
albums,
artists,
@@ -174,6 +183,7 @@ export default {
magic_flag,
options,
filters,
searchComponent,
};
},
};
src/composables/getAlbum.js
+1 -1
View File
@@ -1,7 +1,7 @@
let base_uri = "http://127.0.0.1:9876";
const getAlbum = async (name, artist) => {
const res = await fetch(base_uri + "/albums/" + name + "::" + artist);
const res = await fetch(base_uri + "/albums/" + name.replaceAll("/", "|") + "::" + artist.replaceAll("/", "|"));
if (!res.ok) {
const message = `An error has occured: ${res.status}`;
src/composables/getQueue.js
-26
View File
@@ -1,26 +0,0 @@
const url = "http://127.0.0.1:9876/get/queue";
const getQueue = async (type, id) => {
const res = await fetch(url, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
type: type,
id: id,
}),
});
if (!res.ok) {
const message = `An error has occured: ${res.status}`;
throw new Error(message);
}
const data = await res.json();
return data.songs;
};
export default getQueue;