Add mobile UI for home
This commit is contained in:
parent
c0cc015c81
commit
912c623048
|
@ -23,7 +23,7 @@ if (process.env.NODE_ENV != "production") {
|
||||||
if (id.includes("metrics")) return;
|
if (id.includes("metrics")) return;
|
||||||
if (/[\/\\]lib[\/\\]/.test(id)) delete require.cache[id];
|
if (/[\/\\]lib[\/\\]/.test(id)) delete require.cache[id];
|
||||||
});
|
});
|
||||||
if (server) server.close();
|
if (server && server.close) server.close();
|
||||||
server = require("./lib/express");
|
server = require("./lib/express");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -26,6 +26,7 @@ const sgMail = require("@sendgrid/mail");
|
||||||
const ejs = require("ejs");
|
const ejs = require("ejs");
|
||||||
const cookieEncrypter = require("cookie-encrypter");
|
const cookieEncrypter = require("cookie-encrypter");
|
||||||
const expressLayouts = require("express-ejs-layouts");
|
const expressLayouts = require("express-ejs-layouts");
|
||||||
|
const isMobile = require("ismobilejs").default;
|
||||||
|
|
||||||
let ssbServer;
|
let ssbServer;
|
||||||
let mode = process.env.MODE || "client";
|
let mode = process.env.MODE || "client";
|
||||||
|
@ -159,6 +160,9 @@ router.get("/", { public: true }, async (req, res) => {
|
||||||
if (!req.context.profile) {
|
if (!req.context.profile) {
|
||||||
return res.render("index");
|
return res.render("index");
|
||||||
}
|
}
|
||||||
|
if (isMobile(req.headers["user-agent"]).phone) {
|
||||||
|
return res.redirect("/mobile");
|
||||||
|
}
|
||||||
|
|
||||||
const [posts, friends, secretMessages] = await Promise.all([
|
const [posts, friends, secretMessages] = await Promise.all([
|
||||||
queries.getPosts(ssbServer, req.context.profile),
|
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) => {
|
router.get("/login", { public: true }, (_req, res) => {
|
||||||
res.render("login", { mode });
|
res.render("login", { mode });
|
||||||
});
|
});
|
||||||
|
|
|
@ -17,6 +17,7 @@ module.exports.asyncRouter = (app) => {
|
||||||
return res.redirect("/");
|
return res.redirect("/");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
req.context.path = path;
|
||||||
try {
|
try {
|
||||||
debug(`${method} ${path}`);
|
debug(`${method} ${path}`);
|
||||||
metrics.router.inc({ method, path });
|
metrics.router.inc({ method, path });
|
||||||
|
|
|
@ -1842,6 +1842,11 @@
|
||||||
"buffer-alloc": "^1.2.0"
|
"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": {
|
"json-buffer": {
|
||||||
"version": "2.0.11",
|
"version": "2.0.11",
|
||||||
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-2.0.11.tgz",
|
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-2.0.11.tgz",
|
||||||
|
|
|
@ -25,6 +25,7 @@
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
"express-ejs-layouts": "^2.5.0",
|
"express-ejs-layouts": "^2.5.0",
|
||||||
"express-fileupload": "^1.1.7-alpha.3",
|
"express-fileupload": "^1.1.7-alpha.3",
|
||||||
|
"ismobilejs": "^1.1.1",
|
||||||
"mime-types": "^2.1.26",
|
"mime-types": "^2.1.26",
|
||||||
"prom-client": "^12.0.0",
|
"prom-client": "^12.0.0",
|
||||||
"pull-cat": "^1.1.11",
|
"pull-cat": "^1.1.11",
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
|
||||||
|
<title>Social</title>
|
||||||
|
<link rel="stylesheet" href="/style.css">
|
||||||
|
<link rel="stylesheet" href="/mobile_style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="logo">
|
||||||
|
<a href="/">Social</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<nav>
|
||||||
|
<a href="/" class="<%= context.path == "/mobile" ? "selected" : "" %>">
|
||||||
|
<div class="nav-icon">🙂</div>
|
||||||
|
Profile
|
||||||
|
</a>
|
||||||
|
<a href="/secrets">
|
||||||
|
<div class="nav-icon">🤫</div>
|
||||||
|
Secrets
|
||||||
|
</a>
|
||||||
|
<a href="/friends">
|
||||||
|
<div class="nav-icon">👨👧👦</div>
|
||||||
|
Friends
|
||||||
|
</a>
|
||||||
|
<a href="/communities">
|
||||||
|
<div class="nav-icon">🌆</div>
|
||||||
|
Communities
|
||||||
|
</a>
|
||||||
|
<a href="/search">
|
||||||
|
<div class="nav-icon">💬</div>
|
||||||
|
Search
|
||||||
|
</a>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<%- body %>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div class="columns" style="align-items: center;">
|
||||||
|
<div><img class="profile-pic" src="<%= profileImageUrl(profile) %>" style="display:block" /></div>
|
||||||
|
<div style="padding-left: 20px">
|
||||||
|
<h1><%= profile.name %></h1>
|
||||||
|
|
||||||
|
<%= profile.description %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<% if (posts.length > 0) { %>
|
||||||
|
<%- include('../_posts', { posts }) %>
|
||||||
|
<% } else { %>
|
||||||
|
<div style="padding-top: 15px;">
|
||||||
|
<div class="post">
|
||||||
|
You have no posts yet, publish something!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
Loading…
Reference in New Issue