Use grid-layout instead of table for forum posts.

4 files changed, 57 insertions, 39 deletions

diff --git a/public/style.css b/public/style.css
index e3c4ae6..9db076f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -61,7 +61,8 @@ td.body {
 	padding: 10px 10px;
 }
 table a:not(:hover) { text-decoration: none; color: black; }
-table td.command a { text-decoration: underline; color: blue; }
+td.command a { text-decoration: underline; color: blue; }
+td.is_active { background-color: lemonchiffon; }
 
 input[type="checkbox"] {
 	margin-right: 7px;
@@ -92,11 +93,48 @@ button:disabled {
 	outline: 1px solid gray;
 }
 
-td.is_active { background-color: lemonchiffon; }
 p.error { color: brown; font-style: italic; white-space: pre-wrap; }
 p.warning { color: brown; }
 p.warning::before { content: "\26a0"; }
 
+div.post {
+	margin-bottom: 2em;
+	max-width: 50em;
+	display: grid;
+	grid-template:
+		"from time" auto
+		"body body" 1fr
+		"xxxx edit" auto
+		/ 1fr auto
+}
+div.post div.from {
+	grid-area: from;
+	background-color: gainsboro;
+	padding: 5px 10px;
+	border-top: 1px solid black;
+	border-left: 1px solid black;
+	font-weight: bold;
+}
+div.post div.time {
+	grid-area: time;
+	background-color: gainsboro;
+	padding: 5px;
+	border-top: 1px solid black;
+	border-right: 1px solid black;
+}
+div.post div.body {
+	grid-area: body;
+	border: 1px solid black;
+	padding: 15px;
+	white-space: pre-wrap;
+}
+div.post div.edit{
+	grid-area: edit;
+	padding: 5px;
+	text-align:right;
+}
+div.post div.from a:not(:hover) {color:black;text-decoration:none}
+
 article hr { max-width: 50rem; margin-right: auto; margin-left: 0; }
 article hr { border: none; border-top: 2px dotted brown; }
 article hr + p { font-style: italic; }
diff --git a/views/forum_reply.pug b/views/forum_reply.pug
index 5b5a3bb..3aa6d0b 100644
--- a/views/forum_reply.pug
+++ b/views/forum_reply.pug
@@ -4,26 +4,12 @@ html
 	head
 		include head
 		title= thread.subject
-		style.
-			input, textarea { width: min(45rem,100%) }
-			table { max-width: 50em; }
-			table .author { border-right: none; }
-			table .time { border-left: none; font-weight: normal; }
-			table .command { border: none; }
 	body
 		include header
 		article
 			h1= thread.subject
 
-			table
-				tr
-					th.author: a(href="/user/"+post.author_name)= post.author_name
-					th.r.time= post.ctime
-						if post.edited
-							|
-							| (edited #{post.mtime})
-				tr
-					td.body(colspan=2)!= post.body
+			+forumpost(post,0)
 
 			form(method="post" action="/forum/reply/"+thread.thread_id)
 				p Reply:
diff --git a/views/forum_thread.pug b/views/forum_thread.pug
index bb19b61..3ed117e 100644
--- a/views/forum_thread.pug
+++ b/views/forum_thread.pug
@@ -4,34 +4,13 @@ html
 	head
 		include head
 		title= thread.subject
-		style.
-			table { max-width: 50em; }
-			table .author { border-right: none; }
-			table .time { border-left: none; font-weight: normal; }
-			table .command { border: none; }
 	body
 		include header
 		article
 			h1= thread.subject
 
 			each row in posts
-				p
-				table
-					tr
-						th.author: a(href="/user/"+row.author_name)= row.author_name
-						th.r.time= row.ctime
-							if row.edited
-								|
-								| (edited #{row.mtime})
-					tr
-						td.body(colspan=2)!= row.body
-					if user
-						tr
-							td.r.command(colspan=2)
-								if row.author_id === user.user_id
-									| #[a(href="/forum/edit/"+row.post_id) Edit]
-									|
-								| #[a(href="/forum/reply/"+row.post_id) Reply]
+				+forumpost(row,1)
 
 			if user
 				p: a(href="/forum/reply/"+posts[0].post_id) Reply
diff --git a/views/head.pug b/views/head.pug
index ae6bf30..f896ce2 100644
--- a/views/head.pug
+++ b/views/head.pug
@@ -5,6 +5,21 @@ link(rel="icon" href="/favicon.svg")
 link(rel="stylesheet" href="/fonts/fonts.css")
 link(rel="stylesheet" href="/style.css")
 
+mixin forumpost(row,show_buttons)
+	.post
+		.from: a(href="/user/"+row.author_name)= row.author_name
+		.time= row.ctime
+			if row.edited
+				|
+				| (edited #{row.mtime})
+		.body!= row.body
+		if show_buttons && user
+			.edit
+				if row.author_id === user.user_id
+					| #[a(href="/forum/edit/"+row.post_id) Edit]
+					|
+				| #[a(href="/forum/reply/"+row.post_id) Reply]
+
 mixin gametable(status,table,hide_title=0)
 	table
 		tr