tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-07 03:35:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

add gradients to search grids

Browse Source
This commit is contained in:
geoffrey45 2022-02-22 20:56:13 +03:00
parent f141dd7f06
commit f9cceed2ba
6 changed files with 37 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/Search/Search.scss
View File

@ -10,6 +10,11 @@
.no-res {
text-align: center;
display: grid;
height: calc(100% - $small);
place-items: center;
font-size: 2rem;
transition: all 0.3s ease;
line-height: 4rem !important;
.highlight {
padding: $small;

8
src/components/RightSideBar/Search.vue
View File

@ -30,7 +30,7 @@
:albums="albums.albums"
:more="albums.more"
/>
<div class="separator no-border"></div>
<div class="separator no-border" v-if="albums.albums.length"></div>
<ArtistGrid
v-if="artists.artists.length"
:artists="artists.artists"
@ -42,14 +42,14 @@
!tracks.tracks.length &&
!albums.albums.length && query.length !== 0
"
class="no-res"
class="no-res border rounded"
>
<div class="no-res-text">
No results for <span class="highlight rounded">{{ query }}</span>
</div>
</div>
<div v-else-if="query.length === 0" class="no-res">
<div class="no-res-text">Find your music 🔍😀</div>
<div v-else-if="query.length === 0" class="no-res border rounded">
<div class="no-res-text">👻 Find your music</div>
</div>
</div>
</div>

18
src/components/Search/AlbumGrid.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="albums-results">
<div class="heading">ALBUMS</div>
<div class="heading theme">ALBUMS</div>
<div class="grid">
<AlbumCard v-for="album in albums" :key="album" :album="album" />
</div>
@ -31,7 +31,7 @@ export default {
</script>
<style lang="scss">
$theme: #353333;
$theme: #6405d1;
.right-search .albums-results {
border-radius: 0.5rem;
@ -45,13 +45,13 @@ $theme: #353333;
border: solid 2px $theme;
}
.heading {
background-color: $theme;
color: #fff;
}
.morexx > button {
background-color: $theme !important;
.theme {
background-image: linear-gradient(
45deg,
#380079 20%,
#6405d1 50%,
#1b0342 100%
);
color: #fff;
}

18
src/components/Search/ArtistGrid.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="artists-results">
<div class="heading">ARTISTS</div>
<div class="heading theme">ARTISTS</div>
<div class="grid">
<ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
</div>
@ -31,7 +31,7 @@ export default {
</script>
<style lang="scss">
$theme: #585858cc;
$theme: #464545fd;
.right-search .artists-results {
border-radius: 0.5rem;
@ -44,13 +44,13 @@ $theme: #585858cc;
border: solid 2px $theme;
}
.heading {
background-color: $theme;
color: #fff;
}
.morexx > button {
background-color: $theme !important;
.theme {
background-image: linear-gradient(
45deg,
#141414 0%,
#464545fd 50%,
#111111 100%
);
color: #fff;
}

2
src/components/Search/LoadMore.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="morexx">
<button @click="loadMore">
<button @click="loadMore" class="theme">
<div class="text">Load More</div>
</button>
</div>

18
src/components/Search/TracksGrid.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="tracks-results" v-if="tracks">
<div class="heading">TRACKS</div>
<div class="heading theme">TRACKS</div>
<div class="items">
<table>
<tbody>
@ -39,20 +39,20 @@ function loadMore() {
</script>
<style lang="scss">
$theme: rgb(86, 86, 87);
$theme: #0056f5;
.right-search .tracks-results {
border-radius: 0.5rem;
padding: $small;
border: 2px solid $theme;
.heading {
background-color: $theme;
color: #fff;
}
.morexx > button {
background-color: $theme !important;
.theme {
background-image: linear-gradient(
45deg,
#21216b 20%,
$theme 50%,
#16266b 100%
);
color: #fff;
}
}