tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-06 19:25:34 +00:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/App.vue
View File

@ -12,33 +12,36 @@
<PinnedStuff :collapsed="collapsed" /> <PinnedStuff :collapsed="collapsed" />
<div id="settings-button"> <div id="settings-button">
<div class="in"> <div class="in">
<div class="nav-icon" id="settings-icon"></div> <div class="nav-icon image" id="settings-icon"></div>
<span id="text">Settings</span> <span id="text">Settings</span>
</div> </div>
</div> </div>
</div> </div>
<div class="nav">
<div id="nav"></div>
</div>
<div class="content"> <div class="content">
<router-view /> <router-view />
</div> </div>
<div class="r-sidebar"></div> <div class="r-sidebar">
<Search/>
</div>
</div> </div>
</template> </template>
<script> <script>
import { ref } from "@vue/reactivity"; import { ref } from "@vue/reactivity";
import Navigation from "./components/LeftSidebar/Navigation.vue"; import Navigation from "./components/LeftSidebar/Navigation.vue";
import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue"; import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
import Search from "./components/RightSideBar/Search.vue"
export default { export default {
components: { components: {
Navigation, Navigation,
PinnedStuff, PinnedStuff,
Search
}, },
setup() { setup() {
const collapsed = ref(false); const collapsed = ref(true);
const logo = ref(null); const logo = ref(null);
@ -52,9 +55,9 @@ export default {
<style> <style>
.logo { .logo {
height: 30px; height: 2em;
width: 150px; width: 9em;
margin-left: 35px; margin-left: 2.25em;
background: url(./assets/logo.svg); background: url(./assets/logo.svg);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -73,32 +76,28 @@ export default {
} }
#logo-container { #logo-container {
height: 60px; height: 3.60em;
margin-left: 20px; margin-left: 1em;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: .5em;
} }
.l-sidebar { .l-sidebar {
position: relative; position: relative;
} }
.l-container .seperator {
margin-left: -2em;
}
.l-container #toggle { .l-container #toggle {
position: fixed; position: fixed;
top: 7px; top: 1em;
width: 30px; width: 1.75em;
height: 60px; height: 3.75em;
background: url(./assets/icons/menu.svg); background: url(./assets/icons/menu.svg);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
cursor: pointer; cursor: pointer;
margin-right: 5px; margin-left: .25em;
} }
.l-container #settings-button { .l-container #settings-button {
@ -108,7 +107,7 @@ export default {
color: #fff; color: #fff;
height: 50px; height: 50px;
width: 100%; width: 100%;
border-top: 1px solid #ffffff27; border-top: 1px solid var(--seperator);
} }
#settings-button .in { #settings-button .in {
@ -123,14 +122,14 @@ export default {
} }
.l-container #settings-button #settings-icon { .l-container #settings-button #settings-icon {
margin-left: 23px; margin-left: 1em;
margin-right: 5px; margin-right: .25em;
width: 24px; width: 1.5em;
height: 24px; height: 1.5em;
background-image: url(./assets/icons/settings.svg); background-image: url(./assets/icons/settings.svg);
background-size: contain; /* background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center; */
} }
.collapsed #settings-button #settings-icon { .collapsed #settings-button #settings-icon {

158
src/assets/css/global.css
View File

