move now playing card to left sidebar

- remove title card in featured artists
This commit is contained in:
geoffrey45
2022-03-18 19:59:33 +03:00
parent f8710a1596
commit 30140cc739
12 changed files with 130 additions and 86 deletions
+61 -11
View File
@@ -1,13 +1,22 @@
<template>
<div class="l_ rounded" v-if="!props.collapsed">
<div
class="l-image image rounded"
:style="{
backgroundImage: `url(&quot;${current.image}&quot;)`,
}"
></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(&quot;${current.image}&quot;)`,
}"
></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 {