Add top menu to mobile
This commit is contained in:
parent
f82c24eff4
commit
83a06924b3
|
@ -1,3 +1,4 @@
|
||||||
|
|
||||||
let server;
|
let server;
|
||||||
require("./lib/ssb");
|
require("./lib/ssb");
|
||||||
|
|
||||||
|
|
|
@ -44,7 +44,7 @@ if (SENTRY_DSN && process.env.NODE_ENV == "production") {
|
||||||
app.use(bodyParser.json());
|
app.use(bodyParser.json());
|
||||||
app.use(bodyParser.urlencoded({ extended: true }));
|
app.use(bodyParser.urlencoded({ extended: true }));
|
||||||
app.set("view engine", "ejs");
|
app.set("view engine", "ejs");
|
||||||
app.set('views', `${__dirname}/../views`);
|
app.set("views", `${__dirname}/../views`);
|
||||||
app.use(express.static(`${__dirname}/../public`));
|
app.use(express.static(`${__dirname}/../public`));
|
||||||
app.use(fileUpload());
|
app.use(fileUpload());
|
||||||
const cookieSecret =
|
const cookieSecret =
|
||||||
|
@ -452,7 +452,7 @@ router.post("/pubs/add", async (req, res) => {
|
||||||
res.redirect("/");
|
res.redirect("/");
|
||||||
});
|
});
|
||||||
|
|
||||||
router.get("/about", (req, res) => {
|
router.get("/about", { mobileVersion: "/mobile/about" }, (_req, res) => {
|
||||||
res.render("about");
|
res.render("about");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -636,7 +636,7 @@ router.get("/debug-error", (_req, res) => {
|
||||||
res.send("should never reach here");
|
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.set("Content-Type", metrics.register.contentType);
|
||||||
res.end(metrics.register.metrics());
|
res.end(metrics.register.metrics());
|
||||||
});
|
});
|
||||||
|
|
|
@ -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(
|
router.get(
|
||||||
"/mobile/communities",
|
"/mobile/communities",
|
||||||
{ desktopVersion: "/communities" },
|
{ desktopVersion: "/communities" },
|
||||||
|
|
|
@ -196,3 +196,21 @@ tabButtons.forEach((tab, index) => {
|
||||||
tab.classList.add("tab-selected");
|
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";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
@ -23,6 +23,7 @@ header {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #333;
|
background: #333;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
@ -201,3 +202,41 @@ a.compose-new-button {
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin: 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;
|
||||||
|
}
|
||||||
|
|
|
@ -354,7 +354,7 @@ h2 {
|
||||||
@media (max-width: 576px) {
|
@media (max-width: 576px) {
|
||||||
header {
|
header {
|
||||||
/* For responsiveness on login and singup pages, because I was too lazy to do a mobile focused version for those */
|
/* 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 {
|
.index-welcome {
|
||||||
height: 98vh;
|
height: 98vh;
|
||||||
|
|
|
@ -10,7 +10,20 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a class="logo" href="/">Social</a>
|
<a class="logo" href="/">Social</a>
|
||||||
|
<button class="open-menu js-open-menu">
|
||||||
|
<div class="menu-dash"></div>
|
||||||
|
<div class="menu-dash"></div>
|
||||||
|
<div class="menu-dash"></div>
|
||||||
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
<div class="overlay js-top-menu-overlay" style="background: none; display: none"></div>
|
||||||
|
<div class="top-menu js-top-menu" style="display: none;">
|
||||||
|
<a href="/mobile/about">Edit profile</a>
|
||||||
|
<a href="https://github.com/rogeriochaves/social/issues" target="_blank">Feedback</a>
|
||||||
|
<a href="/logout">
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="/mobile" class="<%= context.path == "/mobile" ? "selected" : "" %>">
|
<a href="/mobile" class="<%= context.path == "/mobile" ? "selected" : "" %>">
|
||||||
<div class="nav-icon">🙂</div>
|
<div class="nav-icon">🙂</div>
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
<div style="padding: 14px;">
|
||||||
|
<form action="about" method="POST" enctype="multipart/form-data">
|
||||||
|
<label>
|
||||||
|
Profile picture:
|
||||||
|
<div class="columns" style="margin-top: 20px; align-items: center;">
|
||||||
|
<div class="profile-pic-placeholder" style="margin-right: 15px; height: auto">
|
||||||
|
<img src="<%= profileImageUrl(context.profile) %>" class="js-profile-pic-placeholder">
|
||||||
|
</div>
|
||||||
|
<input type="file" name="pic" class="js-profile-pic-upload" />
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<p>
|
||||||
|
Name: <input type="text" name="name" value="<%= context.profile.name %>">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Bio: <input type="text" name="description" value="<%= context.profile.description %>">
|
||||||
|
</p>
|
||||||
|
<input type="submit" value="Save">
|
||||||
|
</form>
|
||||||
|
</div>
|
Loading…
Reference in New Issue