From 6c51b69aa24678c96044e55942a96a17cad38b4d Mon Sep 17 00:00:00 2001
From: Mark Powers <markppowers0@gmail.com>
Date: Tue, 20 Oct 2020 21:30:56 -0500
Subject: Update mobile styles

---
 src/server.js                  |  9 ++++++++-
 src/static/main.js             |  2 +-
 src/static/mobile.css          | 36 ++++++++++++++++++++++++++++++++++
 src/static/styles.css          | 44 +-----------------------------------------
 src/templates.js               |  1 +
 src/templates/about.html       |  3 +--
 src/templates/expected.html    | 10 +---------
 src/templates/goals.html       |  2 +-
 src/templates/ledger-edit.html |  2 +-
 src/templates/ledger.html      |  8 ++++----
 src/templates/login.html       |  3 +--
 src/templates/me.html          |  3 +--
 src/templates/sign-up.html     |  5 ++---
 src/templates/styles.html      |  2 ++
 src/templates/summary.html     |  2 +-
 15 files changed, 62 insertions(+), 70 deletions(-)
 create mode 100644 src/static/mobile.css
 create mode 100644 src/templates/styles.html

(limited to 'src')

diff --git a/src/server.js b/src/server.js
index 025c087..81b2393 100644
--- a/src/server.js
+++ b/src/server.js
@@ -41,6 +41,9 @@ function consumeMessage(res){
         return undefined
     }
 }
