mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 04:23:01 +00:00
major refactors
- remove jpgs - add new album header - remove duplicate components - display album bio on client - add a route loader module - change color scheme - other minor changes
This commit is contained in:
geoffrey45
@@ -1,88 +1,71 @@
|
||||
<template>
|
||||
<div class="al-bio rounded">
|
||||
<div class="heading">
|
||||
The Very Best Of UB40: ALBUM BIOGRAPHY
|
||||
<div class="tags">
|
||||
<div class="item" v-for="tag in tags" :key="tag">
|
||||
{{ tag }}
|
||||
</div>
|
||||
</div>
|
||||
</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 class="al-bio rounded border card-dark">
|
||||
<div class="left rounded border">
|
||||
<div class="rect rounded"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="bio rounded border" v-html="bio"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
const tags = ["reggea", "ub40", "ali campbell", "astro"];
|
||||
return {
|
||||
tags,
|
||||
};
|
||||
},
|
||||
props: ['bio'],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.al-bio {
|
||||
background-color: #1f1e1d;
|
||||
padding: $small;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $small;
|
||||
min-height: 15rem;
|
||||
|
||||
.heading {
|
||||
margin: 0 0 0 $small;
|
||||
height: 2rem;
|
||||
.left {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-right: $small;
|
||||
overflow: hidden;
|
||||
background-image: url("../../assets/images/eggs.jpg");
|
||||
background-position: center;
|
||||
|
||||
.tags {
|
||||
.rect {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
font-weight: normal;
|
||||
background-color: rgb(196, 58, 58);
|
||||
box-shadow: 0px 0px 2rem rgb(0, 0, 0);
|
||||
bottom: -10rem;
|
||||
left: 7rem;
|
||||
transform: rotate(45deg) translate(-1rem, -9rem);
|
||||
z-index: 1;
|
||||
transition: all .5s ease-in-out;
|
||||
|
||||
.item {
|
||||
padding: $small;
|
||||
background-color: rgb(15, 74, 114);
|
||||
margin-left: $small;
|
||||
border-radius: $small;
|
||||
}
|
||||
.item::before {
|
||||
content: "#"
|
||||
&:hover {
|
||||
transition: all .5s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
.circle {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: $blue;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-11rem) translateY(7rem);
|
||||
box-shadow: 0px 0px 2rem rgb(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.bio {
|
||||
padding: $small;
|
||||
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;
|
||||
|
||||
&::after {
|
||||
content: "...";
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,241 +0,0 @@
|
||||
<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: 14em;
|
||||
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.5rem;
|
||||
right: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:hover {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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,
|
||||
.prev {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background-color: rgb(79, 80, 80);
|
||||
border-radius: $small;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.next:hover,
|
||||
.prev:hover {
|
||||
background-color: rgb(3, 1, 1);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.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: #064e92;
|
||||
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, #064e92, #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,96 +1,143 @@
|
||||
<template>
|
||||
<div class="a-header rounded">
|
||||
<div
|
||||
class="art rounded"
|
||||
:style="{
|
||||
backgroundImage: `url("${album_info.image}")`,
|
||||
}"
|
||||
></div>
|
||||
<div class="info">
|
||||
<div class="top">
|
||||
<div class="title">{{ album_info.name }}</div>
|
||||
<div class="artist">{{ album_info.artist }}</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="bottom">
|
||||
<div class="stats">
|
||||
{{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
|
||||
<div class="album-h">
|
||||
<div class="a-header rounded card-dark">
|
||||
<div
|
||||
class="art rounded border"
|
||||
:style="{
|
||||
backgroundImage: `url("${album_info.image}")`,
|
||||
}"
|
||||
></div>
|
||||
<div class="info">
|
||||
<div class="top">
|
||||
<div class="title">{{ album_info.name }}</div>
|
||||
<div class="artist">{{ album_info.artist }}</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="bottom">
|
||||
<div class="stats">
|
||||
{{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
|
||||
</div>
|
||||
<button class="play rounded" @click="playAlbum">
|
||||
<div class="icon"></div>
|
||||
<div>Play</div>
|
||||
</button>
|
||||
</div>
|
||||
<button class="play rounded" @click="playAlbum">
|
||||
<div class="icon"></div>
|
||||
<div>Play</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="most-played">
|
||||
<div class="art image rounded"></div>
|
||||
<div>
|
||||
<div class="title">Girl Of My Dreams</div>
|
||||
<div class="artist">Juice Wrld, Suga [BTS]</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="right rounded card-dark">
|
||||
<div class="circle circular"></div>
|
||||
<div class="rect rounded"></div>
|
||||
<div
|
||||
class="avatar image"
|
||||
:style="{
|
||||
backgroundImage: `url("${album_info.artist_image}")`,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import state from "@/composables/state.js"
|
||||
import perks from "@/composables/perks.js"
|
||||
import state from "@/composables/state.js";
|
||||
import perks from "@/composables/perks.js";
|
||||
|
||||
export default {
|
||||
props: ["album_info"],
|
||||
setup() {
|
||||
function playAlbum() {
|
||||
perks.updateQueue(state.album_song_list.value[0], "album")
|
||||
perks.updateQueue(state.album_song_list.value[0], "album");
|
||||
}
|
||||
return {
|
||||
playAlbum
|
||||
}
|
||||
playAlbum,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.album-h {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $small;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.right {
|
||||
padding: $small;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
border-radius: 50%;
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
position: absolute;
|
||||
left: -4.2rem;
|
||||
top: 3rem;
|
||||
box-shadow: 0px 0px 1.5rem rgb(0, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
.rect {
|
||||
width: 20rem;
|
||||
height: 10rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: rgb(196, 58, 58);
|
||||
transform: rotate(-45deg) translate(20%, -50%);
|
||||
z-index: 1;
|
||||
box-shadow: 0px 0px 2rem rgb(0, 0, 0);
|
||||
transition: all .5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transition: all .5s ease-in-out;
|
||||
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: $blue;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-11rem) translateY(7rem);
|
||||
box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.164);
|
||||
transition: all .5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transition: all .5s ease-in-out;
|
||||
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: all .5s ease-in-out;
|
||||
|
||||
.circle {
|
||||
border-radius: 0;
|
||||
transform: translateX(-11rem) translateY(7rem) rotate(360deg);
|
||||
}
|
||||
|
||||
.rect {
|
||||
border-radius: 0;
|
||||
transform: translate(20%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.a-header {
|
||||
position: relative;
|
||||
height: 14rem;
|
||||
background: $card-dark;
|
||||
|
||||
backdrop-filter: blur(40px);
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem 0 1rem;
|
||||
|
||||
.most-played {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0 0 $small;
|
||||
background-color: rgb(24, 24, 24);
|
||||
border-radius: 1rem;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
width: 25rem;
|
||||
height: 5rem;
|
||||
|
||||
.art {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
background-image: url(../../assets/images/jw.jpeg);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: $small;
|
||||
margin-bottom: $small;
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: small;
|
||||
margin-left: $small;
|
||||
}
|
||||
}
|
||||
|
||||
.art {
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
@@ -107,7 +154,7 @@ export default {
|
||||
|
||||
.top {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user