Add site news, visual tweaks

diff --git a/main.py b/main.py
index 3efd180ce9d72adf4f2d9f05a1a18e0efc20623c..2451d3dbc14f0732f3936c49fd1a0a8dbfeaa4dd 100644 (file)
--- a/main.py
+++ b/main.py
@@ -463,6 +463,10 @@ def songs():
             tag=tag,
             song_list=render_template("song-list.html", songs=songs))
 
+@app.get("/site-news")
+def site_news():
+    return render_template("news.html")
+
 def flash_and_log(msg, category=None):
     flash(msg, category)
     username = session["username"] if "username" in session else "N/A"

diff --git a/static/lsp_btn_delete.gif b/static/lsp_btn_delete.gif
index a7b9690d837eaf588a205424ae0f086bd7d54052..fa984916330e1c43106a1cec5ac561fe8058362c 100644 (file)
Binary files a/static/lsp_btn_delete.gif and b/static/lsp_btn_delete.gif differ

diff --git a/static/lsp_btn_edit.gif b/static/lsp_btn_edit.gif
index c3d599fda192f3b6ffc1b696c5a5ccfcbeb20e5a..a332335350429915bdf45651ecd040ee211a3ef1 100644 (file)
Binary files a/static/lsp_btn_edit.gif and b/static/lsp_btn_edit.gif differ

diff --git a/static/lsp_btn_hide.gif b/static/lsp_btn_hide.gif
index 6760fa38f9a956426f2b7c93f033cc85279c287a..e7fe8aeda6df51980be8c1a6d51d0b62c8f2ccad 100644 (file)
Binary files a/static/lsp_btn_hide.gif and b/static/lsp_btn_hide.gif differ

diff --git a/static/lsp_btn_next.gif b/static/lsp_btn_next.gif
index ecff72cc72b91e0edd5e4d6137a88c70a8c80ffd..9f08f48af98d7f0a062cccb7feda36f7cc389ee7 100644 (file)
Binary files a/static/lsp_btn_next.gif and b/static/lsp_btn_next.gif differ

diff --git a/static/lsp_btn_pause.gif b/static/lsp_btn_pause.gif
index 4dce963d9eaa78663a4e412e292c26af6354691d..c71bd8a69c6f89c93aa1ffaa3656ac4a7b00003e 100644 (file)
Binary files a/static/lsp_btn_pause.gif and b/static/lsp_btn_pause.gif differ

diff --git a/static/lsp_btn_play.gif b/static/lsp_btn_play.gif
index 7e5d1de0da0d8f1f1a7707d233acbc44003adcc3..063d8b0e0cb222e99efaa520cec2dbd81020c882 100644 (file)
Binary files a/static/lsp_btn_play.gif and b/static/lsp_btn_play.gif differ

diff --git a/static/lsp_btn_prev.gif b/static/lsp_btn_prev.gif
index 9de19de591eddfb1efc95ba1624e2fd34a0a9ded..ceafb41d3b79d01af56105767e56a29099c79af2 100644 (file)
Binary files a/static/lsp_btn_prev.gif and b/static/lsp_btn_prev.gif differ

diff --git a/static/lsp_btn_show.gif b/static/lsp_btn_show.gif
index 901b52afb0256646322beb5affa6f1db0ac25359..e1082308394c3f551130b69dd4c6e1e9c6764eee 100644 (file)
Binary files a/static/lsp_btn_show.gif and b/static/lsp_btn_show.gif differ

diff --git a/static/styles.css b/static/styles.css
index 1a3cae71da4587bd149df74f7da04b3f7cb4a419..3745edb85bfbb647da0780c1601da8dddbd62787 100644 (file)
--- a/static/styles.css
+++ b/static/styles.css
@@ -4,11 +4,12 @@
     --purple: #9986a6;
     --pink: #bc80af;
     --blue: #8dcbc2;
