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

search component initial build

Browse Source
This commit is contained in:
geoffrey45
2021-11-26 10:52:32 +03:00
parent 872badbc65
commit 206e89878c
8 changed files with 350 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FolderView/SearchBox.vue
+3 -3
View File
@@ -5,7 +5,7 @@
</div>
<div class="fsearch">
<div>
<input type="search" placeholder="Search here" />
<input type="search" placeholder="Search this directory" />
</div>
</div>
</div>
@@ -44,7 +44,7 @@ export default {};
.folder-top .fsearch input {
width: 30em;
border: none;
border-radius: 2em;
border-radius: .5em;
padding-left: 1em;
background-color: #4645456c;
color: rgba(255, 255, 255, 0.521);
@@ -63,6 +63,6 @@ export default {};
.folder-top .fsearch input:focus {
color: rgb(255, 255, 255);
outline: 0.1em solid #fafafa;
outline: 0.1em solid #fafafa52;
}
</style>
src/components/FolderView/SongList.vue
+2 -8
View File
@@ -10,9 +10,9 @@
</tr>
<tr v-for="song in songs" :key="song">
<td :style="{ width: songTitleWidth + 'px' }" class="flex">
<div class="album-art rounded"></div>
<div class="album-art rounded image"></div>
<div>
<span>{{ song.title }}</span>
<span class="ellipsis">{{ song.title }}</span>
</div>
</td>
<td :style="{ width: songTitleWidth + 'px' }">
@@ -92,9 +92,6 @@ export default {
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 {
@@ -106,9 +103,6 @@ export default {
position: absolute;
bottom: 1.5em;
width: calc(100% - 6em);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td,
src/components/LeftSidebar/Navigation.vue
+22 -25
View File
@@ -1,9 +1,9 @@
<template>
<div class="nav-container" :class="{ collapsed: collapsed }">
<div class="side-nav-container" :class="{ collapsed: collapsed }">
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="home-button">
<div class="in">
<div class="nav-icon" id="home-icon"></div>
<div class="nav-icon image" id="home-icon"></div>
<span id="text">Home</span>
</div>
</div>
@@ -12,7 +12,7 @@
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="album-button">
<div class="in">
<div class="nav-icon" id="album-icon"></div>
<div class="nav-icon image" id="album-icon"></div>
<span id="text">Albums</span>
</div>
</div>
@@ -21,7 +21,7 @@
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="artists-button">
<div class="in">
<div class="nav-icon" id="artists-icon"></div>
<div class="nav-icon image" id="artists-icon"></div>
<span id="text">Artists</span>
</div>
</div>
@@ -30,7 +30,7 @@
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="playlists-button">
<div class="in">
<div class="nav-icon" id="playlists-icon"></div>
<div class="nav-icon image" id="playlists-icon"></div>
<span id="text">Playlist</span>
</div>
</div>
@@ -39,7 +39,7 @@
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="mixes-button">
<div class="in">
<div class="nav-icon" id="mixes-icon"></div>
<div class="nav-icon image" id="mixes-icon"></div>
<span id="text">Mixes</span>
</div>
</div>
@@ -48,7 +48,7 @@
<router-link :to="{ name: 'FolderView' }">
<div class="nav-button" id="folders-button">
<div class="in">
<div class="nav-icon" id="folders-icon"></div>
<div class="nav-icon image" id="folders-icon"></div>
<span id="text">Folders</span>
</div>
</div>
@@ -66,7 +66,7 @@ export default {
<style>
.nav-container .in {
.side-nav-container .in {
display: flex;
align-items: center;
}
@@ -75,14 +75,14 @@ export default {
flex-direction: column;
}
.nav-container {
.side-nav-container {
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.158);
border-top: 1px solid var(--seperator);
margin-bottom: 10px;
padding-top: 10px;
}
.nav-container .nav-button {
.side-nav-container .nav-button {
display: flex;
align-items: flex-start;
justify-content: flex-start;
@@ -97,53 +97,50 @@ export default {
margin-top: 5px;
}
.nav-container .nav-button:hover {
.side-nav-container .nav-button:hover {
background-color: rgba(220, 20, 60, 0.5);
}
.nav-container .nav-button .nav-icon {
.side-nav-container .nav-button .nav-icon {
height: 24px;
width: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 0.5em;
margin-left: 10px;
}
.nav-container #home-button #home-icon {
.side-nav-container #home-button #home-icon {
background-image: url(../../assets/icons/home.svg);
}
.nav-container #album-button #album-icon {
.side-nav-container #album-button #album-icon {
background-image: url(../../assets/icons/album.svg);
}
.nav-container #home-button #text {
.side-nav-container #home-button #text {
margin-top: 5px;
}
.nav-container #artists-button #artists-icon {
.side-nav-container #artists-button #artists-icon {
background-image: url(../../assets/icons/artist.svg);
}
.nav-container #playlists-button #playlists-icon {
.side-nav-container #playlists-button #playlists-icon {
background-image: url(../../assets/icons/playlist.svg);
}
.nav-container #mixes-button #mixes-icon {
.side-nav-container #mixes-button #mixes-icon {
background-image: url(../../assets/icons/mix.svg);
}
.nav-container #folders-button #folders-icon {
.side-nav-container #folders-button #folders-icon {
background-image: url(../../assets/icons/folder.svg);
}
.nav-container #folders-button #text {
.side-nav-container #folders-button #text {
margin-top: 5px;
}
.nav-container hr {
.side-nav-container hr {
display: none;
}
</style>
src/components/LeftSidebar/PinnedStuff.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div
class="nav-container"
class="side-nav-container"
:class="{ hidden: collapsed }"
id="pinned-container"
>
src/components/RightSideBar/Search.vue
+213
View File
@@ -0,0 +1,213 @@
<template>
<div class="right-search">
<input type="search" id="search" placeholder="Michael Jackson" />
<div class="scrollable">
<h3 class="heading">TRACKS <span class="more">MORE</span></h3>
<div class="tracks-results">
<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 class="albums-results">
<h3 class="heading">ALBUMS <span class="more">MORE</span></h3>
<div class="grid">
<div class="result-item result-item3" v-for="album in albums" :key="album">
<div class="album-art image"></div>
<div class="title ellipsis">{{ album }}</div>
</div>
</div>
</div>
<div class="artists-results">
<h3 class="heading">ARTISTS <span class="more">MORE</span></h3>
<div class="grid">
<div class="result-item result-item3" v-for="album in albums" :key="album">
<div class="image"></div>
<div class="name ellipsis">{{ album }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
setup() {
const songs = [
{
title: "Thriller",
artist: "Michael jackson",
},
{
title: "We are the world",
artist: "Michael jackson",
},
];
const albums = [
"Smooth Criminal like wtf ... and im serious",
"Xscape",
"USA for Africa",
];
return { songs, albums };
},
};
</script>
<style>
.right-search {
position: relative;
height: 30em;
border-radius: 1em;
margin: 0.5em 0 0 0;
padding: 0.75em;
background-color: rgba(32, 31, 31, 0.5);
overflow: hidden;
}
.right-search .scrollable {
height: calc(100% - 4em);
overflow-y: scroll;
scroll-behavior: smooth;
}
.right-search .scrollable::-webkit-scrollbar {
display: none;
}
.right-search .heading {
font-size: small;
position: relative;
}
.right-search .heading .more {
position: absolute;
right: 0;
border-radius: 0.5em;
cursor: pointer;
}
.right-search input {
width: 100%;
border: 0.1em solid;
border-radius: 0.5em;
padding-left: 1em;
background-color: transparent;
color: rgba(255, 255, 255, 0.479);
font-size: 1em;
line-height: 3em;
outline: none;
margin-bottom: 1em;
}
.right-search input::-webkit-search-cancel-button {
position: relative;
right: 1em;
cursor: pointer;
}
.right-search input:focus {
color: rgb(255, 255, 255);
}
.right-search .tracks-results {
border-radius: 0.5em;
overflow: hidden;
}
.right-search .tracks-results .result-item {
display: flex;
align-items: center;
height: 5em;
background-color: rgba(20, 20, 20, 0.733);
}
.right-search .tracks-results .result-item:nth-child(odd) {
background-color: rgba(90, 90, 90, 0.233);
}
.right-search .tracks-results .result-item .album-art {
width: 4em;
height: 4em;
background-color: rgb(27, 150, 74);
border-radius: 0.5em;
margin: 0 0.5em 0 0.25em;
background-image: url(../../assets/images/thriller.jpg);
}
.right-search hr {
margin: 0.1em;
border: none;
}
.right-search .tracks-results .result-item .tags .artist {
font-size: small;
color: rgba(255, 255, 255, 0.63);
}
.right-search .albums-results {
border-radius: 0.5em;
background-color: rgba(8, 3, 1, 0.274);
margin-top: 1em;
}
.right-search .albums-results .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.right-search .result-item3 {
display: flex;
flex-direction: column;
align-items: center;
}
.right-search .albums-results .result-item .album-art {
height: 7em;
width: 7em;
background-color: rgba(26, 26, 26, 0.452);
border-radius: 0.5em;
margin-bottom: 0.5em;
background-image: url(../../assets/images/thriller.jpg);
}
.right-search .albums-results .result-item .title {
width: 7em;
text-align: center;
}
.right-search .artists-results {
border-radius: 0.5em;
background-color: rgba(8, 3, 1, 0.274);
}
.right-search h3 {
padding: 1em 1em 0 1em;
}
.right-search .artists-results .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.right-search .artists-results .result-item .image {
height: 7em;
width: 7em;
border-radius: 50%;
background-color: rgba(26, 26, 26, 0.452);
margin-bottom: 0.5em;
background-image: url(../../assets/images/thriller.jpg);
}
.right-search .artists-results .result-item .name {
width: 7em;
text-align: center;
}
</style>