From: Chris Fulljames <christianfulljames@gmail.com>
Date: Thu, 30 Jan 2025 01:12:51 +0000 (-0500)
Subject: Make buttons buttons instead of links
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=ea2a6b917e7db3d00342b99ddfee5fde38ae32b2;p=littlesongplace.git

Make buttons buttons instead of links
---

diff --git a/static/styles.css b/static/styles.css
index 615d344..0e7a0e2 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -195,7 +195,14 @@ div.song-buttons {
     align-items: center;
 }
 
-a.song-list-button img {
+.song-list-button {
+    border: none;
+    background: var(--yellow);
+    cursor: pointer;
+    padding: 0px;
+}
+
+.song-list-button img {
     image-rendering: pixelated;
     width: 32px;
 }
@@ -278,11 +285,15 @@ div.player-controls {
     padding: 10px;
 }
 
-a.player-button {
+.player-button {
     display: inline-block;
+    background: var(--yellow);
+    cursor: pointer;
+    padding: 0px;
+    border: none;
 }
 
-a.player-button img {
+.player-button img {
     image-rendering: pixelated;
     width: 32px;
 }
@@ -313,6 +324,7 @@ a.player-button img {
     width: 20px;
     height: 20px;
     border-radius: 50%;
+    cursor: pointer;
 }
 
 /* Activity */
diff --git a/templates/base.html b/templates/base.html
index 04bce6e..7262f31 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -66,15 +66,15 @@
                     <a id="player-artist" class="profile-link" hidden></a>
                 </div>
                 <div class="player-controls">
-                    <a href="javascript:songPrevious()" class="player-button">
+                    <button onclick="songPrevious()" class="player-button">
                         <img src="/static/lsp_btn_prev.gif" alt="Previous">
-                    </a>
-                    <a href="javascript:songPlayPause()" class="player-button">
+                    </button>
+                    <button onclick="songPlayPause()" class="player-button">
                         <img src="/static/lsp_btn_pause.gif" alt="Play" id="play-pause-button">
-                    </a>
-                    <a href="javascript:songNext()" class="player-button">
+                    </button>
+                    <button onclick="songNext()" class="player-button">
                         <img src="/static/lsp_btn_next.gif" alt="Next">
-                    </a>
+                    </button>
                     <div id="player-position">
                         <span id="player-position-bar"></span>
                         <span id="player-position-dot"></span>
diff --git a/templates/song-list.html b/templates/song-list.html
index c5b46da..8251c88 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -38,14 +38,14 @@
                 {% endif %}
 
                 <!-- Details Button -->
-                <a href="#" onclick="return showDetails(event)" class="song-list-button">
+                <button onclick="return showDetails(event)" class="song-list-button">
                     <img src="/static/lsp_btn_show.gif" alt="Show Details">
-                </a>
+                </button>
 
                 <!-- Play Button -->
-                <a href="#" onclick="return play(event)" class="song-list-button">
+                <button onclick="return play(event)" class="song-list-button">
                     <img src="/static/lsp_btn_play.gif" alt="Play">
-                </a>
+                </button>
             </div>
         </div>
 
diff --git a/todo.txt b/todo.txt
index 752aff1..ac015e5 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,6 +1,6 @@
 - Comments:
     - Update DB
-- Fix page scroll when playing song on iOS
+- Fix play button not changing when clicking prev/next while paused
 - YouTube importer
 - Autoplay toggle
 - Volume control