diff options
Diffstat (limited to 'views')
| -rw-r--r-- | views/forum_edit.ejs | 10 | ||||
| -rw-r--r-- | views/forum_post.ejs | 20 | ||||
| -rw-r--r-- | views/forum_reply.ejs | 25 | ||||
| -rw-r--r-- | views/forum_thread.ejs | 32 | ||||
| -rw-r--r-- | views/forum_view.ejs | 42 | ||||
| -rw-r--r-- | views/header.ejs | 1 |
6 files changed, 130 insertions, 0 deletions
diff --git a/views/forum_edit.ejs b/views/forum_edit.ejs new file mode 100644 index 0000000..2f3c3ff --- /dev/null +++ b/views/forum_edit.ejs @@ -0,0 +1,10 @@ +<%- include('header', { title: "Edit Post" }) %> +<style> +input, textarea { width: 100%; max-width: 45em; } +</style> +<form action="/forum/edit/<%- post.post_id %>" method="post"> +<p> +<textarea name="body" rows="20" cols="80" maxlength="32000" required autofocus><%= post.body %></textarea> +<p> +<button type="submit">Submit</button> +</form> diff --git a/views/forum_post.ejs b/views/forum_post.ejs new file mode 100644 index 0000000..aa24455 --- /dev/null +++ b/views/forum_post.ejs @@ -0,0 +1,20 @@ +<%- include('header', { title: "New Thread" }) %> +<style> +input, textarea { width: 100%; max-width: 45em; } +</style> +<form action="/forum/post" method="post"> +<p> +Subject: +<br> +<input type="text" name="subject" size="80" maxlength="80" + onkeypress="if(event.keyCode===13){document.querySelector('textarea').focus();return false;}" + autofocus + pattern=".*\S+.*" + required> +<p> +Body: +<br> +<textarea name="body" rows="20" cols="80" maxlength="32000" required></textarea> +<p> +<button type="submit">Submit</button> +</form> diff --git a/views/forum_reply.ejs b/views/forum_reply.ejs new file mode 100644 index 0000000..bf27492 --- /dev/null +++ b/views/forum_reply.ejs @@ -0,0 +1,25 @@ +<%- include('header', { title: thread.subject }) %> +<style> +input, textarea { width: 100%; max-width: 45em; } +table { width: 100%; max-width: 50em; } +td.body { white-space: pre-wrap; padding: 10px 10px; } +th.author { border-right: none; } +th.time { text-align: right; border-left: none; font-weight: normal; } +</style> +<table> +<tr> +<th class="nowrap author"><%= post.author_name %> +<th class="nowrap time"><%= post.ctime %> +<%= post.edited ? "(edited " + post.mtime + ")" : "" %> +<tr> +<td class="body" colspan="2"><%- post.body %></td> +</table> +<form action="/forum/reply/<%- thread.thread_id %>" method="post"> +<p> +Reply: +<br> +<textarea name="body" rows="15" cols="80" maxlength="32000" required autofocus + placeholder="Say something nice."></textarea> +<p> +<button type="submit">Submit</button> +</form> diff --git a/views/forum_thread.ejs b/views/forum_thread.ejs new file mode 100644 index 0000000..fad8829 --- /dev/null +++ b/views/forum_thread.ejs @@ -0,0 +1,32 @@ +<%- include('header', { title: thread.subject }) %> +<style> +table { width: 100%; max-width: 50em; } +td.body { white-space: pre-wrap; padding: 10px 10px; } +th.author { border-right: none; } +th.time { text-align: right; border-left: none; font-weight: normal; } +td.edit { text-align: right; border: none; } +</style> +<% posts.forEach((row) => { %> +<p> +<table> +<tr> +<th class="nowrap author"><%= row.author_name %> +<th class="nowrap time"><%= row.ctime %> +<%= row.edited ? "(edited " + row.mtime + ")" : "" %> +<tr> +<td class="body" colspan="2"><%- row.body %></td> +<% if (user) { %> +<tr> +<td class="edit" colspan=2> +<% if (row.author_id === user.user_id) { %> +<a href="/forum/edit/<%- row.post_id %>">Edit</a> +<% } %> +<a href="/forum/reply/<%- row.post_id %>">Reply</a> +<% } %> +</table> +<% }); %> +<% +if (user) { + %><p><a href="/forum/reply/<%- posts[0].post_id %>">Reply</a><% +} +%> diff --git a/views/forum_view.ejs b/views/forum_view.ejs new file mode 100644 index 0000000..7c3de75 --- /dev/null +++ b/views/forum_view.ejs @@ -0,0 +1,42 @@ +<%- include('header', { title: "Forum", refresh: 900 }) %> +<style> +table { width: 100%; max-width: 60em; } +td a { color: black; text-decoration: none; } +tfoot td { background-color: gainsboro; } +</style> +<table> +<thead> +<tr><th>Subject<th>Author +<th>Replies<th>Time +</thead> +<% threads.forEach((row) => { %> +<tr> +<td class="ellipsis"><a href="/forum/thread/<%- row.thread_id %>"><%= row.subject %></a> +<td class="nowrap"><%= row.author_name %> +<td><%= row.reply_count %> +<td class="nowrap"><%= row.mtime %> +<% }); %> +<tfoot> +<tr> +<td colspan="4"> +<% +if (current_page > 1) { + %><a href="/forum/page/<%= current_page-1 %>">←</a> <% +} +for (let p = 1; p <= page_count && p <= 30; ++p) { + if (p === current_page) { + %>(<%= p %>) <% + } else { + %><a href="/forum/page/<%= p %>"><%= p %></a> <% + } +} +if (current_page < page_count) { + %><a href="/forum/page/<%= current_page+1 %>">→</a> <% +} +%> +</table> +<% +if (user) { + %><p><a href="/forum/post">New thread</a><% +} +%> diff --git a/views/header.ejs b/views/header.ejs index b430c25..9c8ee0d 100644 --- a/views/header.ejs +++ b/views/header.ejs @@ -13,6 +13,7 @@ <div><a href="/"><img src="/images/rally-the-troops.svg" width="48" height="48"></a></div> <div> <span><a href="/about">About</a></span> +<span><a href="/forum">Forum</a></span> <% if (user) { %><span><a href="/profile">Profile (<%= user.name %>)</a></span><% |