From 42be78ffbf5a1b2dbc98e77a55e03b1ffcaa69a3 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 8 Dec 2021 11:54:09 +0300
Subject: [PATCH] animate album cards on hover in playlist view

---
 src/App.vue                            | 42 +++++++++++---------------
 src/assets/css/_variables.scss         |  2 +-
 src/components/PlaylistView/Header.vue | 20 +++++++++---
 3 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3f29859..c5a01c0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -93,11 +93,18 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+#logo-container {
+  position: relative;
+  height: 3.6rem;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
 .logo {
   height: 2rem;
   width: 9rem;
-  margin-left: 2.25rem;
+  margin-left: 4rem;
   background: url(./assets/logo.svg);
   background-size: contain;
   background-repeat: no-repeat;
@@ -116,39 +123,31 @@ export default {
   flex-direction: column;
 }
 
-#logo-container {
-  height: 3.6rem;
-  margin-left: 1rem;
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
 .l-sidebar {
   position: relative;
 }
 
 .l-container #toggle {
-  position: fixed;
-  top: 1rem;
-  width: 1.75rem;
-  height: 3.75rem;
+  position: absolute;
+  left: 0.2rem;
+  width: 4rem;
+  height: 100%;
   background: url(./assets/icons/menu.svg);
-  background-size: contain;
+  background-size: 50%;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
-  margin-left: 0.25rem;
 }
 
 .l-container #settings-button {
   position: absolute;
   bottom: 0;
   display: flex;
-  color: #fff;
   height: 50px;
   width: 100%;
-  border-top: 1px solid var(--seperator);
+  cursor: pointer;
+  border-radius: 0 0 $small $small;
+  border-top: solid .1rem $seperator
 }
 
 #settings-button .in {
@@ -157,13 +156,8 @@ export default {
   justify-content: center;
 }
 
-.l-container #settings-button:hover {
-  background: #17c93d7c;
-  cursor: pointer;
-}
-
 .l-container #settings-button #settings-icon {
-  margin-left: 1rem;
+  margin-left: 1.5rem;
   margin-right: 0.25rem;
   width: 1.5rem;
   height: 1.5rem;
diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
index e30a472..292cd13 100644
--- a/src/assets/css/_variables.scss
+++ b/src/assets/css/_variables.scss
@@ -4,7 +4,7 @@ $card-dark: #131313b2;
 $red: #df4646;
 $blue: #00a8ff;
 $green: rgb(67, 148, 67);
-
+$seperator: #ffffff46;
 // sizes
 $small: .5em;
 
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 90cbe96..bdc676b 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -3,7 +3,8 @@
     <div class="info rounded">
       <p class="name">Because I Got High Radio</p>
       <p class="text">
-        The best music to fade to while doing my thing. Featuring artists like Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
+        The best music to fade to while doing my thing. Featuring artists like
+        Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
       </p>
       <div class="lower">
         <div class="statistics">
@@ -52,7 +53,7 @@
   overflow: hidden;
   font-size: 2rem;
   font-weight: bold;
-  margin: 0.2em 0 .5em 0;
+  margin: 0.2em 0 0.5em 0;
 }
 
 .p-header .info .text {
@@ -123,7 +124,7 @@
   grid-gap: 0.5rem;
   // border: solid;
   position: absolute;
-  bottom: -.5em;
+  bottom: -0.5em;
   right: -1em;
 }
 
@@ -132,12 +133,14 @@
   width: 5em;
   background-color: $blue;
   border-radius: $small;
+  transition: transform 0.5s;
+  transform: scale(1.1);
 }
 
 .p-header .info .albums .first {
   position: absolute;
   transform: rotate(-30deg);
-  right: .5em;
+  right: 0.5em;
   bottom: 0em;
   background-color: $red;
   background-image: url(../../assets/images/girl2.jpg);
@@ -149,7 +152,7 @@
   right: 4em;
   bottom: -1em !important;
   background-color: $green;
-  background-image: url(../../assets/images/tk.jpg);
+  background-image: url(../../assets/images/girl1.jpg);
   z-index: 1;
 }
 
@@ -162,4 +165,11 @@
   background-image: url(../../assets/images/girl3.jpg);
   z-index: 2;
 }
+
+.p-header .info .albums .item:hover {
+  transition: transform 1s;
+  transform: scale(1.5);
+  cursor: pointer;
+  z-index: 3;
+}
 </style>