Upgrade to nick_site commit f981fa57, adds alerts and inactive sidebar option

[ndcode_site.git] / my_account / index.html.jst

diff --git a/my_account/index.html.jst b/my_account/index.html.jst
index 11b72f1..2433544 100644 (file)
--- a/my_account/index.html.jst
+++ b/my_account/index.html.jst
@@ -66,7 +66,7 @@ return async env => {
 
       if (signed_in_as !== undefined) {
         // signed in
-        p {'Your given names are visible to other users if you comment on our blog. Your email and family name remain private. If your name is one word or does not fit given names/family name pattern, then please enter given names only.'}
+        p/*.mt-3*/ {'Your given names are visible to other users if you comment on our blog. Your email and family name remain private. If your name is one word or does not fit given names/family name pattern, then please enter given names only.'}
 
         div.accordion#accordion(role="tablist" aria-multiselectable="true") {
           div.card#card-1 {
@@ -160,7 +160,7 @@ return async env => {
                     'Save'
                   }
 
-                p.'mt-3'.mb-0#card-1-message(hidden) {}
+                div.alert.alert-danger.'mt-3'.mb-0#card-1-alert(hidden) {}
               }
             }
           }
@@ -215,7 +215,7 @@ return async env => {
                   'Save'
                 }
 
-                p.'mt-3'.mb-0#card-2-message(hidden) {}
+                div.alert.alert-danger.'mt-3'.mb-0#card-2-alert(hidden) {}
               }
             }
           }
