diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index 0cf368fa..0d91a310 100644 --- a/gulp/res/css/style.css +++ b/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 { diff --git a/gulp/res/js/counter.js b/gulp/res/js/counter.js new file mode 100644 index 00000000..eaab1c83 --- /dev/null +++ b/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(); + } + }); + + } + +}); diff --git a/views/includes/postform.pug b/views/includes/postform.pug index f681ba18..ebfc7a4e 100644 --- a/views/includes/postform.pug +++ b/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'}`) diff --git a/views/pages/managebanners.pug b/views/pages/managebanners.pug index d9b019f4..8d34308e 100644 --- a/views/pages/managebanners.pug +++ b/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 | |