Add community topics and new topic

app/lib/express.js

@@ -493,14 +493,18 @@ router.get(
   }
 );
 
-router.get("/communities/:name/new", async (req, res) => {
-  const community = await communityData(req);
+router.get(
+  "/communities/:name/new",
+  { mobileVersion: "/mobile/communities/:name/new" },
+  async (req, res) => {
+    const community = await communityData(req);
 
-  res.render("communities/new_topic", {
-    community,
-    layout: "communities/_layout",
-  });
-});
+    res.render("communities/new_topic", {
+      community,
+      layout: "communities/_layout",
+    });
+  }
+);
 
 router.post("/communities/:name/new", async (req, res) => {
   const name = req.params.name;
@@ -540,21 +544,25 @@ router.post("/communities/:name/:key(*)/publish", async (req, res) => {
   res.redirect(`/communities/${name}/${key}`);
 });
 
-router.get("/communities/:name/:key(*)", async (req, res) => {
-  const name = req.params.name;
-  const key = "%" + req.params.key;
+router.get(
+  "/communities/:name/:key(*)",
+  { mobileVersion: "/mobile/communities/:name/:key" },
+  async (req, res) => {
+    const name = req.params.name;
+    const key = "%" + req.params.key;
 
-  const [community, posts] = await Promise.all([
-    communityData(req),
-    queries.getPostWithReplies(name, key),
-  ]);
+    const [community, posts] = await Promise.all([
+      communityData(req),
+      queries.getPostWithReplies(name, key),
+    ]);
 
-  res.render("communities/topic", {
-    posts,
-    community,
-    layout: "communities/_layout",
-  });
-});
+    res.render("communities/topic", {
+      posts,
+      community,
+      layout: "communities/_layout",
+    });
+  }
+);
 
 router.get("/search", async (req, res) => {
   const query = req.query.query;

app/lib/mobile-routes.js

@@ -99,4 +99,34 @@ module.exports.setupRoutes = (router) => {
       });
     }
   );
+
+  router.get(
+    "/mobile/communities/:name/new",
+    { desktopVersion: "/communities/:name/new" },
+    async (req, res) => {
+      const name = req.params.name;
+
+      res.render("mobile/communities/new_topic", {
+        community: { name },
+        layout: "mobile/_layout",
+      });
+    }
+  );
+
+  router.get(
+    "/mobile/communities/:name/:key(*)",
+    { desktopVersion: "/communities/:name/:key" },
+    async (req, res) => {
+      const name = req.params.name;
+      const key = "%" + req.params.key;
+
+      const posts = await queries.getPostWithReplies(name, key);
+
+      res.render("mobile/communities/topic", {
+        posts,
+        community: { name },
+        layout: "mobile/_layout",
+      });
+    }
+  );
 };

app/public/style.css

@@ -174,6 +174,7 @@ h2 {
 
 .post-content {
   padding-left: 10px;
+  width: calc(100% - 48px);
 }
 
 .wall {

app/views/mobile/communities/new_topic.ejs

@@ -0,0 +1,15 @@
+<div class="friends-communities">
+  <form action="/communities/<%= community.name %>/new" method="POST">
+    <label>
+      Title:
+      <input type="text" name="title" style="margin-bottom: 20px" maxlength="70" />
+    </label>
+    <label>
+      Post:
+      <textarea name="post" rows="5"></textarea>
+    </label>
+    <div class="reverse-columns" style="margin-top: 10px">
+      <input type="submit" value="Publish" />
+    </div>
+  </form>
+</div>

app/views/mobile/communities/topic.ejs

@@ -0,0 +1,25 @@
+<% if (posts.length > 0) { %>
+  <div class="friends-communities" style="flex-grow: 0;">
+    <h2>
+      <a href="/communities/<%= community.name %>" style="color: #600; text-decoration: none;">
+        ⮃&nbsp; #<%= community.name %>
+      </a>
+    </h2>
+    <h1><%= topicTitle(posts[0].value) %></h1>
+  </div>
+  <%- include("../../_posts", { posts: posts.map(x => x.value), dont_cut: true }) %>
+
+  <form action="/communities/<%= community.name %>/<%= posts[0].key.replace("%", "") %>/publish" method="POST" style="padding: 14px; border-top: 1px solid #ddd;">
+    <label>
+      Reply:
+      <textarea name="reply" class="compose-post" style="margin: 10px 0 0 0; height: 80px"></textarea>
+    </label>
+    <div class="reverse-columns" style="margin-top: 10px">
+      <input type="submit" value="Publish" />
+    </div>
+  </form>
+<% } else { %>
+  <div class="friends-communities">
+    <h1 style="padding: 14px">404 topic not found</h1>
+  </div>
+<% } %>