add media queries

src/components/FolderView/Header.vue

@@ -112,6 +112,10 @@ export default {
       background-image: url(../../assets/icons/folder.svg);
       margin-right: $small;
     }
+    
+    @include phone-only {
+      display: none;
+    }
   }
 }
 </style>

src/components/FolderView/SongList.vue

@@ -4,10 +4,10 @@
       <table>
         <thead>
           <tr>
-            <th>Track</th>
-            <th>Artist</th>
-            <th>Album</th>
-            <th>Duration</th>
+            <th class="track-header">Track</th>
+            <th class="artists-header">Artist</th>
+            <th class="album-header">Album</th>
+            <th class="duration-header">Duration</th>
           </tr>
         </thead>
         <tbody>
@@ -121,56 +121,33 @@ export default {
   width: 100%;
   table-layout: fixed;
 
+  @include phone-only {
+    border-collapse: separate;
+    border-spacing: 0 $small;
+  }
+
   thead {
     height: 2rem;
     text-transform: uppercase;
 
+    @include phone-only {
+      display: none;
+    }
+
     th {
       text-align: left;
       padding-left: $small;
     }
-  }
 
-
-  tbody tr {
-    cursor: pointer;
-
-    .flex {
-      position: relative;
-      padding-left: 4rem;
-      align-items: center;
-
-      .album-art {
-        position: absolute;
-        left: $small;
-        width: 3rem;
-        height: 3rem;
-        margin-right: 1rem;
-        background-image: url(../../assets/images/null.webp);
-        display: grid;
-        place-items: center;
+    th.duration-header {
+      @include tablet-landscape {
+        display: none;
       }
     }
 
-    td {
-      height: 4rem;
-      padding: $small;
-
-    }
-
-    &:hover {
-      & {
-        & > td {
-          background-color: rgb(5, 80, 150);
-        }
-
-        & td:first-child {
-          border-radius: $small 0 0 $small;
-        }
-
-        & td:last-child {
-          border-radius: 0 $small $small 0;
-        }
+    th.album-header {
+      @include tablet-portrait {
+        display: none;
       }
     }
   }

src/components/PlaylistView/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-header rounded border">
+  <div class="p-header rounded">
     <div class="info rounded card-dark">
       <div>
         <div class="name">Makaveli Radio</div>
@@ -16,7 +16,7 @@
       </div>
     </div>
     <div class="last-updated">
-      Last updated yesterday |
+      <span class="status">Last updated yesterday |&#160;</span>
       <span class="edit">Edit</span>
     </div>
   </div>
@@ -39,6 +39,18 @@
     color: rgb(255, 255, 255);
     font-size: 0.9rem;
     border-radius: $smaller;
+    box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.479);
+
+    @include phone-only {
+      // border: solid;
+      bottom: 1rem;
+      right: 1rem;
+      font-size: small;
+
+      .status {
+        display: none;
+      }
+    }
 
     .edit {
       cursor: pointer;
@@ -54,8 +66,13 @@
     padding: $small;
     display: flex;
     flex-direction: row;
-    align-items: end;
+    align-items: flex-end;
     padding-bottom: 3.5rem;
+    box-shadow: 0px 0px 1.5rem rgba(0, 0, 0, 0.658);
+
+    @include phone-only {
+      width: calc(100% - 1rem);
+    }
 
     .name {
       font-size: 1.5rem;

src/components/SongItem.vue

@@ -1,9 +1,9 @@
 <template>
-  <tr :class="{ current: current._id.$oid == song._id.$oid }">
-    <td
-      class="flex"
-      @click="emitUpdate(song)"
-    >
+  <tr
+    class="songlist-item"
+    :class="{ current: current._id.$oid == song._id.$oid }"
+  >
+    <td class="flex" @click="emitUpdate(song)">
       <div
         class="album-art rounded image"
         :style="{
@@ -18,9 +18,15 @@
       </div>
       <div>
         <span class="ellip">{{ song.title }}</span>
+        <div class="separator no-border"></div>
+        <div class="artist ellip">
+          <span v-for="artist in putCommas(song.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </div>
       </div>
     </td>
-    <td>
+    <td class="song-artists">
       <div class="ellip" v-if="song.artists[0] != ''">
         <span
           class="artist"
@@ -33,15 +39,12 @@
         <span class="artist">{{ song.album_artist }}</span>
       </div>
     </td>
-    <td>
-      <div
-        class="ellip"
-       @click="emitLoadAlbum(song.album, song.album_artist)"
-        >{{ song.album }}</div
-      >
+    <td class="song-album">
+      <div class="ellip" @click="emitLoadAlbum(song.album, song.album_artist)">
+        {{ song.album }}
+      </div>
     </td>
-    <td
-    >
+    <td class="song-duration">
       {{ `${Math.trunc(song.length / 60)} min` }}
     </td>
   </tr>
@@ -58,8 +61,8 @@ export default {
       emit("updateQueue", song);
     }
 
-    function emitLoadAlbum(title, artist){
-      emit("loadAlbum", title, artist)
+    function emitLoadAlbum(title, artist) {
+      emit("loadAlbum", title, artist);
     }
 
     return {
@@ -67,11 +70,109 @@ export default {
       emitUpdate,
       emitLoadAlbum,
       is_playing: state.is_playing,
-      current: state.current
+      current: state.current,
     };
   },
 };
 </script>
 
-<style>
+<style lang="scss">
+.songlist-item {
+  @include phone-only {
+    border: solid;
+
+    td {
+      background-color: $card-dark;
+      border: 1px solid rgba(255, 255, 255, 0.096);
+      border-radius: $small;
+    }
+  }
+
+  cursor: pointer;
+
+  .flex {
+    position: relative;
+    padding-left: 4rem;
+    align-items: center;
+
+    .album-art {
+      position: absolute;
+      left: $small;
+      width: 3rem;
+      height: 3rem;
+      margin-right: 1rem;
+      display: grid;
+      place-items: center;
+    }
+
+    .artist {
+      display: none;
+      font-size: 0.8rem;
+      color: rgba(255, 255, 255, 0.719);
+
+      @include phone-only {
+        display: unset;
+      }
+    }
+  }
+
+  td {
+    height: 4rem;
+    padding: $small;
+  }
+
+  &:hover {
+    & {
+      & td {
+        background-color: rgb(5, 80, 150);
+      }
+
+      & td:first-child {
+        border-radius: $small 0 0 $small;
+
+        @include phone-only {
+          border-radius: $small;
+        }
+      }
+
+      td:nth-child(2) {
+        @include tablet-portrait {
+          border-radius: 0 $small $small 0 !important;
+        }
+
+        @include tablet-landscape {
+          border-radius: 0;
+        }
+      }
+
+      & > td:nth-child(3) {
+        @include tablet-landscape {
+          border-radius: 0 $small $small 0 !important;
+        }
+      }
+
+      & td:last-child {
+        border-radius: 0 $small $small 0;
+      }
+    }
+  }
+
+  .song-duration {
+    @include tablet-landscape {
+      display: none;
+    }
+  }
+
+  .song-album {
+    @include tablet-portrait {
+      display: none;
+    }
+  }
+
+  .song-artists {
+    @include phone-only {
+      display: none;
+    }
+  }
+}
 </style>