post layout, postform and ban page improvements

gulp/res/css/style.css

@@ -500,6 +500,10 @@ textarea {
 	clear: both;
 }
 
+.muted {
+	color: #000c;
+}
+
 .right {
 	float: right;
 }
@@ -542,30 +546,12 @@ input[type="file"] {
 	background: white;
 }
 
-.open-postform[open] {
-	z-index: 1;
-	position: fixed;
-	top: 4px;
-	right: 5px;
-}
-
-.open-postform[open] + .openpadding {
-	height: 39px;
-}
-
-.open-postform[open] summary:before {
-	content: "Close";
-}
-
-.open-postform summary:before {
-	content: "Open Post Form";
-}
-
 #postform {
+	display: none;
 	max-width: calc(100% - 10px);
 	max-height: calc(100% - 50px);
 	position: fixed;
-	top: 45px;
+	top: 5px;
 	right: 5px;
 	background-color: #D6DAF0;
 	border: 1px solid #b7c5d9;

helpers/captcha/captchaverify.js

@@ -52,7 +52,7 @@ module.exports = async (req, res, next) => {
 	//it was correct, so delete the file, the cookie and reset their quota
 	res.clearCookie('captchaid');
 	await Promise.all([
-		Captcha.resetQuota(res.locals.ip),
+		Captchas.resetQuota(res.locals.ip),
 		remove(`${uploadDirectory}captcha/${captchaId}.jpg`)
 	]);
 

views/includes/postform.pug

@@ -1,63 +1,62 @@
 - const isThread = thread != null
 section.form-wrapper.flex-center
-	details.toggle-label.open-postform
-		summary.toggle-summary
-		div#postform
-			form.form-post(action=`/forms/board/${board._id}/post`, enctype='multipart/form-data', method='POST')
-				input(type='hidden' name='thread' value=isThread ? thread.postId : null)
-				unless board.settings.forceAnon
-					section.postform-row
-						.postform-label Name
-						input(type='text', name='name', placeholder=board.settings.defaultName autocomplete='off' maxlength='50')
-					section.postform-row
-						.postform-label Subject
-							if !isThread && board.settings.forceOPSubject
-								.required *
-						input(type='text', name='subject', autocomplete='off' maxlength='50' required=!isThread && board.settings.forceOPSubject)
-					section.postform-row
-						.postform-label Email
-						input(type='text', name='email', autocomplete='off' maxlength='50')
-				else 
-					section.postform-row
-						.postform-label Sage
-						label.postform-style.ph-5
-							input(type='checkbox', name='email', value='sage')
-							| Sage
-					if !isThread
-						section.postform-row
-							.postform-label Subject
-								if board.settings.forceOPSubject
-									.required *
-							input(type='text', name='subject', autocomplete='off' maxlength='50' required=board.settings.forceOPSubject)
+	a.toggle-summary(href='#postform') Open Postform
+	form.form-post#postform(action=`/forms/board/${board._id}/post`, enctype='multipart/form-data', method='POST')
+		input(type='hidden' name='thread' value=isThread ? thread.postId : null)
+		unless board.settings.forceAnon
+			section.postform-row
+				.postform-label Name
+				input(type='text', name='name', placeholder=board.settings.defaultName autocomplete='off' maxlength='50')
+				a.close.postform-style.ml-1(href='#!') X
+			section.postform-row
+				.postform-label Subject
+					if !isThread && board.settings.forceOPSubject
+						.required *
+				input(type='text', name='subject', autocomplete='off' maxlength='50' required=!isThread && board.settings.forceOPSubject)
+			section.postform-row
+				.postform-label Email
+				input(type='text', name='email', autocomplete='off' maxlength='50')
+		else 
+			section.postform-row
+				.postform-label Sage
+				label.postform-style.ph-5
+					input(type='checkbox', name='email', value='sage')
+					| Sage
+				a.close.postform-style.ml-1(href='#!') X
+			if !isThread
 				section.postform-row
-					.postform-label Message
-						if !isThread && board.settings.forceOPMessage
+					.postform-label Subject
+						if board.settings.forceOPSubject
 							.required *
-					textarea(name='message', rows='5', autocomplete='off' maxlength='4000' required=!isThread && board.settings.forceOPMessage)
-				if board.settings.maxFiles > 0
-					section.postform-row
-						.postform-label Files
-							if !isThread && board.settings.forceOPFile
-								.required *
-						input(type='file', name='file' multiple required=!isThread && board.settings.forceOPFile)
-						if board.settings.userPostSpoiler
-							label.postform-style.ph-5.ml-1
-								input(type='checkbox', name='spoiler', value='true')
-								| Spoiler
-				if board.settings.userPostSpoiler || board.settings.userPostDelete || board.settings.userPostUnlink
-					section.postform-row
-						.postform-label Password
-						input(type='password', name='password', autocomplete='off' placeholder='password to delete/spoiler/unlink later' maxlength='50')
-				if board.settings.captcha
-					section.postform-row
-						.postform-label Captcha
-							.required *
-						.postform-col
-							iframe.captcha(src='/captcha.html' width=200 height=110 scrolling='no')
-							input(type='text', name='captcha', autocomplete='off' placeholder='captcha text' maxlength='6' required)
-				if !isThread && ((board.settings.forceOPFile && board.settings.maxFiles > 0) || board.settings.forceOPMessage || board.settings.forceOPSubject)
-					small
-						span.required *
-						|  = required field
-				input(type='submit', value=`New ${isThread ? 'Reply' : 'Thread'}`)
-	.openpadding
+					input(type='text', name='subject', autocomplete='off' maxlength='50' required=board.settings.forceOPSubject)
+		section.postform-row
+			.postform-label Message
+				if !isThread && board.settings.forceOPMessage
+					.required *
+			textarea(name='message', rows='5', autocomplete='off' maxlength='4000' required=!isThread && board.settings.forceOPMessage)
+		if board.settings.maxFiles > 0
+			section.postform-row
+				.postform-label Files
+					if !isThread && board.settings.forceOPFile
+						.required *
+				input(type='file', name='file' multiple required=!isThread && board.settings.forceOPFile)
+				if board.settings.userPostSpoiler
+					label.postform-style.ph-5.ml-1
+						input(type='checkbox', name='spoiler', value='true')
+						| Spoiler
+		if board.settings.userPostSpoiler || board.settings.userPostDelete || board.settings.userPostUnlink
+			section.postform-row
+				.postform-label Password
+				input(type='password', name='password', autocomplete='off' placeholder='password to delete/spoiler/unlink later' maxlength='50')
+		if board.settings.captcha
+			section.postform-row
+				.postform-label Captcha
+					.required *
+				.postform-col
+					iframe.captcha(src='/captcha.html' width=200 height=110 scrolling='no')
+					input(type='text', name='captcha', autocomplete='off' placeholder='captcha text' maxlength='6' required)
+		if !isThread && ((board.settings.forceOPFile && board.settings.maxFiles > 0) || board.settings.forceOPMessage || board.settings.forceOPSubject)
+			small
+				span.required *
+				|  = required field
+		input(type='submit', value=`New ${isThread ? 'Reply' : 'Thread'}`)

views/mixins/post.pug

@@ -1,7 +1,7 @@
 mixin post(post, truncate, manage=false, globalmanage=false)
 	.anchor(id=post.postId)
 	article(class=`post-container ${post.thread ? '' : 'op'}`)
-		- const postURL = `/${post.board}/thread/${post.thread || post.postId}.html#${post.postId}`;
+		- const postURL = `/${post.board}/thread/${post.thread || post.postId}.html`;
 		header.post-info
 			label
 				if globalmanage
@@ -42,7 +42,11 @@ mixin post(post, truncate, manage=false, globalmanage=false)
 				if post.userId
 					span.user-id(style=`background: #${post.userId}`) #{post.userId}
 					| 
-			span: a(href=postURL) No.#{post.postId}
+			span: a(href=`${postURL}#${post.postId}`) No.
+			span: a(href=`${postURL}#postform`) #{post.postId}
+			if !post.thread
+				|  
+				span: a(href=`/${post.board}/thread/${post.thread || post.postId}.html#postform`) [Reply]
 		.post-data
 			if post.files.length > 0
 				.post-files
@@ -79,13 +83,15 @@ mixin post(post, truncate, manage=false, globalmanage=false)
 						}
 					pre.post-message !{truncatedMessage}
 					if truncatedMessage !== post.message
