From 912c623048f6be09b87aee3ec4d0b4ebb1a13f4c Mon Sep 17 00:00:00 2001 From: Rogerio Chaves Date: Wed, 22 Apr 2020 09:15:39 +0200 Subject: [PATCH] Add mobile UI for home --- app/index.js | 2 +- app/lib/express.js | 19 ++++++++++++++++ app/lib/mobile.js | 0 app/lib/utils.js | 1 + app/package-lock.json | 5 ++++ app/package.json | 1 + app/public/mobile_style.css | 44 ++++++++++++++++++++++++++++++++++++ app/views/mobile/_layout.ejs | 42 ++++++++++++++++++++++++++++++++++ app/views/mobile/home.ejs | 18 +++++++++++++++ 9 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 app/lib/mobile.js create mode 100644 app/public/mobile_style.css create mode 100644 app/views/mobile/_layout.ejs create mode 100644 app/views/mobile/home.ejs diff --git a/app/index.js b/app/index.js index 90e4aed..21e9d2e 100644 --- a/app/index.js +++ b/app/index.js @@ -23,7 +23,7 @@ if (process.env.NODE_ENV != "production") { if (id.includes("metrics")) return; if (/[\/\\]lib[\/\\]/.test(id)) delete require.cache[id]; }); - if (server) server.close(); + if (server && server.close) server.close(); server = require("./lib/express"); }); }); diff --git a/app/lib/express.js b/app/lib/express.js index d8cd4d0..d776f97 100644 --- a/app/lib/express.js +++ b/app/lib/express.js @@ -26,6 +26,7 @@ const sgMail = require("@sendgrid/mail"); const ejs = require("ejs"); const cookieEncrypter = require("cookie-encrypter"); const expressLayouts = require("express-ejs-layouts"); +const isMobile = require("ismobilejs").default; let ssbServer; let mode = process.env.MODE || "client"; @@ -159,6 +160,9 @@ router.get("/", { public: true }, async (req, res) => { if (!req.context.profile) { return res.render("index"); } + if (isMobile(req.headers["user-agent"]).phone) { + return res.redirect("/mobile"); + } const [posts, friends, secretMessages] = await Promise.all([ queries.getPosts(ssbServer, req.context.profile), @@ -173,6 +177,21 @@ router.get("/", { public: true }, async (req, res) => { }); }); +router.get("/mobile", async (req, res) => { + // TODO + // if (!isMobile(req.headers["user-agent"]).phone) { + // return res.redirect("/"); + // } + + const posts = await queries.getPosts(ssbServer, req.context.profile); + + res.render("mobile/home", { + posts, + profile: req.context.profile, + layout: "mobile/_layout", + }); +}); + router.get("/login", { public: true }, (_req, res) => { res.render("login", { mode }); }); diff --git a/app/lib/mobile.js b/app/lib/mobile.js new file mode 100644 index 0000000..e69de29 diff --git a/app/lib/utils.js b/app/lib/utils.js index 8e0a6ec..975bb45 100644 --- a/app/lib/utils.js +++ b/app/lib/utils.js @@ -17,6 +17,7 @@ module.exports.asyncRouter = (app) => { return res.redirect("/"); } + req.context.path = path; try { debug(`${method} ${path}`); metrics.router.inc({ method, path }); diff --git a/app/package-lock.json b/app/package-lock.json index d2bb1a6..f6fb87a 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -1842,6 +1842,11 @@ "buffer-alloc": "^1.2.0" } }, + "ismobilejs": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz", + "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==" + }, "json-buffer": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-2.0.11.tgz", diff --git a/app/package.json b/app/package.json index 1ec3fcc..bebedd2 100644 --- a/app/package.json +++ b/app/package.json @@ -25,6 +25,7 @@ "express": "^4.17.1", "express-ejs-layouts": "^2.5.0", "express-fileupload": "^1.1.7-alpha.3", + "ismobilejs": "^1.1.1", "mime-types": "^2.1.26", "prom-client": "^12.0.0", "pull-cat": "^1.1.11", diff --git a/app/public/mobile_style.css b/app/public/mobile_style.css new file mode 100644 index 0000000..22b6c9c --- /dev/null +++ b/app/public/mobile_style.css @@ -0,0 +1,44 @@ +body { + background: #fff; + padding-bottom: 70px; +} + +nav { + position: fixed; + bottom: 0; + justify-content: space-between; + width: 100%; + border-radius: 0; + padding: 0; + border-top: 1px solid #aaa; + border-bottom: 1px solid #aaa; +} + +header { + padding: 10px; + background: #333; +} + +.logo a { + font-size: 20px; + color: #fff; +} + +nav a { + text-decoration: none; + padding: 8px 10px; +} + +nav a.selected { + background: #ccc; +} + +.nav-icon { + font-size: 30px; + text-align: center; + padding: 8px 0 5px 0; +} + +.post { + padding: 10px; +} diff --git a/app/views/mobile/_layout.ejs b/app/views/mobile/_layout.ejs new file mode 100644 index 0000000..c603a17 --- /dev/null +++ b/app/views/mobile/_layout.ejs @@ -0,0 +1,42 @@ + + + + + + Social + + + + +
+ +
+ + + <%- body %> + + \ No newline at end of file diff --git a/app/views/mobile/home.ejs b/app/views/mobile/home.ejs new file mode 100644 index 0000000..378595b --- /dev/null +++ b/app/views/mobile/home.ejs @@ -0,0 +1,18 @@ +
+
+
+

<%= profile.name %>

+ + <%= profile.description %> +
+
+ +<% if (posts.length > 0) { %> + <%- include('../_posts', { posts }) %> +<% } else { %> +
+
+ You have no posts yet, publish something! +
+
+<% } %> \ No newline at end of file