@@ -225,7 +225,7 @@ return async env => {
       }
       else {
         // signed out
-        p {'For account maintenance, please click on one of the options below.'}
+        p/*.mt-3*/ {'For account maintenance, please click on one of the options below.'}
 
         let transaction = await env.site.database.Transaction()
         try {
@@ -234,25 +234,26 @@ return async env => {
           let children = await p.get('children')
           let menu = await p.get_json('menu')
   
-          ul.nav.flex-column {
+          nav {
             for (let i = 0; i < menu.length; ++i) {
               let name = menu[i]
               let q = await children.get(name)
-  
-              li.nav-item {
-                a.nav-link(href=`${name}/index.html`) {
-                  table.icon-and-text {
-                    tr {
-                      td {
-                        _out.push(
-                          await env.site.get_min_svg(await q.get_json('icon'))
-                        )
-                      }
-                      td {
-                        span.h2{
-                          `${await q.get_json('title')}`
-                        }
-                      }
+
+              // note: make the row a link to show hover background at edges
+              // (similar to the grid-gutter-background class I use elsewhere)
+              // note: position: relative sets the target for stretched link
+              div.row.flex-nowrap.align-items-center.nav-link-outer.position-relative {
+                div.col.col-icon128 {
+                  div.img-fluid.py-3 {
+                    _out.push(
+                      await env.site.get_min_svg(await q.get_json('icon'))
+                    )
+                  }
+                }
+                div.col.col-text {
+                  a.nav-link-inner.stretched-link(href=`${name}/index.html`) {
+                    span.h2{
+                      `${await q.get_json('title')}`
                     }
                   }
                 }
@@ -285,24 +286,24 @@ return async env => {
             () => {
               let id_accordion = document.getElementById('accordion')
               let id_card_1 = document.getElementById('card-1')
+              let id_card_1_alert = document.getElementById('card-1-alert')
               let id_card_1_collapse = document.getElementById('card-1-collapse')
               let id_card_1_cross = document.getElementById('card-1-cross')
               let id_card_1_form = document.getElementById('card-1-form')
               let id_card_1_heading = document.getElementById('card-1-heading')
               let id_card_1_icon = document.getElementById('card-1-icon')
-              let id_card_1_message = document.getElementById('card-1-message')
               let id_card_1_revert = document.getElementById('card-1-revert')
               let id_card_1_save = document.getElementById('card-1-save')
               let id_card_1_spinner = document.getElementById('card-1-spinner')
               let id_card_1_tick = document.getElementById('card-1-tick')
               let id_card_2 = document.getElementById('card-2')
+              let id_card_2_alert = document.getElementById('card-2-alert')
               let id_card_2_clear = document.getElementById('card-2-clear')
               let id_card_2_collapse = document.getElementById('card-2-collapse')
               let id_card_2_cross = document.getElementById('card-2-cross')
               let id_card_2_form = document.getElementById('card-2-form')
               let id_card_2_heading = document.getElementById('card-2-heading')
               let id_card_2_icon = document.getElementById('card-2-icon')
-              let id_card_2_message = document.getElementById('card-2-message')
               let id_card_2_save = document.getElementById('card-2-save')
               let id_card_2_spinner = document.getElementById('card-2-spinner')
               let id_card_2_tick = document.getElementById('card-2-tick')
@@ -352,7 +353,7 @@ return async env => {
                 id_card_1_tick.hidden = true
                 id_card_1_cross.hidden = true
                 id_card_1_spinner.hidden = true
-                id_card_1_message.hidden = true
+                id_card_1_alert.hidden = true
               }
 
               id_given_names.addEventListener('input', card_1_edited)
@@ -375,7 +376,7 @@ return async env => {
                   id_card_1_tick.hidden = true
                   id_card_1_cross.hidden = true
                   id_card_1_spinner.hidden = true
-                  id_card_1_message.hidden = true
+                  id_card_1_alert.hidden = true
                 }
               )
 
@@ -386,8 +387,8 @@ return async env => {
                   id_card_1_tick.hidden = true
                   id_card_1_cross.hidden = true
                   id_card_1_spinner.hidden = true
-                  // the below causes an ugly flicker, so just keep the message
-                  //id_card_1_message.hidden = true
+                  // the below causes an ugly flicker, so just keep the alert
+                  //id_card_1_alert.hidden = true
 
                   if (!id_card_1_form.checkValidity()) {
                     id_card_1_form.classList.add('was-validated');
@@ -416,10 +417,10 @@ return async env => {
                     id_card_1_cross.hidden = false
                     id_card_1_spinner.hidden = true
 
-                    id_card_1_message.textContent = problem.detail
-                    //id_card_1_message.classList.remove('text-success')
-                    id_card_1_message.classList.add('text-danger')
-                    id_card_1_message.hidden = false
+                    id_card_1_alert.textContent = problem.detail
+                    //id_card_1_alert.classList.remove('alert-success')
+                    //id_card_1_alert.classList.add('alert-danger')
+                    id_card_1_alert.hidden = false
                     return
                   }
                   id_card_1_tick.hidden = false
@@ -438,7 +439,7 @@ return async env => {
                   //id_card_1_tick.hidden = true
                   //id_card_1_cross.hidden = true
                   //id_card_1_spinner.hidden = true
-                  id_card_1_message.hidden = true
+                  id_card_1_alert.hidden = true
                 }
               )
 
@@ -453,7 +454,7 @@ return async env => {
                 id_card_2_tick.hidden = true
                 id_card_2_cross.hidden = true
                 id_card_2_spinner.hidden = true
-                id_card_2_message.hidden = true
+                id_card_2_alert.hidden = true
               }
 
               id_old_password.addEventListener('input', card_2_edited)
@@ -472,7 +473,7 @@ return async env => {
                   id_card_2_tick.hidden = true
                   id_card_2_cross.hidden = true
                   id_card_2_spinner.hidden = true
-                  id_card_2_message.hidden = true
+                  id_card_2_alert.hidden = true
                 }
               )
 
@@ -483,8 +484,8 @@ return async env => {
                   id_card_2_tick.hidden = true
                   id_card_2_cross.hidden = true
                   id_card_2_spinner.hidden = true
-                  // the below causes an ugly flicker, so just keep the message
-                  //id_card_2_message.hidden = true
+                  // the below causes an ugly flicker, so just keep the alert
+                  //id_card_2_alert.hidden = true
 
                   if (!id_card_2_form.checkValidity()) {
                     id_card_2_form.classList.add('was-validated');
@@ -510,10 +511,10 @@ return async env => {
                     id_card_2_cross.hidden = false
                     id_card_2_spinner.hidden = true
 
-                    id_card_2_message.textContent = problem.detail
-                    //id_card_2_message.classList.remove('text-success')
-                    id_card_2_message.classList.add('text-danger')
-                    id_card_2_message.hidden = false
+                    id_card_2_alert.textContent = problem.detail
+                    //id_card_2_alert.classList.remove('alert-success')
+                    //id_card_2_alert.classList.add('alert-danger')
+                    id_card_2_alert.hidden = false
                     return
                   }
                   id_card_2_tick.hidden = false
@@ -529,7 +530,7 @@ return async env => {
                   //id_card_2_tick.hidden = true
                   //id_card_2_cross.hidden = true
                   //id_card_2_spinner.hidden = true
-                  id_card_2_message.hidden = true
+                  id_card_2_alert.hidden = true
                 }
               )
             }