Minor visual cleanup

diff --git a/static/styles.css b/static/styles.css
index f9c02d140f051d20b8807d4fb3c181bf1c7d216b..c79f8c6b91af3b982c6bc8abc8fe894f319dc156 100644 (file)
--- 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 8a7474416e3c682d954783c400793351bc6dfe12..d31dea2398343e00afa42cfbd787f35ac9bbc7fc 100644 (file)
--- 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 5c435902b7f38322f6f54ad90dbd9788c88611c5..0de945eae0f2d54c316a279806834933e4f017ce 100644 (file)
--- 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 cca49298b8ba243340265be529c9f493c80f4e05..f641ed0e79f7e5e86cfbcffee1561de2f6f6ea3f 100644 (file)
--- 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>