From: Nick Downing Date: Tue, 25 Jan 2022 02:05:13 +0000 (+1100) Subject: In /my_account/sign_up/index.html.jst use HTML5 hidden attribute, not jquery X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?p=ndcode_site.git;a=commitdiff_plain;h=fa6a1011314e91fe5e88c7e2da935111f4993a3f In /my_account/sign_up/index.html.jst use HTML5 hidden attribute, not jquery --- diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst index a7415f1..d3951cd 100644 --- a/my_account/sign_up/index.html.jst +++ b/my_account/sign_up/index.html.jst @@ -41,19 +41,19 @@ return async env => { div.accordion#accordion(role="tablist" aria-multiselectable="true") { div.card#card-1 { div.card-header#card-1-heading(role="tab") { - span#card-1-tick(style="display: none;") { + span#card-1-tick(hidden) { span.icon-color.pr-3 {_out.push(icon_tick)} } - span#card-1-cross(style="display: none;") { + span#card-1-cross(hidden) { span.icon-color.pr-3 {_out.push(icon_cross)} } - //span#card-1-spinner(style="display: none;") { - // span.icon-color.pr-3 { - // div.spinner-border(role="status") { - // span.sr-only {'Loading...'} - // } - // } - //} + span#card-1-spinner(hidden) { + span.icon-color.pr-3 { + div.spinner-border(role="status") { + span.sr-only {'Loading...'} + } + } + } a.h5(data-toggle="collapse" data-parent="#accordion" href="#card-1-collapse" aria-expanded="true" aria-controls="card-1-collapse") { 'Create account' } @@ -126,19 +126,19 @@ return async env => { else button.btn.btn-success.ml-3#card-1-create-account(type="button" disabled) {'Create account'} - p.'mt-3'.mb-0#card-1-message(style="display: none;") {} + p.'mt-3'.mb-0#card-1-message(hidden) {} } } } div.card#card-2 { div.card-header#card-2-heading(role="tab") { - span#card-2-tick(style="display: none;") { + span#card-2-tick(hidden) { span.icon-color.pr-3 {_out.push(icon_tick)} } - span#card-2-cross(style="display: none;") { + span#card-2-cross(hidden) { span.icon-color.pr-3 {_out.push(icon_cross)} } - span#card-2-spinner(style="display: none;") { + span#card-2-spinner(hidden) { span.icon-color.pr-3 { div.spinner-border(role="status") { span.sr-only {'Loading...'} @@ -154,7 +154,7 @@ return async env => { button.btn.btn-outline-secondary#card-2-back(type="button") {'Back'} button.btn.btn-outline-secondary.ml-3#card-2-resend-email(type="button" disabled) {'Re-send email'} - p.'mt-3'.mb-0#card-2-message(style="display: none;") {} + p.'mt-3'.mb-0#card-2-message(hidden) {} } } } @@ -204,9 +204,9 @@ return async env => { let card_1 = async () => { if (!document.getElementById('form').checkValidity()) { document.getElementById('form').classList.add('was-validated'); - $('#card-1-tick').hide() - $('#card-1-cross').show() - //$('#card-1-spinner').hide() + document.getElementById('card-1-tick').hidden = true + document.getElementById('card-1-cross').hidden = false + //document.getElementById('card-1-spinner').hidden = true return false } document.getElementById('form').classList.remove('was-validated'); @@ -229,34 +229,34 @@ return async env => { catch (error) { let problem = Problem.from(error) - $('#card-1-tick').hide() - $('#card-1-cross').show() - $('#card-1-spinner').hide() + document.getElementById('card-1-tick').hidden = true + document.getElementById('card-1-cross').hidden = false + document.getElementById('card-1-spinner').hidden = true document.getElementById('card-1-message').textContent = problem.detail //document.getElementById('card-1-message').classList.remove('text-success') document.getElementById('card-1-message').classList.add('text-danger') - $('#card-1-message').show() + document.getElementById('card-1-message').hidden = false $('#card-1-collapse').collapse('show') return false } - $('#card-1-tick').show() - $('#card-1-cross').hide() - $('#card-1-spinner').hide() + document.getElementById('card-1-tick').hidden = false + document.getElementById('card-1-cross').hidden = true + document.getElementById('card-1-spinner').hidden = true document.getElementById('card-1-message').textContent = `Your account with email "${details.email}" has been created.` //document.getElementById('card-1-message').classList.add('text-success') document.getElementById('card-1-message').classList.remove('text-danger') - $('#card-1-message').show() + document.getElementById('card-1-message').hidden = false document.getElementById('card-2-resend-email').disabled = false return true } let card_2 = async () => { - $('#card-2-tick').hide() - $('#card-2-cross').hide() - $('#card-2-spinner').show() + document.getElementById('card-2-tick').hidden = true + document.getElementById('card-2-cross').hidden = true + document.getElementById('card-2-spinner').hidden = false document.getElementById('card-2').scrollIntoView() try { @@ -268,26 +268,26 @@ return async env => { catch (error) { let problem = Problem.from(error) - $('#card-2-tick').hide() - $('#card-2-cross').show() - $('#card-2-spinner').hide() + document.getElementById('card-2-tick').hidden = true + document.getElementById('card-2-cross').hidden = false + document.getElementById('card-2-spinner').hidden = true document.getElementById('card-2-message').textContent = problem.detail //document.getElementById('card-2-message').classList.remove('text-success') document.getElementById('card-2-message').classList.add('text-danger') - $('#card-2-message').show() + document.getElementById('card-2-message').hidden = false $('#card-2-collapse').collapse('show') return false } - $('#card-2-tick').show() - $('#card-2-cross').hide() - $('#card-2-spinner').hide() + document.getElementById('card-2-tick').hidden = false + document.getElementById('card-2-cross').hidden = true + document.getElementById('card-2-spinner').hidden = true document.getElementById('card-2-message').textContent = `Email verification link has been sent to "${details.email}". Please check your email for next steps.` //document.getElementById('card-2-message').classList.add('text-success') document.getElementById('card-2-message').classList.remove('text-danger') - $('#card-2-message').show() + document.getElementById('card-2-message').hidden = false return true }