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

add horizontal scroll to featured artists

Browse Source
This commit is contained in:
geoffrey45 2021-12-08 18:06:25 +03:00
parent 349028b592
commit 1e15a0c51d
1 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/PlaylistView/FeaturedArtists.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="f-artists"> <div class="f-artists">
<div class="artists"> <div class="artists" id="meeee">
<div class="artist c1"> <div class="artist c1">
<div class="blur"></div> <div class="blur"></div>
<div class="s2"></div> <div class="s2"></div>
@ -19,7 +19,23 @@
<script> <script>
export default { export default {
setup() { setup() {
const artists = ["Eminem", "Drake", "Kendrick Lamar"]; const artists = [
"Eminem",
"Drake",
"Kendrick Lamar",
"Eminem",
"Drake",
"Kendrick Lamar",
"Eminem",
"Drake",
"Kendrick Lamar",
"Eminem",
"Drake",
"Kendrick Lamar",
"Eminem",
"Drake",
"Kendrick Lamar",
];
return { return {
artists, artists,
@ -30,7 +46,8 @@ export default {
<style lang="scss"> <style lang="scss">
.f-artists { .f-artists {
height: 10em; position: relative;
height: 12em;
width: calc(100% - 1em); width: calc(100% - 1em);
background-color: #1f1e1d; background-color: #1f1e1d;
padding: $small; padding: $small;
@ -43,12 +60,22 @@ export default {
} }
.f-artists .artists { .f-artists .artists {
position: absolute;
bottom: 1em;
width: calc(100% - 1em);
height: 11em;
display: flex; display: flex;
flex-wrap: wrap; align-items: flex-end;
align-items: center; flex-wrap: nowrap;
overflow-y: scroll;
}
.f-artists .artists::-webkit-scrollbar {
display: none;
} }
.f-artists .artist { .f-artists .artist {
flex: 0 0 auto;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
margin-left: $smaller; margin-left: $smaller;
@ -56,15 +83,16 @@ export default {
width: 9em; width: 9em;
height: 9em; height: 9em;
border-radius: $small; border-radius: $small;
background-color: #565066; background-color: #fd5c63;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
scroll-snap-type: x mandatory;
} }
.f-artists .artist:hover { .f-artists .artist:hover {
transform: translateY(-1.5em); transform: translateY(-1em);
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
@ -132,5 +160,4 @@ export default {
border-radius: 50%; border-radius: 50%;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
</style> </style>