mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-07-28 13:41:42 +00:00
move now playing card to left sidebar
- remove title card in featured artists
This commit is contained in:
geoffrey45
parent
f8710a1596
commit
30140cc739
@ -19,9 +19,6 @@
|
||||
<SearchInput />
|
||||
<RightSideBar />
|
||||
<Tabs />
|
||||
<div class="bottom-bar">
|
||||
<BottomBar :collapsed="collapsed" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -8,17 +8,7 @@
|
||||
height: 100%;
|
||||
padding-right: $small;
|
||||
|
||||
.ctrl-btn {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
background-size: 1.5rem !important;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
@include phone-only {
|
||||
grid-template-columns: 1fr 9.2rem;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// colors
|
||||
|
||||
$card-dark: #000000;
|
||||
$body: #0f1218;
|
||||
$separator: #ffffff2f;
|
||||
$highlight-blue: #006eff;
|
||||
$bbb: #161616; //bottom controls background
|
||||
@ -14,7 +14,7 @@ $large: 1.5rem;
|
||||
$larger: 2rem;
|
||||
|
||||
// apple human design guideline colors
|
||||
$black: #000000;
|
||||
$black: #181a1c;
|
||||
$white: #ffffffde;
|
||||
|
||||
$gray: #1c1c1e;
|
||||
@ -24,8 +24,8 @@ $gray3: rgb(72, 72, 74);
|
||||
$gray4: rgb(58, 58, 60);
|
||||
$gray5: rgb(44, 44, 46);
|
||||
|
||||
$red: rgb(255, 69, 58);
|
||||
$blue: #234ece;
|
||||
$red: #fa4f55;
|
||||
$blue: #0960ef;
|
||||
$green: rgb(20, 160, 55);
|
||||
$yellow: rgb(255, 214, 10);
|
||||
$orange: rgb(255, 159, 10);
|
||||
|
||||
@ -11,8 +11,7 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #0f1218;
|
||||
|
||||
background-color: $body;
|
||||
color: #fff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
@ -91,7 +90,7 @@ button {
|
||||
"l-sidebar nav search-input"
|
||||
"l-sidebar content r-sidebar"
|
||||
"l-sidebar content r-sidebar"
|
||||
"l-sidebar bottom-bar tabs";
|
||||
"l-sidebar content tabs";
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
3
src/assets/icons/4dots.svg
Normal file
3
src/assets/icons/4dots.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 10.8945C16.1182 10.8945 17.8496 9.1543 17.8496 7.03613C17.8496 4.92676 16.1182 3.18652 14 3.18652C11.8643 3.18652 10.1328 4.92676 10.1328 7.03613C10.1328 9.1543 11.8643 10.8945 14 10.8945ZM14 9.26855C12.7344 9.26855 11.7588 8.29297 11.7588 7.03613C11.7588 5.78809 12.7344 4.77734 14 4.77734C15.248 4.77734 16.2324 5.78809 16.2324 7.03613C16.2324 8.29297 15.248 9.26855 14 9.26855ZM7.61035 17.5039C9.71973 17.5039 11.46 15.7637 11.46 13.6455C11.46 11.5361 9.71973 9.7959 7.61035 9.7959C5.47461 9.7959 3.74316 11.5361 3.74316 13.6455C3.74316 15.7637 5.47461 17.5039 7.61035 17.5039ZM20.4072 17.5039C22.5166 17.5039 24.2568 15.7637 24.2568 13.6455C24.2568 11.5361 22.5166 9.7959 20.4072 9.7959C18.2715 9.7959 16.54 11.5361 16.54 13.6455C16.54 15.7637 18.2715 17.5039 20.4072 17.5039ZM7.60156 15.8779C6.34473 15.8779 5.36035 14.9023 5.36035 13.6455C5.36035 12.3975 6.34473 11.3867 7.60156 11.3867C8.8584 11.3867 9.84277 12.3975 9.84277 13.6455C9.84277 14.9023 8.8584 15.8779 7.60156 15.8779ZM20.3984 15.8779C19.1416 15.8779 18.1572 14.9023 18.1572 13.6455C18.1572 12.3975 19.1416 11.3867 20.3984 11.3867C21.6553 11.3867 22.6396 12.3975 22.6396 13.6455C22.6396 14.9023 21.6553 15.8779 20.3984 15.8779ZM14 24.1133C16.1182 24.1133 17.8496 22.3643 17.8496 20.2549C17.8496 18.1455 16.1182 16.4053 14 16.4053C11.8643 16.4053 10.1328 18.1455 10.1328 20.2549C10.1328 22.3643 11.8643 24.1133 14 24.1133ZM14 22.4873C12.7344 22.4873 11.7588 21.5117 11.7588 20.2549C11.7588 19.0068 12.7344 17.9961 14 17.9961C15.248 17.9961 16.2324 19.0068 16.2324 20.2549C16.2324 21.5117 15.248 22.4873 14 22.4873Z" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -110,7 +110,7 @@ function playAlbum() {
|
||||
position: relative;
|
||||
|
||||
.stats {
|
||||
background-color: $gray;
|
||||
background-color: $red;
|
||||
padding: $small;
|
||||
border-radius: $small;
|
||||
position: absolute;
|
||||
|
||||
@ -1,13 +1,22 @@
|
||||
<template>
|
||||
<div class="l_ rounded" v-if="!props.collapsed">
|
||||
<div
|
||||
class="l-image image rounded"
|
||||
:style="{
|
||||
backgroundImage: `url("${current.image}")`,
|
||||
}"
|
||||
></div>
|
||||
<div class="headin">Now Playing</div>
|
||||
<div class="menu image rounded"></div>
|
||||
<div class="separator no-border"></div>
|
||||
<SongCard />
|
||||
<div>
|
||||
<div class="art">
|
||||
<div
|
||||
class="l-image image rounded"
|
||||
:style="{
|
||||
backgroundImage: `url("${current.image}")`,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="separator no-border"></div>
|
||||
<SongCard />
|
||||
<Progress />
|
||||
<HotKeys />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -15,6 +24,8 @@
|
||||
import { ref } from "vue";
|
||||
import state from "../../composables/state";
|
||||
import SongCard from "./SongCard.vue";
|
||||
import HotKeys from "../shared/HotKeys.vue";
|
||||
import Progress from "../shared/Progress.vue";
|
||||
|
||||
const current = ref(state.current);
|
||||
const props = defineProps({
|
||||
@ -26,13 +37,52 @@ const props = defineProps({
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.l_ {
|
||||
padding: $small;
|
||||
padding: 1rem;
|
||||
background-color: $primary;
|
||||
margin: $small;
|
||||
text-align: center;
|
||||
width: 14rem;
|
||||
display: grid;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
|
||||
.l-image {
|
||||
height: 13rem;
|
||||
width: 13rem;
|
||||
.headin {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
right: $small;
|
||||
top: $small;
|
||||
position: absolute;
|
||||
background-image: url("../../assets/icons/right-arrow.svg");
|
||||
background-size: 1.5rem;
|
||||
transform: rotate(90deg);
|
||||
|
||||
&:hover {
|
||||
background-color: $gray2;
|
||||
}
|
||||
}
|
||||
|
||||
br {
|
||||
height: 0rem;
|
||||
}
|
||||
|
||||
.art {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
.l-image {
|
||||
height: 12rem;
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.artists {
|
||||
|
||||
@ -1,27 +1,32 @@
|
||||
<template>
|
||||
<div class="f-artists border">
|
||||
<div class="xcontrols">
|
||||
<div class="prev" @click="scrollLeft"></div>
|
||||
<div class="next" @click="scrollRight"></div>
|
||||
</div>
|
||||
<div class="artists" ref="artists_dom">
|
||||
<div class="xartist c1 image">
|
||||
<div class="blur"></div>
|
||||
<div class="s2"></div>
|
||||
<p>Featured Artists</p>
|
||||
<div class="f-artists">
|
||||
<div class="header">
|
||||
<div class="headin">Featured Artists</div>
|
||||
<div class="xcontrols">
|
||||
<div class="prev" @click="scrollLeft"></div>
|
||||
<div class="next" @click="scrollRight"></div>
|
||||
</div>
|
||||
<ArtistCard v-for="artist in artists" :key="artist" :artist="artist" :color="232452" />
|
||||
</div>
|
||||
<div class="separator no-border"></div>
|
||||
<div class="artists" ref="artists_dom">
|
||||
<ArtistCard
|
||||
v-for="artist in artists"
|
||||
:key="artist"
|
||||
:artist="artist"
|
||||
:color="232452"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref } from "@vue/reactivity";
|
||||
import ArtistCard from "@/components/shared/ArtistCard.vue";
|
||||
import { computed, reactive } from "vue";
|
||||
|
||||
export default {
|
||||
props: ["artists"],
|
||||
components: {
|
||||
ArtistCard
|
||||
ArtistCard,
|
||||
},
|
||||
setup() {
|
||||
const artists_dom = ref(null);
|
||||
@ -53,12 +58,26 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.f-artists {
|
||||
position: relative;
|
||||
height: 15em;
|
||||
height: 15.5em;
|
||||
width: calc(100%);
|
||||
padding: $small;
|
||||
border-radius: $small;
|
||||
user-select: none;
|
||||
background: linear-gradient(58deg, $gray 0%, rgba(5, 0, 7, 0.5) 100%);
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
height: 2.5rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.headin {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.f-artists .xcontrols {
|
||||
@ -66,8 +85,8 @@ export default {
|
||||
width: 5rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -100,11 +119,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.f-artists .artists {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
width: calc(100% - 1em);
|
||||
height: 13em;
|
||||
.f-artists > .artists {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
@ -116,30 +131,4 @@ export default {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.f-artists .c1 {
|
||||
position: relative;
|
||||
background-size: 400px 11rem;
|
||||
background-position: 100%;
|
||||
width: 8.25rem;
|
||||
background-image: linear-gradient(
|
||||
320deg,
|
||||
#b63939 13%,
|
||||
#232452 50%,
|
||||
#232452 100%
|
||||
);
|
||||
|
||||
transition: all 0.5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-position: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 1rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 80px rgb(0, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -37,7 +37,7 @@
|
||||
bottom: $small;
|
||||
right: $small;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.699);
|
||||
background-color: $body;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 0.9rem;
|
||||
border-radius: $smaller;
|
||||
@ -70,7 +70,7 @@
|
||||
padding: 1rem 1rem 4rem 1rem;
|
||||
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
|
||||
border-radius: .75rem;
|
||||
background-color: $black;
|
||||
background-color: $body;
|
||||
|
||||
@include phone-only {
|
||||
width: calc(100% - 1rem);
|
||||
|
||||
@ -23,6 +23,7 @@ const tabs = useTabStore();
|
||||
<style lang="scss">
|
||||
.tabs {
|
||||
padding: $small;
|
||||
height: 4rem;
|
||||
|
||||
.cont {
|
||||
background-color: $primary;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<PlayBtn />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="title">beerbongs & bentleys</div>
|
||||
<div class="title">Alice</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center rounded"></div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="nav">
|
||||
<div class="hotkeys">
|
||||
<div class="image ctrl-btn" id="previous" @click="playPrev"></div>
|
||||
<div
|
||||
class="image ctrl-btn play-pause"
|
||||
@ -21,11 +21,26 @@ const isPlaying = playAudio.playing;
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.nav {
|
||||
.hotkeys {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
width: 100%;
|
||||
gap: $small;
|
||||
height: 3rem;
|
||||
align-items: center;
|
||||
place-content: flex-end;
|
||||
|
||||
.ctrl-btn {
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
background-size: 1.5rem !important;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
#previous {
|
||||
background-image: url(../../assets/icons/previous.svg);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user