From 178d3c883568dbff74e2854657587d963791fe91 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 11 Jun 2022 12:41:44 +0300
Subject: [PATCH] fix now-playing image position

---
 src/components/LeftSidebar/PinnedStuff.vue | 94 ----------------------
 src/components/LeftSidebar/nowPlaying.vue  |  8 +-
 2 files changed, 4 insertions(+), 98 deletions(-)
 delete mode 100644 src/components/LeftSidebar/PinnedStuff.vue

diff --git a/src/components/LeftSidebar/PinnedStuff.vue b/src/components/LeftSidebar/PinnedStuff.vue
deleted file mode 100644
index f1a13996..00000000
--- a/src/components/LeftSidebar/PinnedStuff.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div class="side-nav-container rounded hidden" id="pinned-container">
-    <div>
-      <div class="nav-button" id="pinned-button">
-        <span id="text">Quick access</span>
-      </div>
-    </div>
-    <router-link :to="{ name: 'Home' }">
-      <div class="nav-button" id="album-button">
-        <div class="nav-icon image" id="album-icon"></div>
-        <span id="text">Legends Never Die</span>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'Home' }">
-      <div class="nav-button" id="album-button">
-        <div class="nav-icon image" id="album-icon"></div>
-        <span id="text">The Party Never Ends</span>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'Home' }">
-      <div class="nav-button" id="artists-button">
-        <div class="nav-icon image" id="artists-icon"></div>
-        <span id="text">Juice WRLD</span>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'Home' }">
-      <div class="nav-button" id="playlists-button">
-        <div class="nav-icon image" id="playlists-icon"></div>
-        <span id="text" class="ellip">Juice WRLD Discography</span>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'Home' }">
-      <div class="nav-button" id="mixes-button">
-        <div class="nav-icon image" id="mixes-icon"></div>
-        <span id="text">Lil Peep Radio</span>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'Home' }">
-      <div class="nav-button" id="folders-button">
-        <div class="nav-icon image" id="folders-icon"></div>
-        <span id="text">Ngogoyo ya Kamarú</span>
-      </div>
-    </router-link>
-  </div>
-</template>
-
-<style lang="scss">
-#pinned-container {
-  background: #6e2c00;
-
-  border-top: none;
-  margin: $small;
-  padding: $small;
-
-  #text {
-    font-size: 0.9rem;
-  }
-
-  .nav-icon {
-    margin: 0 $small 0 0;
-  }
-}
-
-#pinned-container .nav-button {
-  border-radius: $small;
-  color: rgba(255, 255, 255, 0.671);
-  padding-left: $small;
-}
-
-#pinned-container .nav-button:hover {
-  background-color: rgb(5, 80, 150);
-}
-
-#pinned-container .nav-button .nav-icon {
-  height: 1.3rem;
-  width: 1.3rem;
-}
-
-#pinned-container #pinned-button #text {
-  text-transform: uppercase;
-  font-weight: 1000;
-  font-size: small;
-  font-style: italic;
-}
-
-#pinned-container #pinned-button:hover {
-  background-color: transparent;
-}
-</style>
diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue
index 87ca0244..995399fc 100644
--- a/src/components/LeftSidebar/nowPlaying.vue
+++ b/src/components/LeftSidebar/nowPlaying.vue
@@ -78,13 +78,13 @@ const queue = useQStore();
 
   .art {
     width: 100%;
-    display: grid;
+    aspect-ratio: 1;
     place-items: center;
     margin-bottom: $small;
 
     .l-image {
-      height: 12rem;
-      width: 12rem;
+      height: 100%;
+      width: 100%;
     }
   }
 
@@ -93,7 +93,7 @@ const queue = useQStore();
     font-size: 0.75rem;
     width: max-content;
     padding: 0.2rem 0.35rem;
-    top: 13.25rem;
+    top: 14.25rem;
     left: 1.5rem;
     background-color: $black;
     border-radius: $smaller;