From 52afacdcf86ef585828266b2f85b7502d835f02a Mon Sep 17 00:00:00 2001
From: roxwize <rae@roxwize.xyz>
Date: Sat, 1 Feb 2025 13:27:26 -0500
Subject: [PATCH] mobile friendliness

Signed-off-by: roxwize <rae@roxwize.xyz>
---
 routes/updates.ts   |  2 +-
 static/css/main.css | 54 +++++++++++++++++++++++++++++++++++++++++++++
 views/confirm.pug   |  2 +-
 views/dashboard.pug |  4 +---
 views/index.pug     |  4 ----
 views/journal.pug   |  2 +-
 6 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/routes/updates.ts b/routes/updates.ts
index c053b31..1d6bfba 100644
--- a/routes/updates.ts
+++ b/routes/updates.ts
@@ -133,7 +133,7 @@ export default async function (app: Express, db: NodePgDatabase) {
             feed: []
         });
     });
-    app.post("/mood/update", async (req, res) => {
+    app.post("/update/mood", async (req, res) => {
         if (!req.session["loggedIn"]) {
             res.redirect("/login");
             return;
diff --git a/static/css/main.css b/static/css/main.css
index ac85e11..0268927 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -36,6 +36,7 @@ h3 {
 header {
     display: flex;
     flex-direction: row;
+    align-items: center;
     justify-content: space-between;
     background-color: #e0d665;
     background-image: linear-gradient(to bottom, #f6ef98, #c7c07d);
@@ -51,7 +52,9 @@ header {
 
 header nav {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
+    justify-content: center;
     gap: 2em;
 }
 
@@ -108,6 +111,10 @@ summary {
     overflow-y: auto;
 }
 
+#page div:nth-child(2) {
+    margin-left: 256px;
+}
+
 #sidebar {
     position: sticky;
     top: 0;
@@ -236,6 +243,10 @@ tr:hover td {
     text-decoration: underline;
 }
 
+#journal-update input#title {
+    width: 66ch;
+}
+
 @font-face {
     font-family: "Gohufont 14";
     src: url("/fonts/gohufont-14.ttf") format("truetype"),
@@ -255,8 +266,51 @@ tr:hover td {
     }
 }
 @media screen and (max-width: 900px) {
+    main {
+        width: 100%;
+        height: 100%;
+    }
+    header {
+        flex-direction: column;
+    }
+    header nav {
+        margin-top: 1em;
+        gap: 8px 16px;
+    }
+    #ticker {
+        display: flex;
+        flex-direction: column;
+        height: auto;
+    }
+    #ticker > div, #ticker #ticker-marquee {
+        width: 100%;
+        height: 1.5em;
+    }
+    #sidebar {
+        position: relative;
+        float: none;
+        border-right: 0;
+        border-bottom: 1px solid #afa870;
+        width: 100%;
+        height: fit-content;
+    }
+    #page {
+        height: auto;
+        /* Define bodge */
+        background-color: #faf8da;
+    }
+    #page div:nth-child(2) {
+        margin-left: 0;
+    }
     .feed-update {
         border-bottom: 1px solid #afa870;
         padding: 8px;
     }
+    .input {
+        flex-direction: column;
+    }
+    .input input[type=text], .input textarea, #journal-update input#title, #dashboard-update-form * {
+        /* i hate !important please get it out of here PLEASE */
+        width: 100%!important;
+    }
 }
diff --git a/views/confirm.pug b/views/confirm.pug
index 3ed4823..ea64b00 100644
--- a/views/confirm.pug
+++ b/views/confirm.pug
@@ -5,5 +5,5 @@ block content
         for [k, v] of Object.entries(body)
             input(type="text", name=k, value=v, hidden)
         p Sure you want to do this??
-        button(name="confirm", value="y") Yes
         button(name="confirm", value="n") NO!!!!
+        button(name="confirm", value="y") Yes
diff --git a/views/dashboard.pug b/views/dashboard.pug
index 5312731..b849588 100644
--- a/views/dashboard.pug
+++ b/views/dashboard.pug
@@ -3,8 +3,6 @@ include _util.pug
 
 block head
   link(rel="stylesheet", href="/css/dashboard.css")
-  style
-    | #content { margin-left: 256px; }
 
 block page
   #sidebar
@@ -40,7 +38,7 @@ block content
     a(href="#invite-codes") Invite codes
   p This is where you "MIPILIN"! That is all you need to know!!!
   p If onlookers notice your actions and inquire about what you are doing, you MUST tell them that you are mipilining all over the place, and then PROMPTLY SCROLL DOWN AND GENERATE AN INVITE CODE SO THAT THEY CAN MIPILIN TOO.
-  form#dashboard-update-form(action="/mood/update", method="post")
+  form#dashboard-update-form(action="/update/mood", method="post")
     select(name="mood", required)
       //- Maybe put the index of the mood in the value of the option element
       //- so that indexOf (slow) wont have to be used everytime mood is updated
diff --git a/views/index.pug b/views/index.pug
index 3d2e904..198ef58 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -1,10 +1,6 @@
 extends site.pug
 include _util.pug
 
-block head
-  style
-    | #content { margin-left: 256px; }
-
 block page
   #sidebar
     h1 mipilin
diff --git a/views/journal.pug b/views/journal.pug
index c00c5e0..da4b93c 100644
--- a/views/journal.pug
+++ b/views/journal.pug
@@ -33,7 +33,7 @@ block content
           img(src="/img/downdown.svg", alt="Much worse")
     .input
       label(for="title") Title
-      input(type="text", name="title", id="title", placeholder="max 64 chars", maxlength="64", style="width:66ch;")
+      input(type="text", name="title", id="title", placeholder="max 64 chars", maxlength="64")
     .input
       label(for="description") Journal entry for today
       textarea(name="description", id="description", placeholder="max 4096 chars", maxlength="4096", cols="60", rows="12")