Make buttons buttons instead of links

diff --git a/static/styles.css b/static/styles.css
index 615d344d41ffba2a1ea744bedefc9c3e0eaf1887..0e7a0e2cfc7d21390c14f0d8f4eb862bf37e8b57 100644 (file)
--- 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 04bce6e46e4a375fe4210e468958182cfa1a12db..7262f311ebd177087b63a7c8a0f5aed593feaf7d 100644 (file)
--- 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 c5b46da091462d38c33b70239cb41b06ab20c18c..8251c88becc18031a0c39470fd055f934f0bafda 100644 (file)
--- 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 752aff1727c697f7dec7c6cd4eb6f151caabdc27..ac015e5ffb012222442f4c24a96350d6619d54f7 100644 (file)
--- 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