From: Chris Fulljames <christianfulljames@gmail.com>
Date: Wed, 5 Feb 2025 01:00:09 +0000 (-0500)
Subject: Add pfp to song list
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=f284f3a31fc454aadfbc15d264a50b872f6df637;p=littlesongplace.git

Add pfp to song list
---

diff --git a/static/styles.css b/static/styles.css
index 3cb63a3..daac494 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -169,7 +169,7 @@ input[type=file] {
 .big-pfp-container {
     margin: 0 auto;
     width: 200px;
-    max-width: 80%;
+    max-width: 40%;
     background: var(--purple);
     padding: 5px;
     border-radius: 10px;
@@ -184,6 +184,13 @@ input[type=file] {
     border-radius: 5px;
 }
 
+.small-pfp {
+    max-width: 32px;
+    max-height: 32px;
+    margin: 0px;
+    margin-left: 10px;
+}
+
 .profile-action {
     margin-bottom: 20px;
 }
@@ -220,9 +227,7 @@ div.song {
 div.song-main {
     display: flex;
     flex-wrap: nowrap;
-    gap: 10px;
     align-items: center;
-    margin: 5px;
 }
 
 div.song-info {
@@ -230,15 +235,16 @@ div.song-info {
     flex-wrap: wrap;
     flex-direction: row;
     gap: 10px;
-    align-items: flex-start;
+    align-items: center;
     flex-grow: 1;
-    margin: 10px
+    margin: 10px;
 }
 
 /* Artist on separate line for mobile */
 @media screen and (max-width: 480px) {
     div.song-info {
         flex-direction: column;
+        align-items: flex-start;
     }
 
     div.song-info-sep {
@@ -250,6 +256,7 @@ div.song-buttons {
     display: flex;
     gap: 10px;
     align-items: center;
+    margin: 5px;
 }
 
 .song-list-button {
diff --git a/templates/song-list.html b/templates/song-list.html
index 12867ac..e0b546b 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -2,7 +2,11 @@
 {% for song in songs %}
     <div class="song" data-song="{{ song.json() }}">
         <div class="song-main">
+            <!-- Profile Picture -->
+            <img class="small-pfp" src="/pfp/{{ song.userid }}" onerror="this.style.display = 'none'" />
+
             <div class="song-info">
+
                 <!-- Song Title -->
                 <div class="song-title"><a href="/song/{{ song.userid }}/{{ song.songid }}?action=view">{{ song.title }}</a></div>