From afe03dbc51b61ff0f5be665bd2a0e89e6d498682 Mon Sep 17 00:00:00 2001
From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sun, 23 Feb 2025 06:20:19 -0500
Subject: [PATCH] Minor visual tweaks

---
 static/nav.js            |  3 ++-
 static/styles.css        | 22 ++++++++++++++--------
 templates/index.html     | 14 ++++++++------
 templates/song-list.html | 11 ++++++-----
 4 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/static/nav.js b/static/nav.js
index 8771546..78840dd 100644
--- a/static/nav.js
+++ b/static/nav.js
@@ -63,13 +63,14 @@ function urlIsOnSameSite(targetUrl) {
 
 async function handleAjaxResponse(response) {
     if (response.status != 200) {
+        // Got an error; redirect to the error page
         window.location.href = response.url;
     }
     // Update URL in browser window, minus request-type field
     var url = new URL(response.url);
     url.searchParams.delete("request-type");
 
-    // Get page content from XML response
+    // Get page content from response
     var text = await response.text();
     window.history.pushState(text, "", url);
 
diff --git a/static/styles.css b/static/styles.css
index d8e46e0..f9c02d1 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -104,7 +104,6 @@ div.page-header {
 .profile-link {
     font-weight: bold;
     text-decoration: none;
-    /* color: var(--purple); */
 }
 
 .user-list {
@@ -113,21 +112,27 @@ div.page-header {
     gap: 10px;
 }
 
+.user-list-entry-container {
+    border-radius: 10px;
+    box-shadow: 0px 0px 5px 0px;
+}
+
 .user-list-entry {
+    box-sizing: border-box;
+    height: 100%;
     background: var(--yellow);
     border-radius: 10px;
-    box-shadow: 0px 0px 5px 0px;
-    height: 48px;
+    padding: 5px;
 
     display: flex;
     align-items: center;
     text-decoration: none;
+    gap: 5px;
 }
 
 .user-list-entry span {
-    line-height: 32px;
-    padding: 10px;
     font-weight: bold;
+    color: var(--purple);
 }
 
 /* Sliders (e.g. volume) */
@@ -219,10 +224,10 @@ input[type=file] {
 .small-pfp {
     max-width: 32px;
     max-height: 32px;
-    margin: 0px;
-    margin-left: 6px;
     border-radius: 5px;
     border: solid 2px var(--purple);
+    background-color: var(--purple);
+    vertical-align: middle;
 }
 
 .profile-bio {
@@ -317,7 +322,7 @@ div.song-info {
     gap: 10px;
     align-items: center;
     flex-grow: 1;
-    margin: 10px;
+    margin: 5px;
 }
 
 /* Artist on separate line for mobile */
@@ -353,6 +358,7 @@ div.song-buttons {
 .song-list-button img {
     image-rendering: pixelated;
     width: 32px;
+    vertical-align: middle;
 }
 
 div.song-details {
diff --git a/templates/index.html b/templates/index.html
index 6a0875c..987f922 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -21,12 +21,14 @@ better, I'm open to any thoughts or feedback you have!  Just send me
 
 <div class="user-list">
     {% for user in users %}
-    <a href="/users/{{ user['username'] }}" class="user-list-entry" style="--yellow:{{ user['bgcolor'] }};--black:{{ user['fgcolor'] }};--purple:{{ user['accolor'] }};">
-        {% if user['has_pfp'] -%}
-        <img class="small-pfp" src="/pfp/{{ user['userid'] }}" />
-        {%- endif %}
-        <span>{{ user['username'] }}</span>
-    </a>
+    <div class="user-list-entry-container">
+        <a href="/users/{{ user['username'] }}" class="user-list-entry" style="--yellow:{{ user['bgcolor'] }};--black:{{ user['fgcolor'] }};--purple:{{ user['accolor'] }};">
+            {% if user['has_pfp'] -%}
+            <img class="small-pfp" src="/pfp/{{ user['userid'] }}" />
+            {%- endif %}
+            <span>{{ user['username'] }}</span>
+        </a>
+    </div>
     {% endfor %}
 </div>
 
diff --git a/templates/song-list.html b/templates/song-list.html
index 1f53140..cca4929 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -2,12 +2,13 @@
 {% for song in songs %}
     <div class="song" data-song="{{ song.json() }}">
         <div class="song-main">
-            <!-- Profile Picture -->
-            {% if song.user_has_pfp -%}
-            <img class="small-pfp" src="/pfp/{{ song.userid }}" onerror="this.style.display = 'none'" />
-            {%- endif %}
-
             <div class="song-info">
+                {%- 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 %}
 
                 <!-- Song Title -->
                 <div class="song-title"><a href="/song/{{ song.userid }}/{{ song.songid }}?action=view">{{ song.title }}</a></div>
-- 
2.39.5