From: Chris Fulljames <christianfulljames@gmail.com>
Date: Mon, 20 Jan 2025 14:59:36 +0000 (-0500)
Subject: Minor UI tweaks and fixes
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=44e29db890adf6bfce76abb90acdbc57f20abbaa;p=littlesongplace.git

Minor UI tweaks and fixes
---

diff --git a/static/player.js b/static/player.js
index b6994af..4bc0899 100644
--- a/static/player.js
+++ b/static/player.js
@@ -42,10 +42,13 @@ function playCurrentSong() {
 // Play or pause the current song in the player
 function songPlayPause() {
     var audio = document.getElementById("player-audio");
+    var button = document.getElementById("play-pause-button");
     if (audio.paused) {
+        button.src = "/static/lsp_btn_pause.gif";
         audio.play();
     }
     else {
+        button.src = "/static/lsp_btn_play.gif";
         audio.pause();
     }
 }
diff --git a/static/styles.css b/static/styles.css
index da7c309..74b3f6e 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -171,7 +171,7 @@ div.song-buttons {
 
 a.song-list-button img {
     image-rendering: pixelated;
-    width: 24px;
+    width: 32px;
 }
 
 div.song-details {
@@ -179,7 +179,14 @@ div.song-details {
     flex-direction: column;
     gap: 5px;
     align-items: left;
-    margin: 5px;
+}
+
+div.song-description {
+    margin: 10px;
+}
+
+div.song-tags {
+    margin: 10px;
 }
 
 [hidden] {
@@ -188,21 +195,23 @@ div.song-details {
 
 /* Song Player */
 #scroll-padding {
-    height: 110px;
+    height: 160px;
 }
 
-div.player {
+div.player-container {
     position: fixed;
     max-width: 700px;
     margin: auto;
-    margin: 10px;
-    padding: 10px;
-    box-shadow: 0px 0px 20px 0px;
-    border-radius: 10px;
     bottom: 0;
     left: 0;
     right: 0;
-    height: 100px;
+}
+
+div.player {
+    margin: 10px;
+    box-shadow: 0px 0px 20px 0px;
+    border-radius: 10px;
+    min-height: 100px;
     /*border-top: 3px solid;*/
     background: var(--yellow);
 }
@@ -215,6 +224,7 @@ div.player-info {
     justify-content: center;
     align-items: center;
     gap: 10px;
+    padding: 10px;
 }
 
 div.player-controls {
@@ -225,6 +235,7 @@ div.player-controls {
     align-items: center;
     gap: 10px;
     height: 50%;
+    padding: 10px;
 }
 
 a.player-button {
@@ -233,14 +244,14 @@ a.player-button {
 
 a.player-button img {
     image-rendering: pixelated;
-    width: 24px;
+    width: 32px;
 }
 
 #player-position {
     display: inline-block;
     position: relative;
     width: 50%;
-    height: 100%;
+    height: 32px;
 }
 
 #player-position-bar {
@@ -248,7 +259,7 @@ a.player-button img {
     display: inline-block;
     background-color: var(--purple);
     left: 100;
-    top: 23px;
+    top: 14px;
     width: 100%;
     height: 4px;
 }
@@ -258,7 +269,7 @@ a.player-button img {
     display: inline-block;
     visibility: hidden;
     background-color: var(--pink);
-    top: 15px;
+    top: 6px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
diff --git a/templates/base.html b/templates/base.html
index 0a99afc..f745f3f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -52,32 +52,33 @@
         <div id="scroll-padding"></div>
 
         <!-- Song Player -->
-        <div class="player" id="player" hidden>
-            <div class="player-info">
-                <!-- TODO: Show song title, artist -->
-                <span id="player-title">Not Playing</span>
-                <span id="player-info-sep" hidden>-</span>
-                <a id="player-artist" hidden></a>
-            </div>
-            <div class="player-controls">
-                <a href="javascript:songPrevious()" class="player-button">
-                    <img src="/static/lsp_btn_prev.gif" alt="Previous">
-                </a>
-                <a href="javascript:songPlayPause()" class="player-button">
-                    <img src="/static/lsp_btn_play.gif" alt="Play">
-                </a>
-                <a href="javascript:songNext()" class="player-button">
-                    <img src="/static/lsp_btn_next.gif" alt="Next">
-                </a>
-                <div id="player-position">
-                    <span id="player-position-bar"></span>
-                    <span id="player-position-dot"></span>
+        <div class="player-container" id="player-container">
+            <div class="player" id="player" hidden>
+                <div class="player-info">
+                    <!-- TODO: Show song title, artist -->
+                    <span id="player-title">Not Playing</span>
+                    <span id="player-info-sep" hidden>-</span>
+                    <a id="player-artist" hidden></a>
+                </div>
+                <div class="player-controls">
+                    <a href="javascript:songPrevious()" class="player-button">
+                        <img src="/static/lsp_btn_prev.gif" alt="Previous">
+                    </a>
+                    <a href="javascript: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">
+                        <img src="/static/lsp_btn_next.gif" alt="Next">
+                    </a>
+                    <div id="player-position">
+                        <span id="player-position-bar"></span>
+                        <span id="player-position-dot"></span>
+                    </div>
+                    <span class="player-time" id="player-current-time">0:00</span>
+                    <span class="player-time-sep">/</span>
+                    <span class="player-time" id="player-total-time">0:00</span>
+                    <audio id="player-audio"></audio>
                 </div>
-                <span class="player-time" id="player-current-time">0:00</span>
-                <span class="player-time-sep">/</span>
-                <span class="player-time" id="player-total-time">0:00</span>
-                <audio id="player-audio"></audio>
-                <!-- TODO: Volume control -->
             </div>
         </div>
     </body>
diff --git a/templates/index.html b/templates/index.html
index 7800dbd..5070de1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -24,14 +24,15 @@ be, or maybe we'll discover we don't need them.  I'm open to any thoughts or
 feedback you might have!  Just send me (cfull) a message on Discord. :)
 </p>
 
+<h2>Profiles</h2>
 <p>Check out the music of the fine folks below!  If you create an account, you'll show up here too.</p>
 
-<h2>Profiles</h2>
 {% for user in users %}
 <a href="/users/{{ user }}">{{ user }}</a><br>
 {% endfor %}
 
 <h2>Recently Uploaded Songs</h2>
+<p>Listen to all the newest tunes!</p>
 {{ song_list|safe }}
 
 {% endblock %}
diff --git a/templates/song-list.html b/templates/song-list.html
index 8e89af1..3eca33c 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -25,11 +25,6 @@
             </div>
             <div class="song-buttons">
 
-                <!-- Details Button -->
-                <a href="#" onclick="return showDetails(event)" class="song-list-button">
-                    <img src="/static/lsp_btn_show.gif" alt="Show Details">
-                </a>
-
                 <!-- Owner-Specific Buttons (Edit/Delete) -->
                 {% if session["userid"] == song.userid %}
                 <a href="/edit-song?songid={{ song.songid }}" class="song-list-button">
@@ -40,6 +35,11 @@
                 </a>
                 {% endif %}
 
+                <!-- Details Button -->
+                <a href="#" onclick="return showDetails(event)" class="song-list-button">
+                    <img src="/static/lsp_btn_show.gif" alt="Show Details">
+                </a>
+
                 <!-- Play Button -->
                 <a href="#" onclick="return play(event)" class="song-list-button">
                     <img src="/static/lsp_btn_play.gif" alt="Play">
@@ -49,7 +49,9 @@
 
         <div class="song-details" hidden>
             <!-- Song Description -->
+            {% if song.description %}
             <div class="song-description">{{ song.description }}</div>
+            {% endif %}
 
             <!-- Song Tags -->
             <div class="song-tags">
@@ -78,12 +80,14 @@ function showDetails(event) {
             if (child.hidden) {
                 // Show details
                 child.hidden = false;
-                event.target.textContent = "Hide Details"
+                event.target.alt = "Hide Details";
+                event.target.src = "/static/lsp_btn_hide.gif";
             }
             else {
                 // Hide details
                 child.hidden = true;
-                event.target.textContent = "Show Details"
+                event.target.alt = "Show Details";
+                event.target.src = "/static/lsp_btn_show.gif";
             }
         }
     }
diff --git a/todo.txt b/todo.txt
index b2f329a..d9b0e8b 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,11 +1,12 @@
 TODO (BEFORE RELEASE)
-- Multiline descriptions
+
 - Automated Tests
-- Tips and Tricks
 
 - RELEASE IT
 
 TODO (AFTER RELEASE)
+- Tips and Tricks
+- Multiline descriptions
 - Shuffle all
 - Homepage activity log
 - Admin accounts