diff --git a/app/index.js b/app/index.js
index 2d77c8e..5f2b07a 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,3 +1,4 @@
+
let server;
require("./lib/ssb");
diff --git a/app/lib/express.js b/app/lib/express.js
index 5593b1b..1e453fc 100644
--- a/app/lib/express.js
+++ b/app/lib/express.js
@@ -44,7 +44,7 @@ if (SENTRY_DSN && process.env.NODE_ENV == "production") {
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");
-app.set('views', `${__dirname}/../views`);
+app.set("views", `${__dirname}/../views`);
app.use(express.static(`${__dirname}/../public`));
app.use(fileUpload());
const cookieSecret =
@@ -452,7 +452,7 @@ router.post("/pubs/add", async (req, res) => {
res.redirect("/");
});
-router.get("/about", (req, res) => {
+router.get("/about", { mobileVersion: "/mobile/about" }, (_req, res) => {
res.render("about");
});
@@ -636,7 +636,7 @@ router.get("/debug-error", (_req, res) => {
res.send("should never reach here");
});
-router.get("/metrics", (_req, res) => {
+router.get("/metrics", { public: true }, (_req, res) => {
res.set("Content-Type", metrics.register.contentType);
res.end(metrics.register.metrics());
});
diff --git a/app/lib/mobile-routes.js b/app/lib/mobile-routes.js
index 92adac5..8bfda6d 100644
--- a/app/lib/mobile-routes.js
+++ b/app/lib/mobile-routes.js
@@ -71,6 +71,10 @@ module.exports.setupRoutes = (router) => {
}
);
+ router.get("/mobile/about", { desktopVersion: "/about" }, (_req, res) => {
+ res.render("mobile/about", { layout: "mobile/_layout" });
+ });
+
router.get(
"/mobile/communities",
{ desktopVersion: "/communities" },
diff --git a/app/public/js/mobile.js b/app/public/js/mobile.js
index 52794e8..209bf21 100644
--- a/app/public/js/mobile.js
+++ b/app/public/js/mobile.js
@@ -196,3 +196,21 @@ tabButtons.forEach((tab, index) => {
tab.classList.add("tab-selected");
});
});
+
+/**
+ * Top menu
+ */
+
+const openMenu = document.querySelector(".js-open-menu");
+if (openMenu) {
+ const topMenu = document.querySelector(".js-top-menu");
+ const overlay = document.querySelector(".js-top-menu-overlay");
+ openMenu.addEventListener("click", () => {
+ overlay.style.display = "block";
+ topMenu.style.display = "flex";
+ });
+ overlay.addEventListener("click", () => {
+ overlay.style.display = "none";
+ topMenu.style.display = "none";
+ });
+}
diff --git a/app/public/mobile.css b/app/public/mobile.css
index 0b1a62f..984f131 100644
--- a/app/public/mobile.css
+++ b/app/public/mobile.css
@@ -23,6 +23,7 @@ header {
display: flex;
padding: 10px;
background: #333;
+ justify-content: space-between;
}
.logo {
@@ -201,3 +202,41 @@ a.compose-new-button {
padding: 5px 0;
margin: 0;
}
+
+.open-menu {
+ background: none;
+ border: none;
+ padding: 0;
+ height: auto;
+}
+
+.menu-dash {
+ width: 25px;
+ height: 3px;
+ background: #fff;
+ border-radius: 5px;
+ margin-top: 4px;
+}
+
+.menu-dash:first-child {
+ margin: 0;
+}
+
+.top-menu {
+ background: #fff;
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ margin-top: 20px;
+ width: 40vw;
+ right: 20px;
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
+ z-index: 2;
+}
+
+.top-menu a {
+ display: block;
+ text-decoration: none;
+ padding: 14px;
+ border-bottom: 1px solid #ddd;
+}
diff --git a/app/public/shared.css b/app/public/shared.css
index 5a4e174..69e38fb 100644
--- a/app/public/shared.css
+++ b/app/public/shared.css
@@ -354,7 +354,7 @@ h2 {
@media (max-width: 576px) {
header {
/* For responsiveness on login and singup pages, because I was too lazy to do a mobile focused version for those */
- padding: 10px 0 !important;
+ padding: 10px !important;
}
.index-welcome {
height: 98vh;
diff --git a/app/views/mobile/_layout.ejs b/app/views/mobile/_layout.ejs
index c4ca433..791caa4 100644
--- a/app/views/mobile/_layout.ejs
+++ b/app/views/mobile/_layout.ejs
@@ -10,7 +10,20 @@
+
+