mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-07-28 13:41:42 +00:00
client: remove search box in folder view
- add working ctrl f listener
This commit is contained in:
geoffrey45
parent
64d2c8c466
commit
9310382436
11
Pipfile
11
Pipfile
@ -1,11 +0,0 @@
|
||||
[[source]]
|
||||
url = "https://pypi.python.org/simple"
|
||||
verify_ssl = true
|
||||
name = "pypi"
|
||||
|
||||
[packages]
|
||||
|
||||
[dev-packages]
|
||||
|
||||
[requires]
|
||||
python_version = "3.8"
|
||||
@ -70,12 +70,10 @@ export default {
|
||||
|
||||
const expandQueue = () => {
|
||||
up_next.value = !up_next.value;
|
||||
search.value = false;
|
||||
};
|
||||
|
||||
const expandSearch = () => {
|
||||
search.value = true;
|
||||
up_next.value = false;
|
||||
};
|
||||
|
||||
const collapseSearch = () => {
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
}
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -51,6 +50,17 @@ a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(158, 58, 58) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.l-container {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 4fr min-content;
|
||||
@ -91,7 +101,6 @@ a {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.ellip {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
@ -172,7 +181,7 @@ a {
|
||||
/* Handle on hover */
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(163, 163, 163);
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
@-webkit-keyframes similarAlbums {
|
||||
@ -237,5 +246,4 @@ a {
|
||||
.not_active {
|
||||
background-image: url(../../assets/icons/playing.webp);
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="folder-top flex">
|
||||
<div class="fname">
|
||||
<div>
|
||||
<div class="ellip">{{ path.split("/").splice(-1) + "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fsearch">
|
||||
<div>
|
||||
<input type="search" placeholder="Search this directory" />
|
||||
<button class="play image">
|
||||
<div class="icon"></div>
|
||||
Play
|
||||
</button>
|
||||
<div class="ellip text">
|
||||
<div class="icon image"></div>
|
||||
{{ path.split("/").splice(-1) + "" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -21,55 +21,51 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.folder-top {
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid $separator;
|
||||
width: calc(100% - 2rem);
|
||||
margin-left: 1rem;
|
||||
width: calc(100% - 0.5rem);
|
||||
padding-bottom: $small;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.folder-top .fname {
|
||||
width: 50%;
|
||||
color: rgba(255, 255, 255, 0.438);
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-top .fsearch {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
.play {
|
||||
height: 100%;
|
||||
width: 5em;
|
||||
background-color: rgb(5, 74, 131);
|
||||
border-radius: $small;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: $small;
|
||||
margin-right: $small;
|
||||
|
||||
.folder-top .fsearch div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
background-image: url(../../assets/icons/play.svg);
|
||||
background-size: 1.5rem;
|
||||
background-position: 10%;
|
||||
margin-right: $small;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-top .fsearch input {
|
||||
width: 30rem;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
background-color: #4645456c;
|
||||
color: rgba(255, 255, 255, 0.521);
|
||||
font-size: 1rem;
|
||||
line-height: 3rem;
|
||||
outline: none;
|
||||
}
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.folder-top .fsearch input::-webkit-search-cancel-button {
|
||||
position: relative;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
border-radius: $small;
|
||||
background-color: rgb(24, 22, 22);
|
||||
padding: $small;
|
||||
|
||||
.folder-top .fsearch input:focus {
|
||||
color: rgb(255, 255, 255);
|
||||
outline: 1px solid #fafafa52;
|
||||
.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
background-image: url(../../assets/icons/folder.svg);
|
||||
margin-right: $small;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -210,13 +210,14 @@ export default {
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: $small;
|
||||
padding: $small 0 $small $small;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
display: none;
|
||||
}
|
||||
|
||||
td .artist {
|
||||
@ -227,7 +228,6 @@ td .artist {
|
||||
border-collapse: collapse;
|
||||
text-transform: capitalize;
|
||||
position: relative;
|
||||
margin: 1rem;
|
||||
|
||||
tbody tr {
|
||||
cursor: pointer;
|
||||
|
||||
@ -21,7 +21,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div :class="{ hr: is_expanded }" class="all-items">
|
||||
<div
|
||||
:class="{ hr: is_expanded, v0x: !is_expanded, v1x: is_expanded }"
|
||||
class="all-items"
|
||||
>
|
||||
<div :class="{ v0: !is_expanded, v1: is_expanded }" class="scrollable">
|
||||
<div
|
||||
class="song-item h-1"
|
||||
@ -114,15 +117,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.up-next .hr {
|
||||
border-top: 1px solid var(--separator);
|
||||
}
|
||||
.up-next .v0 {
|
||||
max-height: 0em;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.5s ease;
|
||||
}
|
||||
|
||||
.up-next .v0x {
|
||||
background-color: transparent !important;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.up-next .v1x {
|
||||
transition: all .5s ease;
|
||||
background-color: rgb(218, 72, 96);
|
||||
}
|
||||
|
||||
.up-next .v1 {
|
||||
max-height: 21em;
|
||||
transition: max-height 0.5s ease;
|
||||
@ -135,7 +145,7 @@ export default {
|
||||
|
||||
.up-next {
|
||||
padding: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
margin-top: $small;
|
||||
background-color: $card-dark;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
@ -165,6 +175,10 @@ export default {
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.up-next .main-item .album-art {
|
||||
@ -189,17 +203,22 @@ export default {
|
||||
width: 20rem;
|
||||
margin: 0;
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.61);
|
||||
}
|
||||
|
||||
.up-next .all-items {
|
||||
padding-top: $small;
|
||||
border-radius: 0.5rem;
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
.up-next .all-items .scrollable {
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
background-color: $card-dark;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.up-next .all-items p {
|
||||
|
||||
@ -47,12 +47,14 @@
|
||||
<div class="scrollable" :class="{ v0: !is_hidden, v1: is_hidden }">
|
||||
<div class="tracks-results">
|
||||
<div class="heading">TRACKS<span class="more">SEE ALL</span></div>
|
||||
<div class="result-item" v-for="song in songs" :key="song">
|
||||
<div class="album-art image"></div>
|
||||
<div class="tags">
|
||||
<span class="title">{{ song.title }}</span>
|
||||
<hr />
|
||||
<span class="artist">{{ song.artist }}</span>
|
||||
<div class="items">
|
||||
<div class="result-item" v-for="song in songs" :key="song">
|
||||
<div class="album-art image"></div>
|
||||
<div class="tags">
|
||||
<span class="title">{{ song.title }}</span>
|
||||
<hr />
|
||||
<span class="artist">{{ song.artist }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -252,7 +254,7 @@ export default {
|
||||
}
|
||||
|
||||
.right-search .v1 {
|
||||
max-height: 26rem;
|
||||
max-height: 25rem;
|
||||
transition: max-height 0.5s ease;
|
||||
}
|
||||
|
||||
@ -361,19 +363,20 @@ export default {
|
||||
.right-search .heading {
|
||||
font-size: small;
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
padding: $small;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
right: $small;
|
||||
padding: 0.5rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.more:hover {
|
||||
background: $blue;
|
||||
border-radius: 0.5rem;
|
||||
// background: $blue;
|
||||
// border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -398,20 +401,24 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* */
|
||||
/* tracks */
|
||||
|
||||
.right-search .tracks-results {
|
||||
border-radius: 0.5rem;
|
||||
background: #1f0012;
|
||||
background: #ca0377;
|
||||
margin-left: $small;
|
||||
padding: $small;
|
||||
|
||||
.items {
|
||||
border-radius: $small;
|
||||
background-color: $card-dark;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 4.5rem;
|
||||
width: 100%;
|
||||
background-color: rgba(20, 20, 20, 0.479);
|
||||
|
||||
.album-art {
|
||||
width: 3.5rem;
|
||||
@ -419,7 +426,7 @@ export default {
|
||||
background-color: rgb(27, 150, 74);
|
||||
border-radius: 0.5rem;
|
||||
margin: 0 $small 0 $small;
|
||||
background-image: url(../assets/images/thriller.jpg);
|
||||
background-image: url(../assets/images/girl3.jpg);
|
||||
}
|
||||
|
||||
.tags .artist {
|
||||
@ -427,10 +434,6 @@ export default {
|
||||
color: rgba(255, 255, 255, 0.63);
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $blue;
|
||||
border-radius: $small;
|
||||
@ -443,7 +446,7 @@ export default {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* albums */
|
||||
|
||||
.right-search .albums-results {
|
||||
border-radius: 0.5rem;
|
||||
@ -487,7 +490,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* */
|
||||
/* artits */
|
||||
|
||||
.right-search .artists-results {
|
||||
border-radius: 0.5rem;
|
||||
|
||||
@ -73,7 +73,7 @@ const readQueue = () => {
|
||||
|
||||
if (prev_queue) {
|
||||
state.queue.value = prev_queue;
|
||||
|
||||
|
||||
updateNext(state.current.value);
|
||||
updatePrev(state.current.value);
|
||||
}
|
||||
@ -107,9 +107,11 @@ setTimeout(() => {
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
window.addEventListener('keyup', (e) => {
|
||||
if (e.code) {
|
||||
console.log(e.code);
|
||||
window.addEventListener("keyup", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (e.ctrlKey && e.code == "KeyF") {
|
||||
console.log('Ctrl F')
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -79,7 +79,7 @@ export default {
|
||||
#f-view-parent {
|
||||
position: relative;
|
||||
background-color: $card-dark;
|
||||
padding: 5rem $small 0 $small;
|
||||
padding: 4rem $small 0 $small;
|
||||
overflow: hidden;
|
||||
margin: $small 0 $small 0;
|
||||
}
|
||||
@ -87,17 +87,14 @@ export default {
|
||||
#f-view-parent .fixed {
|
||||
position: absolute;
|
||||
height: min-content;
|
||||
width: calc(100% - 2rem);
|
||||
width: calc(100% - 1rem);
|
||||
top: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
#scrollable {
|
||||
overflow-y: scroll;
|
||||
height: calc(100% - 1rem);
|
||||
height: calc(100% - $small);
|
||||
padding-right: $small;
|
||||
|
||||
.separator {
|
||||
margin: 0 1rem 0 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user