From: Chris Fulljames <christianfulljames@gmail.com>
Date: Thu, 16 Jan 2025 12:39:40 +0000 (-0500)
Subject: Design work
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=b6c8c749175289094fd588066bdf6172b60452bc;p=littlesongplace.git

Design work
---

diff --git a/main.py b/main.py
index 95efe86..aa2497f 100644
--- a/main.py
+++ b/main.py
@@ -44,8 +44,8 @@ app.logger.addHandler(handler)
 
 @app.route("/")
 def index():
-    username = session.get("username", None)
-    return render_template("index.html")
+    users = [row["username"] for row in query_db("select username from users")]
+    return render_template("index.html", users=users)
 
 @app.get("/signup")
 def signup_get():
@@ -126,11 +126,6 @@ def logout():
 
     return redirect("/")
 
-@app.get("/users")
-def users():
-    users = [row["username"] for row in query_db("select username from users")]
-    return render_template("users.html", users=users)
-
 @app.get("/users/<profile_username>")
 def users_profile(profile_username):
     username = session.get("username", None)
diff --git a/static/player.js b/static/player.js
index 75b639b..b6994af 100644
--- a/static/player.js
+++ b/static/player.js
@@ -18,6 +18,9 @@ function playCurrentSong() {
     console.log(song);
     var songData = JSON.parse(song.dataset.song);
 
+    var player = document.getElementById("player")
+    player.hidden = false;
+
     var audio = document.getElementById("player-audio");
     audio.pause();
     audio.src = `/song/${songData.userid}/${songData.songid}`;
diff --git a/static/styles.css b/static/styles.css
index 3309e4a..a38b719 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -2,18 +2,72 @@
 :root {
     --yellow: #e8e590;
     --purple: #9986a6;
+    --pink: #bc80af;
+    --blue: #8dcbc2;
 }
 
 body {
     background: var(--yellow);
     color: var(--purple);
+    font-family: sans-serif;
+    border-color: var(--purple);
+    max-width: 700px;
+    margin: auto;
+}
+
+a {
+    color: var(--purple);
+}
+
+h2 {
+    font-size: 20px;
+}
+
+textarea {
+    font-family: sans-serif;
+    color: var(--purple);
+    border: 2px solid var(--blue);
+    border-radius: 10px;
+    padding: 10px;
+    background: var(--yellow);
+    height: 100px;
+    width: 100%;
+    box-sizing: border-box;
+    resize: vertical;
+}
+
+.button {
+    font-family: sans-serif;
+    color: var(--yellow);
+    background: var(--pink);
+    border: 0px;
+    border-radius: 5px;
+    padding: 8px;
 }
 
 div.main {
-    max-width: 500px;
+    max-width: 700px;
     margin: auto;
 }
 
+div.page-header {
+    box-shadow: 0px 0px 20px 0px;
+    border-radius: 10px;
+    margin: 10px;
+}
+
+.flashes {
+    border: 3px solid var(--blue);
+    border-radius: 10px;
+    margin-top: 20px;
+}
+
+.title-image {
+    image-rendering: pixelated;
+    width: 512px;
+    margin: 10px;
+}
+
 /* Navbar */
 div.navbar {
     display: flex;
@@ -22,6 +76,25 @@ div.navbar {
     justify-content: center;
     align-items: center;
     gap: 10px;
+    padding: 10px;
+}
+
+/* Profile */
+.profile-name {
+    text-align: center;
+    font-size: 40px;
+}
+
+.profile-action {
+    margin: 10px;
+}
+
+.profile-edit-buttons {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    gap: 10px;
+    margin: 10px;
 }
 
 /* Filters on /songs page */
@@ -37,11 +110,13 @@ div.navbar {
 div.song-list {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 10px;
 }
 
 div.song {
-    border: 3px solid #000;
+    box-shadow: 0px 0px 5px 0px;
+    border-radius: 10px;
+    padding-left: 10px;
 }
 
 div.song-main {
@@ -90,11 +165,16 @@ div.song-details {
 
 div.player {
     position: fixed;
+    max-width: 700px;
+    margin: auto;
+    margin-bottom: 10px;
+    box-shadow: 0px 0px 20px 0px;
+    border-radius: 10px;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100px;
-    border: 3px solid #000;
+    /*border-top: 3px solid;*/
     background: var(--yellow);
 }
 
@@ -137,7 +217,7 @@ a.player-button img {
 #player-position-bar {
     position: absolute;
     display: inline-block;
-    background-color: #ccc;
+    background-color: var(--purple);
     left: 100;
     top: 23px;
     width: 100%;
@@ -148,7 +228,7 @@ a.player-button img {
     position: absolute;
     display: inline-block;
     visibility: hidden;
-    background-color: #555;
+    background-color: var(--pink);
     top: 15px;
     width: 20px;
     height: 20px;
diff --git a/templates/base.html b/templates/base.html
index 0fbfaf9..ac7708b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,28 +7,38 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
-        <!-- Navbar -->
-        <div class="navbar">
-            {% if "username" in session %}
-            <p>Signed in as {{ session["username"] }}</p>
-            <a href="/logout">Sign Out</a>
-            <a href="/users/{{ session["username"] }}">My Profile</a>
-            {% else %}
-            <a href="/login">Sign In</a>
-            <a href="/signup">Create Account</a>
-            {% endif %}
-            <a href="/users">All Users</a>
-            <a href="/">Home</a>
+
+        <div class="page-header">
+            <div style="text-align: center;">
+                <img src="/static/littlesongplace01.gif" class="title-image">
+            </div>
+            <!-- Navbar -->
+            <div class="navbar">
+                <a href="/">Home</a>
+                {% if "username" in session %}
+                    <a href="/users/{{ session["username"] }}">My Profile</a>
+                    <a href="/logout">Sign Out</a>
+                {% else %}
+                    <a href="/signup">Create Account</a>
+                    <a href="/login">Sign In</a>
+                {% endif %}
+
+                {% if "username" in session %}
+                    Signed in as {{ session["username"] }}
+                {% endif %}
+            </div>
         </div>
 
         <!-- Stite Status Messages -->
         {% with messages = get_flashed_messages(with_categories=True) %}
         {% if messages %}
-        <ul class="flashes">
-            {% for category, message in messages %}
-            <li class="flash-msg {{ category }}">{{ message }}</li>
-            {% endfor %}
-        </ul>
+        <div class="flashes">
+            <ul>
+                {% for category, message in messages %}
+                <li class="flash-msg {{ category }}">{{ message }}</li>
+                {% endfor %}
+            </ul>
+        </div>
         {% endif %}
         {% endwith %}
 
@@ -42,7 +52,7 @@
         <div id="scroll-padding"></div>
 
         <!-- Song Player -->
-        <div class="player">
+        <div class="player" id="player" hidden>
             <div class="player-info">
                 <!-- TODO: Show song title, artist -->
                 <span id="player-title">Not Playing</span>
diff --git a/templates/index.html b/templates/index.html
index 006c915..2e802c7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,8 +2,13 @@
 
 {% block body %}
 
-<img src="/static/littlesongplace01.gif" style="image-rendering:pixelated;width:512px">
-
 <p>Hello, and welcome!</p>
 
+<p>Check out the music of the fine folks below!  If you create an account, you'll show up here too. :)</p>
+
+<h2>Lovely Humans:</h2>
+{% for user in users %}
+<a href="/users/{{ user }}">{{ user }}</a><br>
+{% endfor %}
+
 {% endblock %}
diff --git a/templates/profile.html b/templates/profile.html
index f80ca3b..f605ff6 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -12,17 +12,19 @@
 <!-- Bio edit form -->
 {% if session["userid"] == userid %}
 
-<a href="javascript:showEditForm();" id="profile-bio-edit-btn">Edit Bio</a>
+<div class="profile-action">
+    <a href="javascript:showEditForm();" id="profile-bio-edit-btn">Edit Bio</a>
+</div>
 
 <form id="profile-edit-form" action="/update-bio" method="post" hidden>
     <h2> Edit Bio </h2>
     <p>Common HTML tags (&lt;a&gt;, &lt;b&gt;, &lt;i&gt;, &lt;img&gt;, etc.) are allowed.</p>
-    <div class="profile-edit">
+    <div>
         <textarea name="bio" maxlength="10000">{{ bio }}</textarea>
     </div>
-    <div class="profile-edit">
+    <div class="profile-edit-buttons">
         <a href="javascript:hideEditForm();">Cancel</a>
-        <input type="submit" value="Save">
+        <input type="submit" value="Save" class="button">
     </div>
 </form>
 
@@ -46,7 +48,9 @@
 
 <!-- Upload New Song button -->
 {% if session["userid"] == userid %}
-<a href="/edit-song">Upload New Song</a>
+<div class="profile-action">
+    <a href="/edit-song">Upload New Song</a>
+</div>
 {% endif %}
 
 <!-- Song List -->
diff --git a/templates/users.html b/templates/users.html
deleted file mode 100644
index 0e9b644..0000000
--- a/templates/users.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}All Users{% endblock %}
-
-{% block body %}
-
-<h1>All Users</h1>
-{% for user in users %}
-<a href="/users/{{ user }}">{{ user }}</a><br>
-{% endfor %}
-
-{% endblock %}