+    --black: #695c73;
 }
 
 body {
     background: var(--yellow);
-    color: var(--purple);
+    color: var(--black);
     font-family: sans-serif;
     border-color: var(--purple);
     max-width: 700px;
@@ -16,6 +17,10 @@ body {
 }
 
 a {
+    color: var(--black);
+}
+
+h1, h2, h3, h4 {
     color: var(--purple);
 }
 
@@ -53,7 +58,7 @@ input[type=text], input[type=password] {
     font-family: sans-serif;
     font-weight: bold;
     color: var(--yellow);
-    background: var(--pink);
+    background: var(--purple);
     border: 0px;
     border-radius: 5px;
     padding: 8px;
@@ -87,7 +92,7 @@ div.page-header {
 
 .profile-link {
     font-weight: bold;
-    color: var(--pink);
+    /* color: var(--purple); */
 }
 
 .user-list-entry {
@@ -153,12 +158,11 @@ div.song-list {
 div.song {
     box-shadow: 0px 0px 5px 0px;
     border-radius: 10px;
-    padding-left: 10px;
 }
 
 div.song-main {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: 10px;
     align-items: center;
     margin: 5px;
@@ -167,9 +171,22 @@ div.song-main {
 div.song-info {
     display: flex;
     flex-wrap: wrap;
+    flex-direction: row;
     gap: 10px;
-    align-items: center;
+    align-items: flex-start;
     flex-grow: 1;
+    margin: 10px
+}
+
+/* Artist on separate line for mobile */
+@media screen and (max-width: 480px) {
+    div.song-info {
+        flex-direction: column;
+    }
+
+    div.song-info-sep {
+        display: none;
+    }
 }
 
 div.song-buttons {
@@ -266,7 +283,7 @@ a.player-button img {
 #player-position-bar {
     position: absolute;
     display: inline-block;
-    background-color: var(--purple);
+    background-color: var(--black);
     left: 100;
     top: 14px;
     width: 100%;
@@ -277,7 +294,7 @@ a.player-button img {
     position: absolute;
     display: inline-block;
     visibility: hidden;
-    background-color: var(--pink);
+    background-color: var(--purple);
     top: 6px;
     width: 20px;
     height: 20px;

diff --git a/templates/base.html b/templates/base.html
index 6bc47d9f5d7e2d2cc2dd63825e74d7e87e7dfe32..0c718a3adea959f009898162f208257324f4446a 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -18,6 +18,7 @@
             <!-- Navbar -->
             <div class="navbar">
                 <a href="/">Home</a>
+                <a href="/site-news">News</a>
                 {% if "username" in session %}
                     <a href="/users/{{ session["username"] }}">My Profile</a>
                     <a href="/logout">Sign Out</a>

diff --git a/templates/news.html b/templates/news.html
new file mode 100644 (file)
index 0000000..13caf3d
--- /dev/null
+++ b/templates/news.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% block title %}Site News{% endblock %}
+
+{% block body %}
+
+<h1>Site News</h1>
+
+<h2>2025-01-25 - Launch Day!</h2>
+<p>
+A few minor tweaks right out of the gate!
+</p>
+<ul>
+    <li>Added site news!</li>
+    <li>You can now click a song title to get a direct link for the song</li>
+    <li>A much needed visual contrast bump</li>
+    <li>Song lists now look way better on mobile</li>
+</ul>
+
+{% endblock %}
+

diff --git a/templates/song-list.html b/templates/song-list.html
index 4cb9df929477328d245d418f5b146d09e261e309..730efcf9465c155448c980534d8669bca12883e9 100644 (file)
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -7,13 +7,15 @@
                 <div class="song-title"><a href="/song/{{ song.userid }}/{{ song.songid }}?action=view">{{ song.title }}</a></div>
 
                 <!-- Separator -->
-                -
-
+                <div class="song-info-sep">
+                    -
+                </div>
+                
                 <!-- Song Artist -->
-                <a href="/users/{{ song.username }}" class="profile-link">{{ song.username }}</a>
+                <div class="song-artist">
+                    <a href="/users/{{ song.username }}" class="profile-link">{{ song.username }}</a>
 
                 <!-- Song Collaborators -->
-                <div class="song-collabs">
                     {% for collab in song.collaborators %}
                         {% if collab.startswith("@") %}
                         <a href="/users/{{ collab[1:] }}" class="profile-link">{{ collab[1:] }}</a>

diff --git a/test/test_offline.py b/test/test_offline.py
index 728df53a38b4f4a9af4b1e7eae959a02e5578d39..de07c4f7d3d0f80612abdf2eef52434e471567bd 100644 (file)
--- a/test/test_offline.py
+++ b/test/test_offline.py
@@ -511,3 +511,11 @@ def test_single_song(client):
     assert songs[0]["title"] == "song1"
     assert songs[0]["username"] == "user1"
 
+################################################################################
+# Site News
+################################################################################
+
+def test_site_news(client):
+    response = client.get("/site-news")
+    assert response.status_code == 200
+    assert b"Site News" in response.data

diff --git a/todo.txt b/todo.txt
index 84ad53e98f9e3e43495e9dde88937b830f3b938c..473c749a91edcdbf80ed27054fff6d6b91c1a3f4 100644 (file)
--- a/todo.txt
+++ b/todo.txt
@@ -1,10 +1,5 @@
-TODO (BEFORE RELEASE)
-
-- Automated backups
-
-- RELEASE IT
-
-TODO (AFTER RELEASE)
+- Dark mode?
+- Autoplay toggle
 - Comments, notifications
 - Tips and Tricks
 - Multiline descriptions