messagebox counter

gulp/res/css/style.css

@@ -110,7 +110,7 @@ pre {
 	margin-left: 1px;
 }
 .ml-5 {
-	margin-left: 5px;
+	margin-left: 5px!important;
 }
 .mr-1 {
 	margin-right: 1px!important;
@@ -778,7 +778,11 @@ input:invalid, textarea:invalid {
 	line-height: 3em;
 }
 
-input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], textarea, select {
+input[type="button"][disabled] {
+	opacity: 0.5;
+}
+
+input[type="button"], input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], textarea, select {
 	border: 1px solid var(--input-borders);
 	background: var(--input-background);
 	color: var(--input-color);
@@ -857,9 +861,11 @@ iframe.captcha {
 	min-width: 80px;
 	background: var(--label-color);
 	display: flex;
-	align-items: center;
 	font-weight: bold;
 	margin-right: 1px;
+	align-items: start;
+	flex-direction: column;
+	justify-content: center;
 }
 
 hr {
@@ -934,12 +940,8 @@ table.boardtable td:nth-child(6) {
 	visibility: hidden!important;
 }
 
-.db {
-	display: block;
-}
-
-.wp {
-	white-space: pre-wrap;
+.di {
+	display: inline;
 }
 
 table, .boardtable {

gulp/res/js/counter.js

@@ -0,0 +1,39 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+
+	const messageBox = document.getElementById('message');
+
+	if (messageBox) {
+		const messageBoxLabel = messageBox.previousSibling;
+		const maxLength = messageBox.getAttribute('maxlength');
+		let currentLength = messageBox.value.length;
+		const counter = document.createElement('small');
+		messageBoxLabel.appendChild(counter);
+
+		const updateCounter = () => {
+			counter.innerText = `(${currentLength}/${maxLength})`;
+			if (currentLength >= maxLength) {
+				counter.style.color = 'red';
+			} else {
+				counter.removeAttribute('style');
+			}
+		}
+
+		const updateLength = function(e) {
+			console.log('updating length')
+			currentLength = messageBox.value.length;
+			updateCounter();
+		}
+
+		updateCounter();
+
+		messageBox.addEventListener('input', updateLength);
+
+		window.addEventListener('addPost', function(e) {
+	        if (!e.detail.hover) { //catch own posts
+				updateCounter();
+	        }
+		});
+
+	}
+
+});

views/includes/postform.pug

@@ -11,9 +11,10 @@ section.form-wrapper.flex-center
 				input.mr-1(type='text', name='name', placeholder=board.settings.defaultName autocomplete='off' maxlength='50')
 				a.close.postform-style(href='#!') X
 			section.row
-				.label Subject
-					if subjectRequired
-						.required *
+				.label
+					span Subject
+						if subjectRequired
+							span.required *
 				input(type='text', name='subject', autocomplete='off' maxlength='50' required=subjectRequired)
 			section.row
 				.label Email
@@ -26,22 +27,24 @@ section.form-wrapper.flex-center
 					| Sage
 				a.close.postform-style(href='#!') X
 			section.row
-				.label Subject
-					if subjectRequired
-						.required *
+				.label
+					span Subject
+						if subjectRequired
+							span.required *
 				input(type='text', name='subject', autocomplete='off' maxlength='50' required=subjectRequired)
 		section.row
-			.label Message
-				if messageRequired
-					.required *
+			.label
+				span Message
+					if messageRequired
+						span.required *
 			textarea#message(name='message', rows='5', autocomplete='off' maxlength=globalLimits.messageLength.max required=messageRequired)
 		if board.settings.maxFiles > 0
 			- const maxFiles = board.settings.maxFiles;
 			section.row
-				.label.wp.db
-					| File#{maxFiles > 1 ? 's' : ''}
-					if fileRequired
-						span.required *
+				.label
+					span File#{maxFiles > 1 ? 's' : ''}
+						if fileRequired
+							span.required *
 					if maxFiles > 1
 						|
 						|
@@ -59,8 +62,9 @@ section.form-wrapper.flex-center
 				input(type='password', name='password', autocomplete='off' placeholder='password to delete/spoiler/unlink later' maxlength='50')
 		if (board.settings.captchaMode === 1 && !isThread) || board.settings.captchaMode === 2
 			section.row
-				.label Captcha
-					.required *
+				.label
+					span Captcha
+						span.required *
 				.col
 					include ./captcha.pug
 		input#submitpost(type='submit', value=`New ${isThread ? 'Reply' : 'Thread'}`)

views/pages/managebanners.pug

@@ -17,9 +17,9 @@ block content
 			input(type='hidden' name='_csrf' value=csrf)
 			.row
 				- const maxFiles = globalLimits.bannerFiles.max;
-				.label.wp.db
-					| Banner#{maxFiles > 1 ? 's' : ''}
-					span.required *
+				.label
+					span Banner#{maxFiles > 1 ? 's' : ''}
+						span.required *
 					if maxFiles > 1
 						|  
 						|