diff --git a/gulp/res/css/nscaptcha.css b/gulp/res/css/nscaptcha.css index 70b6166f..f4c2d7df 100644 --- a/gulp/res/css/nscaptcha.css +++ b/gulp/res/css/nscaptcha.css @@ -1,6 +1,6 @@ img { - width: 150px; - height: 150px; + width: 200px; + height: 200px; image-rendering: crisp-edges; margin: 0 auto; } diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index 5fcb3591..b238080d 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -3,6 +3,7 @@ --spoiler-img: url('/file/spoiler.png'); --audio-img: url('/file/audio.png'); --thumbnail-size: 250px; + --captcha-size: 200px; } body { @@ -599,6 +600,41 @@ details.actions div { padding: 2px 0; } +div.captchafield { + padding: 0px; + grid-template-columns: 1fr 1fr 1fr 1fr; + display: grid; + width: var(--captcha-size); + height: var(--captcha-size); + margin-left: 1px; + box-sizing: border-box; + border: 1px solid var(--font-color); +} + +label.captchachecklabel { + border: 1px solid var(--font-color); + max-width: 50px; + padding: 0px; +} + +label.captchachecklabel input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +label.captchachecklabel input:checked ~ .captchacheckbox { + background-color: var(--font-color); +} + +span.captchacheckbox { + display: flex; + cursor: pointer; + height: 100%; +} + .toggle-summary { padding: 10px; cursor: pointer; @@ -1035,26 +1071,22 @@ input[type="file"] { box-sizing: border-box; } -.captchafield { - grid-template-columns: 1fr 1fr 1fr 1fr; - display: grid; -} - iframe.captcha, iframe.bypass { /*dumb hack cos of noscript wrapping in unstyleable span*/ margin-bottom: -2px; } iframe.bypass { - height: 235px; /*probs needs bigger for google captcha*/ - width: 330px; + height: 320px; /*probs needs bigger for google captcha*/ + width: 450px; } .captcha { border: 1px solid var(--input-borders); background: white; margin-bottom: 1px; - width: 100%; + width: var(--captcha-size); + height: var(--captcha-size); box-sizing: border-box; object-fit: contain; overflow: hidden; diff --git a/gulp/res/js/captcha.js b/gulp/res/js/captcha.js index 655ae226..8e441c23 100644 --- a/gulp/res/js/captcha.js +++ b/gulp/res/js/captcha.js @@ -17,7 +17,6 @@ class CaptchaController { if (captcha.form && captcha.form.dataset.captchaPreload == 'true') { this.loadCaptcha(captcha); } else { - captcha.placeholder = 'focus to load captcha'; captcha.addEventListener('mouseover', () => this.loadCaptcha(captcha), { once: true }); } } @@ -66,13 +65,12 @@ class CaptchaController { const refreshDiv = document.createElement('div'); captchaImg.style.margin = '0 auto'; captchaImg.style.display = 'flex'; + captchaImg.style.width = '100%'; refreshDiv.classList.add('captcharefresh', 'noselect'); refreshDiv.addEventListener('click', (e) => this.refreshCaptchas(e), true); refreshDiv.textContent = '↻'; - field.placeholder = 'loading'; captchaImg.src = '/captcha'; captchaImg.onload = function() { - field.placeholder = ''; captchaDiv.appendChild(captchaImg); captchaDiv.appendChild(refreshDiv); captchaDiv.style.display = ''; diff --git a/gulp/res/js/captchaformsection.js b/gulp/res/js/captchaformsection.js index cb04aacc..2ca30815 100644 --- a/gulp/res/js/captchaformsection.js +++ b/gulp/res/js/captchaformsection.js @@ -6,18 +6,18 @@ var pug_match_html=/["&<>]/;function captchaformsection(locals) {var pug_html = (function (googleRecaptchaEnabled, googleRecaptchaSiteKey) { pug_mixins["captchaformsection"] = pug_interp = function(){ var block = (this && this.block), attributes = (this && this.attributes) || {}; -pug_html = pug_html + "\u003Csection class=\"row\"\u003E\u003Cdiv class=\"label\"\u003E\u003Cspan\u003ECaptcha\u003Cspan class=\"required\"\u003E*\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"col\"\u003E"; +pug_html = pug_html + "\u003Cdetails class=\"row label mr-0\"\u003E\u003Csummary class=\"pv-5\"\u003ECaptcha\u003Cspan class=\"required\"\u003E*\u003C\u002Fspan\u003E\u003C\u002Fsummary\u003E\u003Cdiv class=\"catalog\"\u003E"; if (googleRecaptchaEnabled) { pug_html = pug_html + "\u003Cdiv" + (" class=\"g-recaptcha captchafield\""+pug_attr("data-sitekey", `${googleRecaptchaSiteKey}`, true, false)+" data-theme=\"dark\" data-size=\"compact\" data-callback=\"recaptchaCallback\"") + "\u003E\u003C\u002Fdiv\u003E"; } else { -pug_html = pug_html + "\u003Cnoscript class=\"no-m-p\"\u003E\u003Ciframe class=\"captcha\" src=\"\u002Fcaptcha.html\" width=\"150\" height=\"150\" scrolling=\"no\" loading=\"lazy\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fnoscript\u003E\u003Cdiv class=\"jsonly captcha\" style=\"display:none;\"\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"captchafield\"\u003E"; +pug_html = pug_html + "\u003Cnoscript class=\"no-m-p\"\u003E\u003Ciframe class=\"captcha\" src=\"\u002Fcaptcha.html\" width=\"150\" height=\"150\" scrolling=\"no\" loading=\"lazy\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fnoscript\u003E\u003Cdiv class=\"jsonly captcha\" style=\"display:none\"\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"captchafield noselect\"\u003E"; for(let i = 0; i < 16; i++) { -pug_html = pug_html + "\u003Cinput" + (" type=\"checkbox\" name=\"captcha\""+pug_attr("value", i, true, false)+" style=\"width:100%;height:25px;margin:3px;\"") + "\u002F\u003E"; +pug_html = pug_html + "\u003Clabel class=\"captchachecklabel\"\u003E\u003Cinput" + (" type=\"checkbox\" name=\"captcha\""+pug_attr("value", i, true, false)) + "\u002F\u003E\u003Cspan class=\"captchacheckbox\"\u003E\u003C\u002Fspan\u003E\u003C\u002Flabel\u003E"; } pug_html = pug_html + "\u003C\u002Fdiv\u003E"; } -pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fsection\u003E"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdetails\u003E"; }; pug_mixins["captchaformsection"](); }.call(this, "googleRecaptchaEnabled" in locals_for_with ? diff --git a/views/includes/actionfooter.pug b/views/includes/actionfooter.pug index b4a89d2e..fa25b981 100644 --- a/views/includes/actionfooter.pug +++ b/views/includes/actionfooter.pug @@ -23,5 +23,6 @@ details.toggle-label#actionform input#report(type='text', name='report_reason', placeholder='Report reason' autocomplete='off') .actions h4.no-m-p Captcha: - include ./captcha.pug + .catalog + include ./captcha.pug input(type='submit', value='submit') diff --git a/views/includes/banform.pug b/views/includes/banform.pug index 8b6d9f8d..a105dfe8 100644 --- a/views/includes/banform.pug +++ b/views/includes/banform.pug @@ -10,8 +10,5 @@ form.form-post(action=`/forms/appeal`, enctype='application/x-www-form-urlencode .row .label Message textarea(rows='5' name='message' required) - .row - .label Captcha - span.col - include ./captcha.pug + include ./captchafieldrow.pug input(type='submit', value='submit') diff --git a/views/includes/captcha.pug b/views/includes/captcha.pug index 42ca8707..dea878a9 100644 --- a/views/includes/captcha.pug +++ b/views/includes/captcha.pug @@ -3,8 +3,10 @@ if googleRecaptchaEnabled else noscript.no-m-p iframe.captcha(src='/captcha.html' width='150' height='150' scrolling='no' loading='lazy') - .jsonly.captcha(style='display:none;') - .captchafield + .jsonly.captcha(style='display:none') + .captchafield.noselect - for(let i = 0; i < 16; i++) { - input(type='checkbox' name='captcha' value=i style='width:100%;height:25px;margin:3px;') + label.captchachecklabel + input(type='checkbox' name='captcha' value=i) + span.captchacheckbox - } diff --git a/views/includes/captchafieldrow.pug b/views/includes/captchafieldrow.pug new file mode 100644 index 00000000..a36873fa --- /dev/null +++ b/views/includes/captchafieldrow.pug @@ -0,0 +1,5 @@ +details.row.label.mr-0 + summary.pv-5 Captcha + span.required * + .catalog + include ./captcha.pug diff --git a/views/includes/postform.pug b/views/includes/postform.pug index 390e6281..b8545d9e 100644 --- a/views/includes/postform.pug +++ b/views/includes/postform.pug @@ -65,11 +65,6 @@ section.form-wrapper.flex-center .label Password input(type='password', name='postpassword', placeholder='Password to delete/spoiler/unlink later' maxlength='50') if ((board.settings.captchaMode === 1 && !isThread) || board.settings.captchaMode === 2) && !modview - section.row - .label - span Captcha - span.required * - .col - include ./captcha.pug + include ./captchafieldrow.pug input#submitpost(type='submit', value=`New ${isThread ? 'Reply' : 'Thread'}`) a.toggle-summary.no-decoration(href='#postform') [New Post] diff --git a/views/mixins/captchaformsection.pug b/views/mixins/captchaformsection.pug index 0cb558a1..b2629673 100644 --- a/views/mixins/captchaformsection.pug +++ b/views/mixins/captchaformsection.pug @@ -1,7 +1,2 @@ mixin captchaformsection() - section.row - .label - span Captcha - span.required * - .col - include ../includes/captcha.pug + include ../includes/captchafieldrow.pug diff --git a/views/pages/bypass.pug b/views/pages/bypass.pug index abd8a990..0996899a 100644 --- a/views/pages/bypass.pug +++ b/views/pages/bypass.pug @@ -9,10 +9,8 @@ block content if message p.title #{message} form.form-post(action='/forms/blockbypass' method='POST' data-captcha-preload='true') - .row - .label Captcha - span.col - include ../includes/captcha.pug + .catalog + include ../includes/captcha.pug if minimal input(type='hidden' name='minimal' value='1') input(type='submit', value='Submit') diff --git a/views/pages/changepassword.pug b/views/pages/changepassword.pug index 99e5331c..a33289d8 100644 --- a/views/pages/changepassword.pug +++ b/views/pages/changepassword.pug @@ -19,10 +19,7 @@ block content .row .label Confirm New Password input(type='password', name='newpasswordconfirm', maxlength='100' required) - .row - .label Captcha - span.col - include ../includes/captcha.pug + include ../includes/captchafieldrow.pug input(type='submit', value='Change Password') p: a(href='/login.html') Login if enableUserAccountCreation diff --git a/views/pages/create.pug b/views/pages/create.pug index 33655850..1ba3913d 100644 --- a/views/pages/create.pug +++ b/views/pages/create.pug @@ -19,9 +19,6 @@ block content .row .label Tags textarea(name='tags' placeholder='Newline separated, max 10') - .row - .label Captcha - span.col - include ../includes/captcha.pug + include ../includes/captchafieldrow.pug input(type='submit', value='submit') diff --git a/views/pages/register.pug b/views/pages/register.pug index d70ed1c5..98bbcc9f 100644 --- a/views/pages/register.pug +++ b/views/pages/register.pug @@ -16,10 +16,7 @@ block content .row .label Confirm Password input(type='password', name='passwordconfirm', maxlength='100' required) - .row - .label Captcha - span.col - include ../includes/captcha.pug + include ../includes/captchafieldrow.pug input(type='submit', value='Register') p: a(href='/login.html') Login p: a(href='/changepassword.html') Change Password