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

implement wheel scroll on featured artists.

Browse Source 
add next-prev buttons too
This commit is contained in:
geoffrey45
2021-12-10 16:10:06 +03:00
parent a96b76748f
commit 43c1f70380
7 changed files with 129 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -47
View File
@@ -10,12 +10,6 @@
</div>
<Navigation :collapsed="collapsed" />
<PinnedStuff :collapsed="collapsed" />
<div id="settings-button">
<div class="in">
<div class="nav-icon image" id="settings-icon"></div>
<span id="text">Settings</span>
</div>
</div>
</div>
<div class="content">
<router-view />
@@ -114,15 +108,6 @@ export default {
animation-iteration-count: 1;
}
.nav-container .in {
display: flex;
align-items: center;
}
.collapsed .in {
flex-direction: column;
}
.l-sidebar {
position: relative;
}
@@ -139,40 +124,9 @@ export default {
cursor: pointer;
}
.l-container #settings-button {
position: absolute;
bottom: 0;
display: flex;
height: 50px;
width: 100%;
cursor: pointer;
border-radius: 0 0 $small $small;
border-top: solid .1rem $seperator
}
#settings-button .in {
display: flex;
align-items: center;
justify-content: center;
}
.l-container #settings-button #settings-icon {
margin-left: 1.5rem;
margin-right: 0.25rem;
width: 1.5rem;
height: 1.5rem;
background-image: url(./assets/icons/settings.svg);
}
.collapsed #settings-button #settings-icon {
margin-right: 0;
}
.collapsed #settings-button #text {
display: none;
}
.m-np {
position: absolute;
bottom: 0;
}
</style>
src/assets/css/global.scss
+1 -1
View File
@@ -79,7 +79,7 @@ a {
}
.l-sidebar {
width: 250px;
width: 15em;
grid-area: l-sidebar;
padding-top: 0.5rem;
margin: 0.5rem 0 0.5rem 0.5rem;
src/assets/icons/right-arrow.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0201 6L8.61011 7.41L13.1901 12L8.61011 16.59L10.0201 18L16.0201 12L10.0201 6Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 210 B

src/components/LeftSidebar/Navigation.vue
+17 -4
View File
@@ -53,6 +53,15 @@
</div>
</div>
</router-link>
<hr />
<router-link :to="{ name: 'FolderView' }">
<div class="nav-button" id="folders-button">
<div class="in">
<div class="nav-icon image" id="settings-icon"></div>
<span id="text">Settings</span>
</div>
</div>
</router-link>
</div>
</template>
@@ -65,7 +74,7 @@ export default {
<style>
<style lang="scss">
.side-nav-container .in {
display: flex;
align-items: center;
@@ -89,12 +98,13 @@ export default {
background-color: transparent;
height: 100%;
padding: 10px;
transition: all 0.3s ease-in-out;
}
.collapsed .nav-button span {
font-size: small;
.collapsed .nav-button {
font-size: smaller;
margin-top: 5px;
transition: all .2s ease-in-out;
}
.side-nav-container .nav-button:hover {
@@ -135,6 +145,9 @@ export default {
.side-nav-container #folders-button #folders-icon {
background-image: url(../../assets/icons/folder.svg);
}
.side-nav-container #folders-button #settings-icon {
background-image: url(../../assets/icons/settings.svg);
}
.side-nav-container #folders-button #text {
margin-top: 5px;
src/components/LeftSidebar/PinnedStuff.vue
-2
View File
@@ -6,7 +6,6 @@
>
<div>
<div class="nav-button" id="pinned-button">
<!-- <div class="nav-icon" id="pinned-icon"></div> -->
<span id="text">Quick access</span>
</div>
</div>
@@ -62,7 +61,6 @@ export default {
</script>
<style>
#pinned-container .nav-button {
color: rgba(255, 255, 255, 0.671);
}
src/components/PlaylistView/FeaturedArtists.vue
+105 -25
View File
@@ -1,5 +1,9 @@
<template>
<div class="f-artists">
<div class="xcontrols">
<div class="prev" @click="scrollLeftX"></div>
<div class="next" @click="scrollRightX"></div>
</div>
<div class="artists" ref="artists_dom" v-on:mouseover="say">
<div class="artist c1">
<div class="blur"></div>
@@ -9,7 +13,7 @@
<div class="artist" v-for="artist in artists" :key="artist">
<div>
<div class="artist-image image"></div>
<p class="artist-name">{{ artist }}</p>
<p class="artist-name ellipsis">{{ artist }}</p>
<div class="a-circle"></div>
</div>
</div>
@@ -17,38 +21,62 @@
</div>
</template>
<script>
import { ref } from '@vue/reactivity';
import { ref } from "@vue/reactivity";
export default {
setup() {
const artists = [
"Eminem",
"Drake",
"Kendrick Lamar",
"Eminem",
"Drake",
"Kendrick Lamar",
"Eminem",
"Drake",
"Kendrick Lamar",
"Eminem",
"Drake",
"Kendrick Lamar",
"Eminem",
"Drake",
"Kendrick Lamar",
"Michael John Montgomery",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
];
const artists_dom = ref(null)
const artists_dom = ref(null);
const scrollLeftX = () => {
const dom = artists_dom.value;
dom.scrollBy({
left: -700,
behavior: "smooth",
});
};
const scrollRightX = () => {
const dom = artists_dom.value;
dom.scrollBy({
left: 700,
behavior: "smooth",
});
};
const scroll = (e) => {
artists_dom.value.scrollBy({
left: e.deltaY < 0 ? -700 : 700,
behavior: "smooth",
});
};
const say = () => {
}
artists_dom.value.addEventListener("wheel", (e) => {
e.preventDefault();
scroll(e);
});
};
return {
artists,
artists_dom,
say
say,
scrollLeftX,
scrollRightX,
};
},
};
@@ -57,7 +85,7 @@ export default {
<style lang="scss">
.f-artists {
position: relative;
height: 12em;
height: 14em;
width: calc(100% - 1em);
background-color: #1f1e1d;
padding: $small;
@@ -65,6 +93,52 @@ export default {
user-select: none;
}
.f-artists .xcontrols {
z-index: 1;
width: 5rem;
height: 2rem;
position: absolute;
top: 0.75rem;
right: 0.5rem;
display: flex;
justify-content: space-between;
.next,
.prev {
width: 2em;
height: 2em;
cursor: pointer;
transition: all 0.5s ease;
}
.next {
background: url(../../assets/icons/right-arrow.svg) no-repeat center;
}
.prev {
background: url(../../assets/icons/right-arrow.svg) no-repeat center;
transform: rotate(180deg);
}
.next:hover,
.prev:hover {
transform: scale(1.2);
transition: all 0.5s ease;
}
.prev:hover {
transform: rotate(180deg) scale(1.2);
}
.next:active {
transform: scale(0.5);
}
.prev:active {
transform: rotate(180deg) scale(0.5);
}
}
.f-artists .heading {
color: #fff;
margin: 0 0 1em 1em;
@@ -74,11 +148,11 @@ export default {
position: absolute;
bottom: 1em;
width: calc(100% - 1em);
height: 11em;
height: 13em;
display: flex;
align-items: flex-end;
flex-wrap: nowrap;
overflow-y: scroll;
overflow-x: scroll;
}
.f-artists .artists::-webkit-scrollbar {
@@ -107,9 +181,14 @@ export default {
transition: all 0.5s ease-in-out;
}
.f-artists .artist:active {
transform: translateY(0.9);
}
.f-artists .artist-image {
width: 7em;
height: 7em;
margin-left: 0.5em;
border-radius: 50%;
margin-bottom: $small;
background: url(../../assets/images/girl1.jpg);
@@ -127,7 +206,7 @@ export default {
margin-left: -0.1rem;
}
.f-artists .c1:hover > .s2 {
.c1:hover > .s2 {
background: rgba(53, 53, 146, 0.8);
transition: all 0.5s ease;
width: 12em;
@@ -148,6 +227,7 @@ export default {
margin: 0;
text-align: center;
font-size: small;
width: 10em;
}
.f-artists .blur {
src/components/PlaylistView/Header.vue
+2 -2
View File
@@ -152,7 +152,7 @@
width: 5em;
background-color: $blue;
border-radius: $small;
transition: transform 0.5s;
transition: transform 1s;
}
.p-header .info .albums .first {
@@ -185,7 +185,7 @@
}
.p-header .info .albums .item:hover {
transition: transform 1s;
transition: transform .5s;
transform: scale(1.5);
cursor: pointer;
z-index: 3;