From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sun, 12 Jan 2025 16:17:17 +0000 (-0500)
Subject: Song details, song list layout
X-Git-Url: https://littlesong.place/gitweb/gitweb.cgi?a=commitdiff_plain;h=ed0889f022e2f6c0cb63ac5ba7f7db1940d9af0c;p=littlesongplace.git

Song details, song list layout
---

diff --git a/static/styles.css b/static/styles.css
index 5e05ac7..818a1ab 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,20 +1,63 @@
 /* Navbar */
 div.navbar {
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
-    flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
     gap: 10px;
 }
 
 /* Song Entry in Song List */
+div.song-list {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
 div.song {
+    border: 3px solid #000;
+}
+
+div.song-main {
     display: flex;
+    flex-wrap: wrap;
     gap: 10px;
+    align-items: center;
+    margin: 5px;
+}
+
+div.song-info {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    flex-grow: 1;
+}
+
+div.song-buttons {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+div.song-details {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    align-items: left;
+    margin: 5px;
+}
+
+[hidden] {
+    display: none !important;
 }
 
 /* Song Player */
+#scroll-padding {
+    height: 110px;
+}
+
 div.player {
     position: fixed;
     bottom: 0;
diff --git a/templates/base.html b/templates/base.html
index ca055ce..2cb33f1 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -36,6 +36,9 @@
         {% block body %}
         {% endblock %}
 
+        <!-- Padding to prevent player from obscuring content -->
+        <div id="scroll-padding"></div>
+
         <!-- Song Player -->
         <div class="player">
             <div class="player-info">
diff --git a/templates/song-list.html b/templates/song-list.html
index 114d726..728ffc0 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -1,43 +1,80 @@
+<div class="song-list">
 {% for song in songs %}
-<div class="song" data-song="{{ song.json() }}">
-    <!-- Song Title -->
-    <div class="song-title">{{ song.title }}</div>
+    <div class="song" data-song="{{ song.json() }}">
+        <div class="song-main">
+            <div class="song-info">
+                <!-- Song Title -->
+                <div class="song-title">{{ song.title }}</div>
 
-    <!-- Song Artist -->
-    <a href="/users/{{ song.username }}" class="song-username">{{ song.username }}</a>
+                <!-- Separator -->
+                -
 
-    <!-- Owner-Specific Buttons (Edit/Delete) -->
-    {% if session["userid"] == song.userid %}
-    <div class="song-edit-button">
-    <a href="/edit-song?songid={{ song.songid }}">Edit</a>
-    </div>
-    <div class="song-delete-button">
-    <a href="/delete-song/{{ song.userid }}/{{ song.songid }}">Delete</a>
-    </div>
-    {% endif %}
+                <!-- Song Artist -->
+                <a href="/users/{{ song.username }}" class="song-username">{{ song.username }}</a>
 
-    <!-- Play Button -->
-    <a href="#" class="song-play-button">Play</a>
+                <!-- Song Collaborators -->
+                <div class="song-collabs">
+                    {% for collab in song.collaborators %}
+                        {% if collab.startswith("@") %}
+                        <a href="/users/{{ collab[1:] }}" class="collab-link">{{ collab }}</a>
+                        {% else %}
+                        <span class="collab-name">{{ collab }}</span>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+            </div>
+            <div class="song-buttons">
 
-    <!-- Song Description -->
-    <div class="song-description">{{ song.description }}</div>
+                <!-- Details Button -->
+                <a href="#" onclick="showDetails(event)" class="song-details-button">Show Details</a>
 
-    <!-- Song Tags -->
-    <div class="song-tags">
-        {% for tag in song.tags %}
-        <a href="/songs-by-tag/{{ tag }}">{{ tag }}</a>
-        {% endfor %}
-    </div>
+                <!-- Owner-Specific Buttons (Edit/Delete) -->
+                {% if session["userid"] == song.userid %}
+                <div class="song-edit-button">
+                <a href="/edit-song?songid={{ song.songid }}">Edit</a>
+                </div>
+                <div class="song-delete-button">
+                <a href="/delete-song/{{ song.userid }}/{{ song.songid }}">Delete</a>
+                </div>
+                {% endif %}
+
+                <!-- Play Button -->
+                <a href="#" class="song-play-button">Play</a>
+            </div>
+        </div>
 
-    <!-- Song Collaborators -->
-    <div class="song-collabs">
-        {% for collab in song.collaborators %}
-            {% if collab.startswith("@") %}
-            <a href="/users/{{ collab[1:] }}" class="collab-link">{{ collab }}</a>
-            {% else %}
-            <span class="collab-name">{{ collab }}</span>
-            {% endif %}
-        {% endfor %}
+        <div class="song-details" hidden>
+            <!-- Song Description -->
+            <div class="song-description">{{ song.description }}</div>
+
+            <!-- Song Tags -->
+            <div class="song-tags">
+                Tags:
+                {% for tag in song.tags %}
+                <a href="/songs-by-tag/{{ tag }}">{{ tag }}</a>
+                {% endfor %}
+            </div>
+        </div>
     </div>
-</div>
 {% endfor %}
+</div>
+
+<script>
+function showDetails(event) {
+    var songElement = event.target.parentElement.parentElement.parentElement;
+    for (const child of songElement.children) {
+        if (child.classList.contains("song-details")) {
+            if (child.hidden) {
+                // Show details
+                child.hidden = false;
+                event.target.textContent = "Hide Details"
+            }
+            else {
+                // Hide details
+                child.hidden = true;
+                event.target.textContent = "Show Details"
+            }
+        }
+    }
+}
+</script>
diff --git a/todo.txt b/todo.txt
index 2e5cbb1..f775d68 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,8 +1,4 @@
 PRIORITIES??
-- Player: Show song/artist
-- Player: Use session storage to continue song after load
-- Song List: Show/Hide Details
-- Song List: Show details when song plays, hide after
 - Mobile browser support
 - CSS/Design
 - AJAX pages so songs can play without glitching during navigation