-						blockquote Message too long. #[a(href=postURL) View the full text]
+						blockquote.muted Message too long. #[a(href=`${postURL}#${post.postId}`) View the full text]
 				else 
 					pre.post-message !{post.message}
+			if !post.message && post.files.length === 0
+				blockquote.muted Post file(s) unlinked
 			if post.banmessage
-				blockquote.banmessage USER WAS BANNED FOR THIS POST (#{post.banmessage})
+				blockquote.banmessage USER BANNED FOR THIS POST (#{post.banmessage || 'No reason specified'})
 			if post.omittedposts || post.omittedimages
-				blockquote #{post.omittedposts} post(s)#{post.omittedimages > 0 ? ' and '+post.omittedimages+' image(s)' : ''} omitted. #[a(href=postURL) View the full thread]
+				blockquote.muted #{post.omittedposts} post(s)#{post.omittedimages > 0 ? ' and '+post.omittedimages+' image(s)' : ''} omitted. #[a(href=`${postURL}#${post.postId}`) View the full thread]
 			if post.backlinks && post.backlinks.length > 0
 				.replies Replies: 
 					each backlink in post.backlinks

views/pages/ban.pug

@@ -6,8 +6,11 @@ block head
 
 block content
 	h1.board-title Banned!
-	h4.board-description Bans currently in place against your IP:
-	hr(size=1)
-	for ban in bans
-		+ban(ban)
-		hr(size=1)
+	.table-container.flex-center.mv-10
+		table.table-body
+			tr.table-head
+				th Bans currently in place against your IP:
+			for ban in bans
+				tr.table-row
+					td
+						+ban(ban)