Upgrade to nick_site commit f981fa57, adds alerts and inactive sidebar option
[ndcode_site.git] / contact / index.html.jst
index c12edde..bc04d21 100644 (file)
@@ -36,7 +36,7 @@ return async env => {
     async _out => {
       await breadcrumbs(env, _out)
 
-      p {'Do you require more information, or assistance with integrating the projects on this site? We’d love to hear from you.'}
+      p/*.mt-3*/ {'Do you require more information, or assistance with integrating the projects on this site? We’d love to hear from you.'}
 
       form#form {
         div.row {
@@ -72,8 +72,8 @@ return async env => {
         div.row {
           div.col-md-12 {
             div.form-group {
-              label.form-label(for="message1") {'Message *'}
-              textarea.form-control#message1(placeholder="I would like to..." required rows=6 maxlength=65536) {
+              label.form-label(for="message") {'Message *'}
+              textarea.form-control#message(placeholder="I am interested in..." required rows=6 maxlength=65536) {
                 if (contact_draft)
                   `${contact_draft.message}`
               }
@@ -84,7 +84,7 @@ return async env => {
       }
 
       if (contact_draft !== null)
-        button.btn.btn-success#send-enquiry(type="button") {
+        button.btn.btn-success.mb-3#send-enquiry(type="button") {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_envelope)}
           }
@@ -102,7 +102,7 @@ return async env => {
           'Send enquiry'
         }
       else
-        button.btn.btn-success#send-enquiry(type="button" disabled) {
+        button.btn.btn-success.mb-3#send-enquiry(type="button" disabled) {
           div.icon24-outer.mr-2#icon {
             div.icon24-inner {_out.push(fa_envelope)}
           }
@@ -120,9 +120,9 @@ return async env => {
           'Send enquiry'
         }
 
-      p.'mt-3'.mb-0#message(hidden) {}
+      div.alert#alert(hidden) {}
 
-      p.text-muted.mt-3 {'* These fields are required.'}
+      p.text-muted {'* These fields are required.'}
     },
     // scripts
     async _out => {
@@ -132,6 +132,7 @@ return async env => {
         document.addEventListener(
           'DOMContentLoaded',
           () => {
+            let id_alert = document.getElementById('alert')
             let id_company = document.getElementById('company')
             let id_cross = document.getElementById('cross')
             let id_email = document.getElementById('email')
@@ -140,7 +141,6 @@ return async env => {
             let id_given_names = document.getElementById('given-names')
             let id_icon = document.getElementById('icon')
             let id_message = document.getElementById('message')
-            let id_message1 = document.getElementById('message1')
             let id_send_enquiry = document.getElementById('send-enquiry')
             let id_spinner = document.getElementById('spinner')
             let id_tick = document.getElementById('tick')
@@ -158,14 +158,14 @@ return async env => {
                       id_family_name.value.length === 0 &&
                       id_company.value.length === 0 &&
                       id_email.value.length === 0 &&
-                      id_message1.value.length === 0 ?
+                      id_message.value.length === 0 ?
                       null :
                       {
                         given_names: id_given_names.value.slice(0, 256),
                         family_name: id_family_name.value.slice(0, 256),
                         company: id_company.value.slice(0, 256),
                         email: id_email.value.slice(0, 256).toLowerCase(),
-                        message: id_message1.value.slice(0, 65536)
+                        message: id_message.value.slice(0, 65536)
                       }
                   )
                 }
@@ -180,19 +180,19 @@ return async env => {
                   id_family_name.value.length === 0 &&
                   id_company.value.length === 0 &&
                   id_email.value.length === 0 &&
-                  id_message1.value.length === 0
+                  id_message.value.length === 0
               id_icon.hidden = false
               id_tick.hidden = true
               id_cross.hidden = true
               id_spinner.hidden = true
-              id_message.hidden = true
+              id_alert.hidden = true
             }
 
             id_given_names.addEventListener('input', edited)
             id_family_name.addEventListener('input', edited)
             id_company.addEventListener('input', edited)
             id_email.addEventListener('input', edited)
-            id_message1.addEventListener('input', edited)
+            id_message.addEventListener('input', edited)
 
             id_send_enquiry.addEventListener(
               'click',
@@ -201,8 +201,8 @@ return async env => {
                 id_tick.hidden = true
                 id_cross.hidden = true
                 id_spinner.hidden = true
-                // the below causes an ugly flicker, so just keep the message
-                //id_message.hidden = true
+                // the below causes an ugly flicker, so just keep the alert
+                //id_alert.hidden = true
 
                 if (!id_form.checkValidity()) {
                   id_form.classList.add('was-validated');
@@ -223,7 +223,7 @@ return async env => {
                       family_name: id_family_name.value.slice(0, 256),
                       company: id_company.value.slice(0, 256),
                       email: id_email.value.slice(0, 256).toLowerCase(),
-                      message: id_message1.value.slice(0, 65536)
+                      message: id_message.value.slice(0, 65536)
                     }
                   )
                 }
@@ -233,18 +233,18 @@ return async env => {
                   id_cross.hidden = false
                   id_spinner.hidden = true
 
-                  id_message.textContent = problem.detail
-                  //id_message.classList.remove('text-success')
-                  id_message.classList.add('text-danger')
-                  id_message.hidden = false
+                  id_alert.textContent = problem.detail
+                  id_alert.classList.remove('alert-success')
+                  id_alert.classList.add('alert-danger')
+                  id_alert.hidden = false
                   return
                 }
                 id_tick.hidden = false
                 id_spinner.hidden = true
-                id_message.textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
-                //id_message.classList.add('text-success')
-                id_message.classList.remove('text-danger')
-                id_message.hidden = false
+                id_alert.textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
+                id_alert.classList.add('alert-success')
+                id_alert.classList.remove('alert-danger')
+                id_alert.hidden = false
               }
             )
           }