Add top menu to mobile
This commit is contained in:
Rogerio Chaves
parent
f82c24eff4
commit
83a06924b3
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
let server;
|
||||
require("./lib/ssb");
|
||||
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,20 @@
|
|||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<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>
|
||||
<a href="/mobile" class="<%= context.path == "/mobile" ? "selected" : "" %>">
|
||||
<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