mobile friendliness

Signed-off-by: roxwize <rae@roxwize.xyz>

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;

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;
+    }
 }

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

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

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

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")