From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sun, 23 Feb 2025 12:07:53 +0000 (-0500)
Subject: Minor visual cleanup
X-Git-Url: https://littlesong.place/gitweb/gitweb.cgi?a=commitdiff_plain;h=fd1f4f73a82f4e1cc2c7b92c98ef3131aa02c3af;p=littlesongplace.git

Minor visual cleanup
---

diff --git a/static/styles.css b/static/styles.css
index f9c02d1..c79f8c6 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -315,6 +315,10 @@ div.song-main {
     align-items: center;
 }
 
+.song-list-pfp-container {
+    margin: 5px;
+}
+
 div.song-info {
     display: flex;
     flex-wrap: wrap;
@@ -322,7 +326,9 @@ div.song-info {
     gap: 10px;
     align-items: center;
     flex-grow: 1;
-    margin: 5px;
+    margin: 5px 0px;
+    min-width: 0;
+    overflow: hidden;
 }
 
 /* Artist on separate line for mobile */
@@ -420,7 +426,7 @@ div.player {
 div.player-info {
     display: flex;
     flex-direction: row;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 10px;
diff --git a/templates/base.html b/templates/base.html
index 8a74744..d31dea2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -68,8 +68,10 @@
                     <img id="player-pfp" class="small-pfp" src="" onerror="this.style.display = 'none'">
                     <a id="player-title">Not Playing</a>
                     <span id="player-info-sep" hidden>-</span>
-                    <a id="player-artist" class="profile-link" hidden></a>
-                    <span id="player-collabs"></span>
+                    <div>
+                        <a id="player-artist" class="profile-link" hidden></a>
+                        <span id="player-collabs"></span>
+                    </div>
                 </div>
                 <div class="player-controls">
                     <button onclick="songPrevious()" class="player-button">
diff --git a/templates/news.html b/templates/news.html
index 5c43590..0de945e 100644
--- a/templates/news.html
+++ b/templates/news.html
@@ -13,8 +13,8 @@ profile! It will continue playing the songs from the original page until you
 click the play button on a new song.
 <ul>
     <li>Persistent audio player</li>
-    <li>Profile links on the home page now use profile colors</li>
-    <li>General visual cleanup for song lists</li>
+    <li>Profile links on the home page now use profile pictures and colors</li>
+    <li>General visual cleanup for song lists and player</li>
     <li>You can now click the song title in the player to go to the song page</li>
 </ul>
 
diff --git a/templates/song-list.html b/templates/song-list.html
index cca4929..f641ed0 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -2,14 +2,14 @@
 {% for song in songs %}
     <div class="song" data-song="{{ song.json() }}">
         <div class="song-main">
-            <div class="song-info">
+            <div class="song-list-pfp-container">
                 {%- if song.user_has_pfp %}
                 <!-- Profile Picture -->
                 <img class="small-pfp" src="/pfp/{{ song.userid }}" onerror="this.style.display = 'none'" />
-                {%- else -%}
-                <div class="spacer"></div>
                 {%- endif %}
+            </div>
 
+            <div class="song-info">
                 <!-- Song Title -->
                 <div class="song-title"><a href="/song/{{ song.userid }}/{{ song.songid }}?action=view">{{ song.title }}</a></div>