From 188b0541c689dda50be0289616d5ed2727182bad Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 22 Jan 2022 05:03:18 +0300
Subject: [PATCH] add media queries to album page

---
 src/components/AlbumView/AlbumBio.vue | 18 ++++++++++++++++++
 src/components/AlbumView/Header.vue   | 25 ++++++++++++++++---------
 src/components/SongItem.vue           |  3 +--
 src/views/PlaylistView.vue            |  2 +-
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/AlbumView/AlbumBio.vue b/src/components/AlbumView/AlbumBio.vue
index f87017a7..b4e5ca50 100644
--- a/src/components/AlbumView/AlbumBio.vue
+++ b/src/components/AlbumView/AlbumBio.vue
@@ -19,6 +19,15 @@ export default {
   padding: $small;
   display: grid;
   grid-template-columns: 1fr 1fr;
+
+  @include tablet-portrait {
+    grid-template-columns: 1fr;
+  }
+
+  @include tablet-landscape {
+    grid-template-columns: 1fr auto;
+  }
+
   gap: $small;
   min-height: 15rem;
 
@@ -31,6 +40,15 @@ export default {
     background-image: url("../../assets/images/eggs.jpg");
     background-position: center;
 
+    @include tablet-portrait {
+      display: none;
+    }
+
+    @include tablet-landscape {
+      width: 10rem;
+    }
+
+
     .rect {
       width: 10rem;
       height: 10rem;
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index b60daf88..16bbf6a1 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -58,12 +58,21 @@ export default {
 .album-h {
   display: grid;
   grid-template-columns: 1fr 1fr;
+
+  @include tablet-landscape {
+    grid-template-columns: 1fr;
+  }
+
   gap: $small;
   position: relative;
   overflow: hidden;
   height: 15rem;
 
   .right {
+    @include tablet-landscape {
+      display: none;
+    }
+
     padding: $small;
     position: relative;
 
@@ -76,7 +85,6 @@ export default {
       left: -4.2rem;
       top: 3rem;
       box-shadow: 0px 0px 1.5rem rgb(0, 0, 0);
-
     }
 
     .rect {
@@ -88,14 +96,13 @@ export default {
       transform: rotate(-45deg) translate(20%, -50%);
       z-index: 1;
       box-shadow: 0px 0px 2rem rgb(0, 0, 0);
-      transition: all .5s ease-in-out;
+      transition: all 0.5s ease-in-out;
 
       &:hover {
-        transition: all .5s ease-in-out;
+        transition: all 0.5s ease-in-out;
 
         right: 2rem;
       }
-
     }
 
     .circle {
@@ -107,17 +114,17 @@ export default {
       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;
+      transition: all 0.5s ease-in-out;
 
       &:hover {
-        transition: all .5s ease-in-out;
+        transition: all 0.5s ease-in-out;
 
         right: 1rem;
       }
     }
 
     &:hover {
-      transition: all .5s ease-in-out;
+      transition: all 0.5s ease-in-out;
 
       .circle {
         border-radius: 0;
@@ -139,8 +146,8 @@ export default {
   padding: 0 1rem 0 1rem;
 
   .art {
-    width: 12rem;
-    height: 12rem;
+    width: 14rem;
+    height: 13rem;
     background: no-repeat center/cover;
     margin-right: 1rem;
   }
diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue
index b6637d35..02985896 100644
--- a/src/components/SongItem.vue
+++ b/src/components/SongItem.vue
@@ -82,8 +82,7 @@ export default {
     border: solid;
 
     td {
-      background-color: $card-dark;
-      border: 1px solid rgba(255, 255, 255, 0.096);
+      background-color: #14161a;
       border-radius: $small;
     }
   }
diff --git a/src/views/PlaylistView.vue b/src/views/PlaylistView.vue
index 8a7ff93c..a2f8a365 100644
--- a/src/views/PlaylistView.vue
+++ b/src/views/PlaylistView.vue
@@ -24,7 +24,7 @@ export default {
   },
   setup() {
     return {
-      songs: state.folder_song_list,
+      songs: state.queue,
       playlist_info: {
         name: "Dax Radio",
         count: state.folder_song_list.value.length,