Add mobile UI for home
This commit is contained in:
Rogerio Chaves
parent
c0cc015c81
commit
912c623048
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ module.exports.asyncRouter = (app) => {
|
|||
return res.redirect("/");
|
||||
}
|
||||
|
||||
req.context.path = path;
|
||||
try {
|
||||
debug(`${method} ${path}`);
|
||||
metrics.router.inc({ method, path });
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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