From: Chris Fulljames Date: Sun, 22 Jun 2025 21:39:41 +0000 (-0400) Subject: Desktop attempt - kinda works? X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=a2e28ade85d18c50b188e160944d3e483354bfcd;p=littlesongplace.git Desktop attempt - kinda works? --- diff --git a/src/littlesongplace/auth.py b/src/littlesongplace/auth.py index 174a5f2..1962960 100644 --- a/src/littlesongplace/auth.py +++ b/src/littlesongplace/auth.py @@ -4,7 +4,7 @@ from datetime import datetime, timezone import bcrypt from flask import Blueprint, render_template, redirect, flash, g, request, current_app, session -from . import comments, db +from . import comments, db, users from .logutils import flash_and_log bp = Blueprint("auth", __name__) @@ -108,10 +108,14 @@ def requires_login(f): if not "userid" in session: return redirect("/login") - g.userid = session["userid"] - g.username = session["username"] - return f(*args, **kwargs) return _wrapper +@bp.before_app_request +def load_user(): + if "userid" in session: + g.userid = session["userid"] + g.username = session["username"] + g.user = users.by_id(g.userid) + diff --git a/src/littlesongplace/static/nav.js b/src/littlesongplace/static/nav.js index 51421d3..57aed87 100644 --- a/src/littlesongplace/static/nav.js +++ b/src/littlesongplace/static/nav.js @@ -31,10 +31,10 @@ document.addEventListener("DOMContentLoaded", async (e) => { var loggedIn = username ? true : false; document.querySelectorAll(".nav-logged-in").forEach((e) => {e.hidden = !loggedIn;}); document.querySelectorAll(".nav-logged-out").forEach((e) => {e.hidden = loggedIn;}); - if (loggedIn) { - document.getElementById("logged-in-status").innerText = `Signed in as ${username}`; - document.getElementById("my-profile").href = `/users/${username}`; - } + // if (loggedIn) { + // document.getElementById("logged-in-status").innerText = `signed in as ${username}`; + // document.getElementById("my-profile").href = `/users/${username}`; + // } // Add event handler to navbar links to hide menu on mobile document.querySelectorAll("#navbar a, #page-header div a").forEach((link) => { @@ -166,9 +166,9 @@ function updatePageState(data) { data = parser.parseFromString(data, "text/html"); // Update main body content - var newMainDiv = data.getElementById("main"); - var oldMainDiv = document.getElementById("main"); - document.body.replaceChild(newMainDiv, oldMainDiv); + var newOuterDiv = data.getElementById("outer"); + var oldOuterDiv = document.getElementById("outer"); + document.body.replaceChild(newOuterDiv, oldOuterDiv); // Update flashed messages var newFlashes = data.getElementById("flashes-container"); @@ -179,7 +179,7 @@ function updatePageState(data) { document.title = data.title; // Load inline scripts (DOMParser disables these by default) - var scripts = document.getElementById("main").getElementsByTagName("script"); + var scripts = document.getElementById("outer").getElementsByTagName("script"); for (const script of scripts) { var newScript = document.createElement("script"); newScript.type = script.type; diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css index 930362d..c690c46 100644 --- a/src/littlesongplace/static/styles.css +++ b/src/littlesongplace/static/styles.css @@ -42,7 +42,7 @@ body { color: var(--black); font-family: "Unageo", sans-serif; border-color: var(--purple); - max-width: 700px; + max-width: 1200px; margin: auto; } @@ -147,12 +147,64 @@ select { padding: 8px; } -div.main { - max-width: 700px; - margin: auto; +#outer { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 20px; + margin-top: 20px; +} + +#left { + flex-grow: 1; + display: flex; + flex-direction: column; + gap: 20px; +} + +#main { + flex-grow: 2; + display: flex; + flex-direction: column; + gap: 20px; +} + +#right { + flex-grow: 1; + display: flex; + flex-direction: column; + gap: 20px; +} + +.page-section { + border: 1px solid var(--black); + box-shadow: 4px 4px 0px 0px var(--black); + border-radius: var(--radius); padding: 10px; } +.page-section-header { + font-size: 26px; + font-family: "Mat Saleh", sans-serif; + /*border: 2px solid var(--purple);*/ + background: var(--purple); + color: var(--yellow); + border-radius: var(--radius) var(--radius) 0px 0px; + text-align: center; + position: relative; + left: -10px; + top: -10px; + padding: 5px 0px; + width: calc(100% + 20px); +} + +#user-actions { + display: flex; + gap: 10px; + justify-content: space-evenly; + margin: 10px 0px 0px 0px; +} + .flashes { border: 3px solid var(--blue); border-radius: var(--radius); @@ -257,7 +309,6 @@ input[type=range]::-moz-range-thumb { background-color: var(--yellow); margin: 0px; padding: 5px; - box-sizing: border-box; width: 100%; height: 100%; top: 0px; @@ -271,15 +322,27 @@ input[type=range]::-moz-range-thumb { justify-content: center; align-items: center; gap: 10px; - padding-bottom: 10px; + margin: 10px; +} + +#site-title { + padding: 10px 20px; +} + +#site-title a { + font-family: "Mat Saleh", sans-serif; + color: var(--purple); + font-size: 2em; } @media screen and (min-width: 480px) { #page-header { width: auto; - display: block; + display: flex; + align-items: center; + justify-content: space-between; position: static; - margin: 10px; + margin: 10px 0px; box-shadow: 5px 5px 0px 0px var(--black); border: 1px solid var(--black); border-radius: var(--radius); @@ -506,29 +569,15 @@ div.song-main { div.song-info { font-family: "Unageo", sans-serif; display: flex; - flex-wrap: wrap; - flex-direction: row; + flex-direction: column; + align-items: flex-start; row-gap: 0px; - column-gap: 10px; - align-items: center; flex-grow: 1; margin: 5px 0px; min-width: 0; overflow: hidden; } -/* 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 { - display: none; - } -} - .song-title a { text-decoration: none; } @@ -581,7 +630,7 @@ div.comment-button-container { div.player-container { position: fixed; - max-width: 700px; + max-width: 1200px; margin: auto; bottom: 0; left: 0; diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html index 5436c23..958f6ca 100644 --- a/src/littlesongplace/templates/base.html +++ b/src/littlesongplace/templates/base.html @@ -29,32 +29,34 @@ -
- -

little song place

 + + +
{% with messages = get_flashed_messages(with_categories=True) -%} - {% if messages -%} + {% if messages -%}
    {% for category, message in messages %} @@ -66,8 +68,34 @@ {%- endwith %}
- -
{% block body %}{% endblock %}
+
+
+
+
me
+
+ + {% if g.user.has_pfp -%} + + {%- endif %} + {{ g.user.username }} + +
+ +
+ {% block left %}{% endblock %} +
+ + +
{% block body %}{% endblock %}
+ + + +
diff --git a/src/littlesongplace/templates/index.html b/src/littlesongplace/templates/index.html index bd9cc2a..35291f4 100644 --- a/src/littlesongplace/templates/index.html +++ b/src/littlesongplace/templates/index.html @@ -2,37 +2,42 @@ {% block title %}Little Song Place{% endblock %} +{% block left %} +{% if ongoing_events or upcoming_events %} +
+
jams
+ {% from "jam-event-list.html" import jam_event_list %} + {{ jam_event_list("ongoing events", ongoing_events, "ends", "end") }} + {{ jam_event_list("upcoming events", upcoming_events, "starts", "start") }} +
+{% endif %} +{% endblock %} + {% block body %} -

hello!

-
-
🎶
-
Welcome to littlesong.place.
Make music, and share it with friends!
-
🎵
+
+
tunes
+ {% include "song-list.html" %}
-{% if ongoing_events or upcoming_events %} -

happenings

-{% from "jam-event-list.html" import jam_event_list %} -{{ jam_event_list("ongoing events", ongoing_events, "ends", "end") }} -{{ jam_event_list("upcoming events", upcoming_events, "starts", "start") }} -{% endif %} +{% endblock %} -

humans

-
- {% for user in users %} -
- - {% if user['has_pfp'] -%} - - {%- endif %} - {{ user['username'] }} - +{% block right %} + +
+
folks
+
+ {% for user in users %} +
+ + {% if user['has_pfp'] -%} + + {%- endif %} + {{ user['username'] }} + +
+ {% endfor %}
- {% endfor %}
-

hot new tunes

-{% include "song-list.html" %} - {% endblock %} diff --git a/src/littlesongplace/templates/song-macros.html b/src/littlesongplace/templates/song-macros.html index f272529..d8b604c 100644 --- a/src/littlesongplace/templates/song-macros.html +++ b/src/littlesongplace/templates/song-macros.html @@ -23,10 +23,6 @@ {{ song.title }}
- -
-
- - {{ song_artist(song) | indent(4) }}
diff --git a/src/littlesongplace/users.py b/src/littlesongplace/users.py index 857196d..974365f 100644 --- a/src/littlesongplace/users.py +++ b/src/littlesongplace/users.py @@ -10,6 +10,10 @@ class User: bgcolor: str accolor: str + @property + def has_pfp(self): + return user_has_pfp(self.userid) + @property def colors(self): return {