@ -1,133 +1,141 @@
:root { :root {
--seperator: #ffffff48; --seperator: #ffffff46;
--green: #4AD168; --green: #4AD168;
} }
body { body {
margin: 0; margin: 0;
background: #0d0e0e; background: #0d0e0e;
color: #fff; color: #fff;
font-family: 'Helvetica Neue', sans-serif; font-family: 'Helvetica Neue', sans-serif;
} }
/* #app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} */
a { a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
} }
.seperator { .seperator {
border: 1px solid; border: 1px solid;
color: transparent; color: transparent;
margin: 0em; margin: 0em;
} }
.hidden { .hidden {
display: none; display: none;
} }
.l-container { .l-container {
display: grid; display: grid;
grid-template-columns: min-content 4fr 1.5fr; grid-template-columns: min-content 4fr 30em;
grid-template-rows: 78px 1fr 1fr; grid-template-rows: 4em 1fr 1fr;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar";
"l-sidebar nav nav" width: 100vw;
"l-sidebar content r-sidebar" height: 100vh;
"l-sidebar content r-sidebar"; background-repeat: no-repeat;
width: 100vw; background-size: cover;
height: 100vh; background-position: center;
background-repeat: no-repeat; background: rgba(0, 0, 0, 0.575);
background-size: cover; backdrop-filter: blur(40px);
background-position: center; -webkit-backdrop-filter: blur(40px);
background: rgba(0, 0, 0, 0.575); -moz-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
-moz-backdrop-filter: blur(40px)
} }
#bg-blur { #bg-blur {
position: absolute; position: absolute;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(27, 27, 27, 0.548); background-color: rgba(27, 27, 27, 0.548);
background-image: url(../images/dark-bg.jpg); background-image: url(../images/dark-bg.jpg);
z-index: -1; z-index: -1;
} }
.collapsed .l-sidebar { .collapsed .l-sidebar {
width: 70px; width: 70px;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transition-duration: 0.3s; transition-duration: 0.3s;
transition-property: width; transition-property: width;
} }
.l-sidebar { .l-sidebar {
width: 250px; width: 250px;
grid-area: l-sidebar; grid-area: l-sidebar;
padding-top: 0.5em; padding-top: 0.5em;
background-color: #131313b2; margin: .5em 0 .5em .5em;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); border-radius: .5em;
transition-duration: 0.3s; background-color: #131313b2;
transition-property: width; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-duration: 0.3s;
transition-property: width;
} }
.rounded { .rounded {
border-radius: 10px; border-radius: 10px;
} }
.circular { .circular {
border-radius: 20px; border-radius: 20px;
} }
.flex { .flex {
display: flex; display: flex;
}
.nav {
grid-area: nav;
border: 1px solid;
} }
.content { .content {
grid-area: content; grid-area: content;
border-radius: .25em; border-radius: .25em;
padding: .5em; padding: .5em;
overflow: hidden; overflow: hidden;
} }
.r-sidebar { .r-sidebar {
grid-area: r-sidebar; grid-area: r-sidebar;
border: 1px solid rgb(109, 109, 109); border-radius: 5px;
border-radius: 5px; margin-right: .5em;
}
.image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
/* scrollbars */ /* scrollbars */
/* width */ /* width */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: .5em; width: .5em;
} }
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: rgba(51, 51, 51, 0.459); background: rgba(51, 51, 51, 0.459);
border-radius: 1em; border-radius: 1em;
} }
/* Handle */ /* Handle */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: grey; background: grey;
border-radius: 1em; border-radius: 1em;
} }
/* Handle on hover */ /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(163, 163, 163);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(163, 163, 163);
}

BIN
src/assets/images/thriller.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

6
src/components/FolderView/SearchBox.vue
View File

