More work on mobile navigation

diff --git a/src/littlesongplace/__init__.py b/src/littlesongplace/__init__.py
index 846b83ef75ffcbd5eae316c46e45d4eee6c87bd7..27f7b7de5704a66e11d05864797c817e6b65a746 100644 (file)
--- a/src/littlesongplace/__init__.py
+++ b/src/littlesongplace/__init__.py
@@ -29,6 +29,7 @@ root_logger.addHandler(handler)
 app = Flask(__name__)
 app.secret_key = os.environ["SECRET_KEY"] if "SECRET_KEY" in os.environ else "dev"
 app.config["MAX_CONTENT_LENGTH"] = 1 * 1024 * 1024 * 1024
+app.config["SESSION_COOKIE_SAMESITE"] = "Strict"
 app.register_blueprint(activity.bp)
 app.register_blueprint(auth.bp)
 app.register_blueprint(comments.bp)
@@ -78,6 +79,16 @@ def index():
 def site_news():
     return render_template("news.html")
 
+@app.get("/folks")
+def folks():
+    all_users = db.query("select * from users order by username asc")
+    all_users = [dict(row) for row in all_users]
+    for user in all_users:
+        user["has_pfp"] = users.user_has_pfp(user["userid"])
+        for key, value in users.get_user_colors(user).items():
+            user[key] = value
+    return render_template("folks.html", users=all_users)
+
 @app.get("/about")
 def about():
     return render_template("about.html")

diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index f6791d951d1654a3c0e46dcf4301584115d93081..de81bfe6cd961ee8c1c2b944a764152782d3ab1e 100644 (file)
--- a/src/littlesongplace/static/styles.css
+++ b/src/littlesongplace/static/styles.css
@@ -152,14 +152,6 @@ div.main {
     padding: 10px;
 }
 
-div.page-header {
-    box-shadow: 5px 5px 0px 0px var(--black);
-    border: 1px solid var(--black);
-    border-radius: var(--radius);
-    margin: 10px;
-    padding: 5px;
-}
-
 .flashes {
     border: 3px solid var(--blue);
     border-radius: var(--radius);
@@ -258,7 +250,21 @@ input[type=range]::-moz-range-thumb {
 }
 
 /* Desktop Navbar */
-div.navbar {
+#page-header {
+    display: none;
+    box-shadow: 5px 5px 0px 0px var(--black);
+    border: 1px solid var(--black);
+    border-radius: var(--radius);
+    margin: 10px;
+    padding: 5px;
+}
+@media screen and (min-width: 480px) {
+    #page-header {
+        display: block;
+    }
+}
+
+#navbar {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
@@ -292,11 +298,25 @@ div.navbar {
     border-radius: var(--radius);
     box-shadow: 3px 3px 0px 0px;
 }
+@media screen and (min-width: 480px) {
+    #mobile-navbar {
+        display: none;
+    }
+}
 
-#mobile-navbar button {
+#mobile-navbar a {
     color: var(--black);
     border: none;
     background: none;
+    width: 56px;
+    text-align: center;
+    font-size: 0.8em;
+    text-decoration: none;
+}
+
+#mobile-nav-pfp {
+    border: 2px solid var(--black);
+    border-radius: var(--radius);
 }
 
 /* Upload/Edit Form */

diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html
index 75a82eed32d46d8079942ebbf9e0dfcea1310fdf..5ad4ff9b8fc5b1b9a7a9eff07ac63a59da257d2a 100644 (file)
--- a/src/littlesongplace/templates/base.html
+++ b/src/littlesongplace/templates/base.html
@@ -21,13 +21,13 @@
         <!-- Embedded image data -->
         {{ gif_data|safe }}
 
-        <div class="page-header">
+        <div id="page-header">
             <div style="text-align: center;">
                 <!--<img class="title-image littlesongplace02">-->
                 <h1>little song place</h1>
             </div>
             <!-- Navbar -->
-            <div class="navbar">
+            <div id="navbar">
                 <a href="/">Home</a>
                 <a href="/jams/1">Jam</a>
                 <a href="/about">About</a>
@@ -68,26 +68,34 @@
 
         <!-- Mobile navigation bar -->
         <div id="mobile-navbar">
-            <button>
-                <object type="image/svg+xml" data="/static/mingcute--music-fill.svg" width="24"></object>
-                <div>songs</div>
-            </button>
-            <button>
-                <object type="image/svg+xml" data="/static/mingcute--happy-fill.svg" width="24"></object>
+            <a href="/songs">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M18.671 3.208A2 2 0 0 1 21 5.18V17a4 4 0 1 1-2-3.465V9.18L9 10.847V18q0 .09-.015.174A3.5 3.5 0 1 1 7 15.337v-8.49a2 2 0 0 1 1.671-1.973zM9 8.82l10-1.667V5.18L9 6.847z"/></g></svg>
+                <div>tunes</div>
+            </a>
+            <a href="/folks">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m1.984 12.25c-.53.468-1.223.75-1.984.75a3 3 0 0 1-1.984-.75a1 1 0 1 0-1.324 1.5A5 5 0 0 0 12 17a4.98 4.98 0 0 0 3.308-1.25a1 1 0 0 0-1.324-1.5M8.5 8c-1.087 0-1.958.68-2.394 1.552a1 1 0 0 0 1.73.997l.058-.101c.162-.324.41-.448.606-.448c.17 0 .382.095.541.336l.065.112a1 1 0 0 0 1.788-.896C10.457 8.68 9.587 8 8.5 8m7 0c-1.087 0-1.957.68-2.394 1.552a1 1 0 0 0 1.73.997l.058-.101c.162-.324.41-.448.606-.448c.17 0 .382.095.541.336l.065.112a1 1 0 1 0 1.788-.896C17.458 8.68 16.587 8 15.5 8"/></g></svg>
                 <div>folks</div>