+function dateToString(d){
+    return `${d.getFullYear().toString()}/${d.getMonth().toString()}/${d.getDate().toString()}`
+}
 
 function setUpRoutes(models, jwtFunctions, database, templates) {
     // Authentication routine
@@ -53,6 +56,10 @@ function setUpRoutes(models, jwtFunctions, database, templates) {
         res.locals.id = session_cookie;
 
         let path = req.path.toLowerCase();
+        if(path.startsWith("/static")){
+            next();
+            return;
+        }
         if (!path.startsWith("/login")) {
             let cookie = req.cookies.authorization
             if (!cookie) {
@@ -111,7 +118,7 @@ function setUpRoutes(models, jwtFunctions, database, templates) {
     server.get('/ledger', async (req, res) => {
         var ledger = await database.query(`SELECT * FROM transactions WHERE username = '${res.locals.user.username}' ORDER BY \`when\` DESC`, { type: database.QueryTypes.SELECT })
         ledger.forEach((element, i) => {
-            element.when = element.when.toString().substring(0, 10);
+            element.when = dateToString(element.when);
             element.index = i + 1
         });
         let name = res.locals.user.username
diff --git a/src/static/main.js b/src/static/main.js
index 1bcf5e5..24df4ea 100644
--- a/src/static/main.js
+++ b/src/static/main.js
@@ -1,4 +1,4 @@
-function remove(id){
+function remove(id) {
     if (confirm(`Delete transaction?`)) {
         let request = new Request(`/ledger/${id}`, {
             method: 'delete',
diff --git a/src/static/mobile.css b/src/static/mobile.css
new file mode 100644
index 0000000..d4456ba
--- /dev/null
+++ b/src/static/mobile.css
@@ -0,0 +1,36 @@
+@media (max-width: 1000px) {
+    body {
+        display: block;
+    }
+    .newItem td {
+        display:block;
+    }
+    table{
+        width: 100%;
+    }
+    h1, button, input {
+        font-size: 72px;
+    }
+    h2, .navigation {
+        font-size: 64px;
+    }
+    td, p, li {
+        font-size: 36px;
+    }
+    input {
+        font-size: 72px;
+        display: block;
+        width: 95%;
+    }
+    .navigation {
+        border-left: none;
+        display: inline;
+        
+    }
+    .navigation h2, .navigation div {
+        display: inline;
+    }
+    .table-index {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/src/static/styles.css b/src/static/styles.css
index 984a43d..01251de 100644
--- a/src/static/styles.css
+++ b/src/static/styles.css
@@ -10,33 +10,11 @@ table {
 tr:nth-child(2n+1) {
     background-color: lightgray;
 }
-tr {
-    width: 100%;
-}
 
-.bold {
-    font-weight: bold;
-}
-
-#data {
+tr {
     width: 100%;
 }
 
-.border {
-    border: 1px solid lightgrey;
-}
-
-textarea {
-    border-radius: 4px;
-    width: 60%;
-    height: 10em;
-    display: block;
-}
-
-pre {
-    white-space: pre-line;
-}
-
 .net-negative {
     background-color: lightcoral;
 }
@@ -79,23 +57,3 @@ p, li {
 a, a:visited {
     color: black;
 }
-
-@media (max-width: 600px) {
-    .newItem td {
-        display:block;
-    }
-    .table-index {
-        display: none;
-    }
-    button {
-        font-size: 32px;
-    }
-    input {
-        font-size: 32px;
-        display: block;
-        width: 100%;
-    }
-    .navigation {
-        border-left: none;
-    }
-}
\ No newline at end of file
diff --git a/src/templates.js b/src/templates.js
index d355a5f..516a9af 100644
--- a/src/templates.js
+++ b/src/templates.js
@@ -14,6 +14,7 @@ function loadPartial(name, filepath){
 function setUpTemplates(){
     loadPartial("navigation", path.join(__dirname, "templates/navigation.html"))
     loadPartial("message", path.join(__dirname, "templates/message.html"))
+    loadPartial("styles", path.join(__dirname, "templates/styles.html"))
 
     let templates = {};
     loadTemplate(templates, "me", path.join(__dirname, 'templates/me.html'))
diff --git a/src/templates/about.html b/src/templates/about.html
index d4f215f..494012d 100644
--- a/src/templates/about.html
+++ b/src/templates/about.html
@@ -4,8 +4,7 @@
 <head>
     <title>About</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" type="text/css" href="static/styles.css">
+    {{> styles}}
 </head>
 
 <body>
diff --git a/src/templates/expected.html b/src/templates/expected.html
index 3657151..78d6482 100644
--- a/src/templates/expected.html
+++ b/src/templates/expected.html
@@ -4,20 +4,12 @@
 <head>
     <title>{{name}}'s Budget</title>
     <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="static/styles.css">
+    {{> styles}}
 </head>
 
 <body>
     <div class="main">
         <h1>Expected</h1>
-        <div>
-            <a href="/ledger"><button>Ledger</button></a>
-            <a href="/summary"><button>Summary</button></a>
-            <a href="/goals"><button>Goals</button></a>
-            <a href="/expected"><button class="bold">Expected</button></a>
-            <a href="/about"><button>About</button></a>
-        </div>
-
         <form method="post" action="/expected">
             <input name="name" placeholder="name" type="text">
             <input name="total" placeholder="total" type="number">
diff --git a/src/templates/goals.html b/src/templates/goals.html
index 9c106bd..30f5032 100644
--- a/src/templates/goals.html
+++ b/src/templates/goals.html
@@ -4,7 +4,7 @@
 <head>
     <title>{{name}}'s Budget</title>
     <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="static/styles.css">
+    {{> styles}}
 </head>
 
 <body>
diff --git a/src/templates/ledger-edit.html b/src/templates/ledger-edit.html
index b5539f1..5e954a7 100644
--- a/src/templates/ledger-edit.html
+++ b/src/templates/ledger-edit.html
@@ -4,7 +4,7 @@
 <head>
     <title>{{name}}'s Budget</title>
     <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="static/styles.css">
+    {{> styles}}
 </head>
 
 <body>
diff --git a/src/templates/ledger.html b/src/templates/ledger.html
index 031108e..5e652f5 100644
--- a/src/templates/ledger.html
+++ b/src/templates/ledger.html
@@ -4,8 +4,8 @@
 <head>
     <title>{{name}}'s Budget</title>
     <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="static/styles.css">
-    <script src="/static/main.js"></script>
+    {{> styles}}
+    <script src="static/main.js"></script>
 </head>
 
 <body>
@@ -21,7 +21,7 @@
         </form>
         <table>
             <tr>
-                <th></th>
+                <th class="table-index"></th>
                 <th>When</th>
                 <th>Where</th>
                 <th>Amount</th>
@@ -32,7 +32,7 @@
             </tr>
             {{#each ledger}}
             <tr>
-                <td>{{this.index}}</td>
+                <td class="table-index">{{this.index}}</td>
                 <td>{{this.when}}</td>
                 <td>{{this.where}}</td>
                 <td>{{this.amount}}</td>
diff --git a/src/templates/login.html b/src/templates/login.html
index 8557b72..9100166 100644
--- a/src/templates/login.html
+++ b/src/templates/login.html
@@ -4,8 +4,7 @@
 <head>
     <title>Login</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    {{> styles}}
 </head>
 
 <body>
diff --git a/src/templates/me.html b/src/templates/me.html
index 4b96661..2bcd397 100644
--- a/src/templates/me.html
+++ b/src/templates/me.html
@@ -4,8 +4,7 @@
 <head>
     <title>About</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" type="text/css" href="static/styles.css">
+    {{> styles}}
 </head>
 
 <body>
diff --git a/src/templates/sign-up.html b/src/templates/sign-up.html
index 3f19ed3..5dae368 100644
--- a/src/templates/sign-up.html
+++ b/src/templates/sign-up.html
@@ -4,8 +4,7 @@
 <head>
     <title>Sign Up</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    {{> styles}}
 </head>
 
 <body>
@@ -16,7 +15,7 @@
             <input name="username" type="text" placeholder="Enter Username" required>
             <input type="password" placeholder="Enter Password" name="password" required>
             <input type="text" placeholder="Secret code" name="code" required>
-            <input type="submit" vallue="Log in"> 
+            <input type="submit" value="Sign up"> 
         </div>
     </div>
     <a href="/login">or login</a>
diff --git a/src/templates/styles.html b/src/templates/styles.html
new file mode 100644
index 0000000..1516b7e
--- /dev/null
+++ b/src/templates/styles.html
@@ -0,0 +1,2 @@
+<link rel="stylesheet" type="text/css" href="/static/styles.css">
+<link rel="stylesheet" type="text/css" href="/static/mobile.css">
\ No newline at end of file
diff --git a/src/templates/summary.html b/src/templates/summary.html
index 4ad6261..f9ae202 100644
--- a/src/templates/summary.html
+++ b/src/templates/summary.html
@@ -4,7 +4,7 @@
 <head>
     <title>{{name}}'s Budget</title>
     <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="static/styles.css">
+    {{> styles}}
 </head>
 
 <body>
-- 
cgit v1.2.3