@ -5,7 +5,7 @@
</div> </div>
<div class="fsearch"> <div class="fsearch">
<div> <div>
<input type="search" placeholder="Search here" /> <input type="search" placeholder="Search this directory" />
</div> </div>
</div> </div>
</div> </div>
@ -44,7 +44,7 @@ export default {};
.folder-top .fsearch input { .folder-top .fsearch input {
width: 30em; width: 30em;
border: none; border: none;
border-radius: 2em; border-radius: .5em;
padding-left: 1em; padding-left: 1em;
background-color: #4645456c; background-color: #4645456c;
color: rgba(255, 255, 255, 0.521); color: rgba(255, 255, 255, 0.521);
@ -63,6 +63,6 @@ export default {};
.folder-top .fsearch input:focus { .folder-top .fsearch input:focus {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
outline: 0.1em solid #fafafa; outline: 0.1em solid #fafafa52;
} }
</style> </style>

10
src/components/FolderView/SongList.vue
View File

@ -10,9 +10,9 @@
</tr> </tr>
<tr v-for="song in songs" :key="song"> <tr v-for="song in songs" :key="song">
<td :style="{ width: songTitleWidth + 'px' }" class="flex"> <td :style="{ width: songTitleWidth + 'px' }" class="flex">
<div class="album-art rounded"></div> <div class="album-art rounded image"></div>
<div> <div>
<span>{{ song.title }}</span> <span class="ellipsis">{{ song.title }}</span>
</div> </div>
</td> </td>
<td :style="{ width: songTitleWidth + 'px' }"> <td :style="{ width: songTitleWidth + 'px' }">
@ -92,9 +92,6 @@ export default {
margin-right: 1em; margin-right: 1em;
background-color: #ccc; background-color: #ccc;
background-image: url(../../assets/images/Jim_Reeves.png); background-image: url(../../assets/images/Jim_Reeves.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
} }
.folder .table .flex { .folder .table .flex {
@ -106,9 +103,6 @@ export default {
position: absolute; position: absolute;
bottom: 1.5em; bottom: 1.5em;
width: calc(100% - 6em); width: calc(100% - 6em);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
td, td,

47
src/components/LeftSidebar/Navigation.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="nav-container" :class="{ collapsed: collapsed }"> <div class="side-nav-container" :class="{ collapsed: collapsed }">
<router-link :to="{ name: 'Home' }"> <router-link :to="{ name: 'Home' }">
<div class="nav-button" id="home-button"> <div class="nav-button" id="home-button">
<div class="in"> <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> <span id="text">Home</span>
</div> </div>
</div> </div>
@ -12,7 +12,7 @@
<router-link :to="{ name: 'Home' }"> <router-link :to="{ name: 'Home' }">
<div class="nav-button" id="album-button"> <div class="nav-button" id="album-button">
<div class="in"> <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> <span id="text">Albums</span>
</div> </div>
</div> </div>
@ -21,7 +21,7 @@
<router-link :to="{ name: 'Home' }"> <router-link :to="{ name: 'Home' }">
<div class="nav-button" id="artists-button"> <div class="nav-button" id="artists-button">
<div class="in"> <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> <span id="text">Artists</span>
</div> </div>
</div> </div>
@ -30,7 +30,7 @@
<router-link :to="{ name: 'Home' }"> <router-link :to="{ name: 'Home' }">
<div class="nav-button" id="playlists-button"> <div class="nav-button" id="playlists-button">
<div class="in"> <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> <span id="text">Playlist</span>
</div> </div>
</div> </div>
@ -39,7 +39,7 @@
<router-link :to="{ name: 'Home' }"> <router-link :to="{ name: 'Home' }">
<div class="nav-button" id="mixes-button"> <div class="nav-button" id="mixes-button">
<div class="in"> <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> <span id="text">Mixes</span>
</div> </div>
</div> </div>
@ -48,7 +48,7 @@
<router-link :to="{ name: 'FolderView' }"> <router-link :to="{ name: 'FolderView' }">
<div class="nav-button" id="folders-button"> <div class="nav-button" id="folders-button">
<div class="in"> <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> <span id="text">Folders</span>
</div> </div>
</div> </div>
@ -66,7 +66,7 @@ export default {
<style> <style>
.nav-container .in { .side-nav-container .in {
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -75,14 +75,14 @@ export default {
flex-direction: column; flex-direction: column;
} }
.nav-container { .side-nav-container {
color: #fff; color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.158); border-top: 1px solid var(--seperator);
margin-bottom: 10px; margin-bottom: 10px;
padding-top: 10px; padding-top: 10px;
} }
.nav-container .nav-button { .side-nav-container .nav-button {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
@ -97,53 +97,50 @@ export default {
margin-top: 5px; margin-top: 5px;
} }
.nav-container .nav-button:hover { .side-nav-container .nav-button:hover {
background-color: rgba(220, 20, 60, 0.5); background-color: rgba(220, 20, 60, 0.5);
} }
.nav-container .nav-button .nav-icon { .side-nav-container .nav-button .nav-icon {
height: 24px; height: 24px;
width: 24px; width: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 0.5em; margin-right: 0.5em;
margin-left: 10px; margin-left: 10px;
} }
.nav-container #home-button #home-icon { .side-nav-container #home-button #home-icon {
background-image: url(../../assets/icons/home.svg); 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); background-image: url(../../assets/icons/album.svg);
} }
.nav-container #home-button #text { .side-nav-container #home-button #text {
margin-top: 5px; margin-top: 5px;
} }
.nav-container #artists-button #artists-icon { .side-nav-container #artists-button #artists-icon {
background-image: url(../../assets/icons/artist.svg); 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); 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); 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); background-image: url(../../assets/icons/folder.svg);
} }
.nav-container #folders-button #text { .side-nav-container #folders-button #text {
margin-top: 5px; margin-top: 5px;
} }
.nav-container hr { .side-nav-container hr {
display: none; display: none;
} }
</style> </style>

2
src/components/LeftSidebar/PinnedStuff.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="nav-container" class="side-nav-container"
:class="{ hidden: collapsed }" :class="{ hidden: collapsed }"
id="pinned-container" id="pinned-container"
> >

213
src/components/RightSideBar/Search.vue Normal file
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>