-            </button>
-            <button>
-                <object type="image/svg+xml" data="/static/mingcute--guitar-fill.svg" width="24"></object>
+            </a>
+            <a href="/jams">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M16.848 2.395a1 1 0 0 1 1.108-.227l.111.056l.866.5a1 1 0 0 1 .488 1.02l-.026.12l-.567 1.983a1 1 0 0 1-1.344.649l-.118-.058l-1.534 2.656c.92.721 1.369 1.493 1.674 2.213c.223.523.414 1.205.306 1.939c-.105.712-.477 1.362-1.14 1.888l-.189.14c-.432.304-.46.56-.358.983l.174.65c.173.69.339 1.7.033 2.857c-.276 1.043-.943 1.865-1.7 2.411c-.745.538-1.666.871-2.538.826c-1.36-.07-2.749-.41-4.594-1.475s-2.834-2.098-3.574-3.24c-.475-.733-.647-1.698-.554-2.612c.094-.928.473-1.917 1.238-2.677c.784-.779 1.66-1.147 2.328-1.352l.315-.091l.272-.07c.524-.134.799-.233.88-.73l.017-.134c.085-.951.478-1.677 1.093-2.165c.58-.46 1.268-.635 1.832-.704c.712-.087 1.521-.092 2.486.243l.267.1l1.534-2.656a1 1 0 0 1-.303-1.462l.084-.1zm-6.78 13.685a1 1 0 0 0-1.099 1.668l.098.064l.866.5a1 1 0 0 0 1.098-1.668l-.098-.064l-.866-.5Zm.633-3.098a1.5 1.5 0 0 0 2.515 1.63l.083-.13a1.5 1.5 0 0 0-2.598-1.5"/></g></svg>
                 <div>jams</div>
-            </button>
-            <button>
-                <object type="image/svg+xml" data="/static/mingcute--notification-fill.svg" width="24"></object>
+            </a>
+            <a href="/activity" class="nav-logged-in">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2a7 7 0 0 0-7 7v3.528a1 1 0 0 1-.105.447l-1.717 3.433A1.1 1.1 0 0 0 4.162 18h15.676a1.1 1.1 0 0 0 .984-1.592l-1.716-3.433a1 1 0 0 1-.106-.447V9a7 7 0 0 0-7-7m0 19a3 3 0 0 1-2.83-2h5.66A3 3 0 0 1 12 21"/></g></svg>
                 <div>activity</div>
-            </button>
-            <button>
-                <img src="/static/lsp_notes.png" width="24"/>
+            </a>
+            <a href="/users/{{ session['username'] }}" class="nav-logged-in">
+                <img id="mobile-nav-pfp" src="/static/lsp_notes.png" width="20" height="20"/>
                 <div>profile</div>
-            </button>
+            </a>
+            <a href="/signup" class="nav-logged-out">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-4v4a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-4H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h4z"/></g></svg>
+                <div>sign up</div>
+            </a>
+            <a href="/login" class="nav-logged-out">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M14.902 19.512C13.831 20.583 12 19.825 12 18.31V16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8V5.69c0-1.515 1.831-2.273 2.902-1.202l6.453 6.451a1.5 1.5 0 0 1 0 2.121z"/></g></svg>
+                <div>sign in</div>
+            </a>
         </div>
 
         <div class="player-container" id="player-container">

diff --git a/src/littlesongplace/templates/folks.html b/src/littlesongplace/templates/folks.html
new file mode 100644 (file)
index 0000000..c3d35e7
--- /dev/null
+++ b/src/littlesongplace/templates/folks.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% block title %}Little Song Place{% endblock %}
+{% block body %}
+
+<h1>folks</h1>
+<div class="user-list">
+    {% for user in users %}
+    <div class="user-list-entry-container">
+        <a href="/users/{{ user['username'] }}" class="user-list-entry" style="--yellow:{{ user['bgcolor'] }};--black:{{ user['fgcolor'] }};--purple:{{ user['accolor'] }};">
+            {% if user['has_pfp'] -%}
+            <img class="small-pfp" src="/pfp/{{ user['userid'] }}" width="32" height="32" />
+            {%- endif %}
+            <span>{{ user['username'] }}</span>
+        </a>
+    </div>
+    {% endfor %}
+</div>
+
+{% endblock %}