mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-03 20:13:02 +00:00
add albums from the same artist to album view
This commit is contained in:
geoffrey45
@@ -175,3 +175,49 @@ a {
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(163, 163, 163);
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes similarAlbums {
|
||||
0% {
|
||||
background-position: 0% 38%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 63%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 38%;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes similarAlbums {
|
||||
0% {
|
||||
background-position: 0% 38%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 63%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 38%;
|
||||
}
|
||||
}
|
||||
@-o-keyframes similarAlbums {
|
||||
0% {
|
||||
background-position: 0% 38%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 63%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 38%;
|
||||
}
|
||||
}
|
||||
@keyframes similarAlbums {
|
||||
0% {
|
||||
background-position: 0% 38%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 63%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 38%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="al-bio rounded">
|
||||
<div class="heading">ALBUM BIOGRAPHY</div>
|
||||
<div class="separator"></div>
|
||||
<div class="content">
|
||||
Two years after he prematurely left us, the Juice WRLD story continues
|
||||
with Fighting Demons. The rapper’s second posthumous album dropped at
|
||||
midnight, and is the followup to Legends Never Die, which arrived in July
|
||||
2020 and hit No. 1 on the Billboard 200 chart.
|
||||
<br /><br />
|
||||
Featuring the previously-released numbers “Wandered to LA” with Justin
|
||||
Bieber, and “Already Dead,” Fighting Demons is a call to arms, a reminder
|
||||
for addicts to get help and for those struggling with mental health
|
||||
problems to keep up the fight. The rising hip-hop star (real name Jarad
|
||||
Higgins) was just 21 when he died of an accidental overdose of oxycodone
|
||||
and codeine. Following his death on Dec. 9, 2019, his mother, Carmela
|
||||
Wallace, created the Live Free 999 Fund, to help youth struggling with
|
||||
mental health and substance use issues.
|
||||
<br><br>
|
||||
“Jarad was always searingly honest
|
||||
about his struggles and through his musical genius he articulated what was
|
||||
on his heart and mind vividly through his art. He never gave up and his
|
||||
friends and family never gave up on offering their support to him,” she
|
||||
continued. “We encourage all of you who struggle with addiction and mental
|
||||
health to never give up the fight.” Juice’s fast rise in the hip-hop space
|
||||
and untimely passing is the focus of Into the Abyss, a Tommy
|
||||
Oliver-directed documentary set to premiere Dec. 16 at 8PM on HBO Max.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.al-bio {
|
||||
background-color: #1f1e1d;
|
||||
padding: $small;
|
||||
|
||||
.heading {
|
||||
margin: 0 0 0 $small;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
line-height: 1.5rem;
|
||||
font-size: large;
|
||||
columns: 2;
|
||||
column-rule: 1px solid $separator;
|
||||
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="f-a-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>
|
||||
<div class="s2"></div>
|
||||
<p>From The Same Artists</p>
|
||||
</div>
|
||||
<div class="artist" v-for="album in albums" :key="album">
|
||||
<div>
|
||||
<div class="artist-image rounded"></div>
|
||||
<p class="artist-name ellipsis">{{ album }}</p>
|
||||
<div class="a-circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref } from "@vue/reactivity";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const albums = [
|
||||
"Michael John Montgomery",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
];
|
||||
|
||||
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 {
|
||||
albums,
|
||||
artists_dom,
|
||||
say,
|
||||
scrollLeftX,
|
||||
scrollRightX,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.f-a-artists {
|
||||
position: relative;
|
||||
height: 12em;
|
||||
width: calc(100%);
|
||||
background-color: #1f1e1d;
|
||||
padding: $small;
|
||||
border-radius: $small;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.f-a-artists .xcontrols {
|
||||
z-index: 1;
|
||||
width: 5rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
right: 0rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:hover {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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-a-artists .artists {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
width: calc(100% - 1em);
|
||||
height: 13em;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.f-a-artists .artist {
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-left: $smaller;
|
||||
margin-right: $smaller;
|
||||
width: 9em;
|
||||
height: 10em;
|
||||
border-radius: $small;
|
||||
background-color: #210368;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.5s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
.artist-image {
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
margin-left: 0.5em;
|
||||
margin-bottom: $small;
|
||||
background: no-repeat center/cover url(../../assets/images/girl4.jpg);
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
width: 10em;
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-0.5em);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.f-a-artists .c1 {
|
||||
position: relative;
|
||||
background: rgb(145, 42, 56);
|
||||
width: 15em;
|
||||
overflow: hidden;
|
||||
margin-left: -0.1rem;
|
||||
|
||||
background: linear-gradient(239deg, #704bca, #d77422, #140059, #9cb0c3);
|
||||
background-size: 800% 800%;
|
||||
|
||||
-webkit-animation: similarAlbums 29s ease infinite;
|
||||
-moz-animation: similarAlbums 29s ease infinite;
|
||||
-o-animation: similarAlbums 29s ease infinite;
|
||||
animation: similarAlbums 29s ease infinite;
|
||||
|
||||
|
||||
&:hover > .s2 {
|
||||
transition: all 0.5s ease;
|
||||
background: rgba(53, 53, 146, 0.8);
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
}
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
margin-left: 0.5rem;
|
||||
z-index: 1;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.blur {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
-moz-backdrop-filter: blur(40px);
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.s2 {
|
||||
position: absolute;
|
||||
display: n;
|
||||
right: -3em;
|
||||
bottom: -3em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
background: rgba(53, 53, 146, 0.445);
|
||||
border-radius: 50%;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<div class="folder" id="p-table">
|
||||
<div class="table rounded" ref="songtitle">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Track</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th v-if="songTitleWidth > minWidth">Duration</th>
|
||||
</tr>
|
||||
<tr v-for="song in songs" :key="song">
|
||||
<td :style="{ width: songTitleWidth + 'px' }" class="flex">
|
||||
<div class="album-art rounded image"></div>
|
||||
<div>
|
||||
<span class="ellipsis">{{ song.title }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td :style="{ width: songTitleWidth + 'px' }">
|
||||
<span class="artist" v-for="artist in song.artists" :key="artist">{{
|
||||
artist
|
||||
}}</span>
|
||||
</td>
|
||||
<td :style="{ width: songTitleWidth + 'px' }">{{ song.album }}</td>
|
||||
<td
|
||||
:style="{ width: songTitleWidth + 'px' }"
|
||||
v-if="songTitleWidth > minWidth"
|
||||
>
|
||||
{{ song.duration }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "@vue/reactivity";
|
||||
import { onMounted, onUnmounted } from "@vue/runtime-core";
|
||||
import Songs from "../../data/songs.js";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const songtitle = ref(null);
|
||||
const songTitleWidth = ref(null);
|
||||
|
||||
const minWidth = ref(300);
|
||||
|
||||
const songs = Songs.songs;
|
||||
|
||||
const resizeSongTitleWidth = () => {
|
||||
let a = songtitle.value.clientWidth;
|
||||
|
||||
songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
resizeSongTitleWidth();
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
resizeSongTitleWidth();
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", () => {
|
||||
resizeSongTitleWidth();
|
||||
});
|
||||
});
|
||||
|
||||
return { songtitle, songTitleWidth, songs, minWidth };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#p-table {
|
||||
height: calc(100% - 0rem) !important;
|
||||
overflow: hidden;
|
||||
padding-bottom: 0rem;
|
||||
|
||||
table {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
background-color: rgb(58, 57, 57);
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -98,7 +98,7 @@ export default {
|
||||
width: 5rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
top: -.2rem;
|
||||
top: -0.2rem;
|
||||
right: 0rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -193,7 +193,7 @@ export default {
|
||||
width: 10em;
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-.5em);
|
||||
transform: translateY(-0.5em);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
@@ -223,18 +223,18 @@ export default {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.blur {
|
||||
.blur {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
backdrop-filter: blur(100px);
|
||||
-webkit-backdrop-filter: blur(100px);
|
||||
-moz-backdrop-filter: blur(100px);
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
-moz-backdrop-filter: blur(40px);
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.s2 {
|
||||
.s2 {
|
||||
position: absolute;
|
||||
left: -2em;
|
||||
bottom: -4em;
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
const scrollLeftX = (artists_dom) => {
|
||||
const dom = artists_dom.value;
|
||||
dom.scrollBy({
|
||||
left: -700,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
const scrollRightX = (artists_dom) => {
|
||||
const dom = artists_dom.value;
|
||||
dom.scrollBy({
|
||||
left: 700,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
export { scrollLeftX, scrollRightX, };
|
||||
+10
-7
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="al-view">
|
||||
<div class="al-view rounded">
|
||||
<div class="header">
|
||||
<Header />
|
||||
</div>
|
||||
@@ -9,17 +9,26 @@
|
||||
</div>
|
||||
<div class="separator" id="av-sep"></div>
|
||||
<FeaturedArtists />
|
||||
<div class="separator" id="av-sep"></div>
|
||||
<AlbumBio />
|
||||
<div class="separator" id="av-sep"></div>
|
||||
<FromTheSameArtist/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "../components/AlbumView/Header.vue";
|
||||
import AlbumBio from "../components/AlbumView/AlbumBio.vue";
|
||||
import FromTheSameArtist from "../components/AlbumView/FromTheSameArtist.vue";
|
||||
|
||||
import SongList from "../components/PlaylistView/SongList.vue";
|
||||
import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
AlbumBio,
|
||||
FromTheSameArtist,
|
||||
SongList,
|
||||
FeaturedArtists,
|
||||
},
|
||||
@@ -31,12 +40,6 @@ export default {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user