From 50390e8e05ea17db9fff15fccc10a45700a4ef58 Mon Sep 17 00:00:00 2001
From: Frankie B <git@diskfloppy.me>
Date: Thu, 8 Feb 2024 22:40:36 +0000
Subject: [PATCH] Update music page design

---
 public/css/master.css                 | 19 +++++++++++++++++++
 resources/views/pages/music.blade.php | 12 +++++-------
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/public/css/master.css b/public/css/master.css
index 397009f..4b4fbc3 100644
--- a/public/css/master.css
+++ b/public/css/master.css
@@ -488,3 +488,22 @@ #scheme-selector {
     background-color: var(--background-secondary);
     color: var(--foreground)
 }
+
+
+.music-top10 td {
+    border: none;
+    border-left: 1px dotted var(--foreground);
+    padding: 2px 5px
+}
+
+.music-top10 tr:nth-child(2) td {
+    border-bottom: 1px dotted var(--foreground);
+}
+
+.music-top10 tr:nth-child(3) td {
+    padding-top: 5px;
+}
+
+.music-top10 td:first-child {
+    border: none;
+}
diff --git a/resources/views/pages/music.blade.php b/resources/views/pages/music.blade.php
index 0fbcda2..dba0750 100644
--- a/resources/views/pages/music.blade.php
+++ b/resources/views/pages/music.blade.php
@@ -35,14 +35,12 @@
                 <a href="{{ $current_track->url }}">{{ $current_track->title }} • {{ $current_track->artist }}</a><br>
             </td>
         </tr>
+    </table>
+    <hr>
+    <table class="music-top10">
         <tr>
             <td colspan="4">
-                <hr>
-            </td>
-        </tr>
-        <tr>
-            <td colspan="4">
-                <h2>Top {{ $cfg['toptracks'] }} Tracks (Last 7 days)</h2>
+                <h2 style="margin-bottom: 5px">Top {{ $cfg['toptracks'] }} Tracks (Last 7 days)</h2>
             </td>
         </tr>
         <tr>
@@ -58,7 +56,7 @@
             @endif
             <tr>
                 <td style="text-align: right">{{ $count }}</td>
-                <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;" width="50%">{{ $track->title }}</td>
+                <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;" width="50%"><a href="{{ $track->url }}">{{ $track->title }}</a></td>
                 <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;" width="50%">{{ $track->artist }}</td>
                 <td>{{ $track->playcount }}</td>
             </tr>