Consistency changes wrt ndcode_site, remove scrollbar-fix
authorNick Downing <nick@ndcode.org>
Tue, 1 Feb 2022 09:21:51 +0000 (20:21 +1100)
committerNick Downing <nick@ndcode.org>
Sat, 12 Feb 2022 01:53:36 +0000 (12:53 +1100)
_lib/navbar.jst
_lib/page.jst
css/bootstrap/_custom.scss

index 411c332..d324fbf 100644 (file)
@@ -127,146 +127,144 @@ return async (env, head, body, scripts) => {
       let index = env.parsed_url.pathname.indexOf('/', 1)
       let dir = index === -1 ? '' : env.parsed_url.pathname.slice(1, index)
 
-      div.scrollbar-fix {
-        div.container-fluid {
-          div.row {
-            div.'col-sm-6'.'col-md-4'.'col-lg-3'.'col-xxl-2'.sidebar {
-              div.'mt-1'.mb-4 {
-                div(style="width: 128px; height: 128px;") {
-                  _out.push(avatar_maker)
-                }
-                b.h1 {
-                  `${site_title}`
-                }
+      div.container-fluid {
+        div.row {
+          div.'col-sm-6'.'col-md-4'.'col-lg-3'.'col-xxl-2'.sidebar {
+            div.'mt-1'.mb-4 {
+              div(style="width: 128px; height: 128px;") {
+                _out.push(avatar_maker)
+              }
+              b.h1 {
+                `${site_title}`
               }
+            }
 
-              div.mb-2 {
-                span#navbar-signed-in-status {
-                  if (signed_in_as !== undefined)
-                    'Signed in.'
-                  else
-                    'Signed out.'
-                }
-                ' '
-                if (signed_in_as !== undefined)
-                  a#navbar-sign-in(href="#" hidden) {'Sign in'}
-                else
-                  a#navbar-sign-in(href="#") {'Sign in'}
-                ' '
-                if (signed_in_as !== undefined)
-                  a#navbar-sign-up(href="/my_account/sign_up/index.html" hidden) {'Sign up'}
-                else
-                  a#navbar-sign-up(href="/my_account/sign_up/index.html") {'Sign up'}
-                ' '
+            div.mb-2 {
+              span#navbar-signed-in-status {
                 if (signed_in_as !== undefined)
-                  a#navbar-sign-out(href="#") {'Sign out'}
+                  'Signed in.'
                 else
-                  a#navbar-sign-out(href="#" hidden) {'Sign out'}
+                  'Signed out.'
               }
+              ' '
+              if (signed_in_as !== undefined)
+                a#navbar-sign-in(href="#" hidden) {'Sign in'}
+              else
+                a#navbar-sign-in(href="#") {'Sign in'}
+              ' '
+              if (signed_in_as !== undefined)
+                a#navbar-sign-up(href="/my_account/sign_up/index.html" hidden) {'Sign up'}
+              else
+                a#navbar-sign-up(href="/my_account/sign_up/index.html") {'Sign up'}
+              ' '
+              if (signed_in_as !== undefined)
+                a#navbar-sign-out(href="#") {'Sign out'}
+              else
+                a#navbar-sign-out(href="#" hidden) {'Sign out'}
+            }
 
-              form.mb-4(action="/search/index.html") {
-                div.input-group {
-                  input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
-                  div.input-group-append {
-                    button.btn.btn-outline-secondary#navbar-search-button(type="submit") {
-                      div.icon24-outer {
-                        div.icon24-inner {_out.push(fa_search)}
-                      }
+            form.mb-4(action="/search/index.html") {
+              div.input-group {
+                input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
+                div.input-group-append {
+                  button.btn.btn-outline-secondary#navbar-search-button(type="submit") {
+                    div.icon24-outer {
+                      div.icon24-inner {_out.push(fa_search)}
                     }
                   }
                 }
               }
+            }
 
-              //nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.scrollbar-fix {
-                //a.navbar-brand(href="#") {'Navbar'}
-                //' '
-                //button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
-                //  span.navbar-toggler-icon {}
-                //}
-                //div.collapse.navbar-collapse#navbarSupportedContent {
-                  ul.nav.flex-column { //ul.navbar-nav.mr-auto {
-                    // the active entry in the navbar bar is based on which top-level
-                    // page we are under, even if we are not directly on that page
-                    // but one of its children, this may be unexpected as the active
-                    // entry does not highlight on hover, but you can still click it;
-                    // we determine here the path to the corresponding top-level page
-                    let component_prefix = component_names.slice(0, 1)
-      
-                    for (let i = 0; i < menu_titles.length; ++i) {
-                      // construct path to the top-level page about to be described
-                      let menu_prefix =
-                        i == 0 ? [] : [menu_names[i - 1]]
-                      let menu_prefix_path =
-                        menu_prefix.map(name => '/' + name).join('') + '/index.html'
-      
-                      if (arrays_equal(menu_prefix, component_prefix))
-                        li.nav-item.active {
-                          a.nav-link.nav-link2(href=menu_prefix_path) {
-                            `${menu_titles[i]}`
-                            span.sr-only {' (current)'}
-                          }
+            //nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.scrollbar-fix {
+              //a.navbar-brand(href="#") {'Navbar'}
+              //' '
+              //button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
+              //  span.navbar-toggler-icon {}
+              //}
+              //div.collapse.navbar-collapse#navbarSupportedContent {
+                ul.nav.flex-column { //ul.navbar-nav.mr-auto {
+                  // the active entry in the navbar bar is based on which top-level
+                  // page we are under, even if we are not directly on that page
+                  // but one of its children, this may be unexpected as the active
+                  // entry does not highlight on hover, but you can still click it;
+                  // we determine here the path to the corresponding top-level page
+                  let component_prefix = component_names.slice(0, 1)
+    
+                  for (let i = 0; i < menu_titles.length; ++i) {
+                    // construct path to the top-level page about to be described
+                    let menu_prefix =
+                      i == 0 ? [] : [menu_names[i - 1]]
+                    let menu_prefix_path =
+                      menu_prefix.map(name => '/' + name).join('') + '/index.html'
+    
+                    if (arrays_equal(menu_prefix, component_prefix))
+                      li.nav-item.active {
+                        a.nav-link.nav-link2(href=menu_prefix_path) {
+                          `${menu_titles[i]}`
+                          span.sr-only {' (current)'}
                         }
-                      else
-                        li.nav-item {
-                          a.nav-link.nav-link2(href=menu_prefix_path) {
-                            `${menu_titles[i]}`
-                          }
+                      }
+                    else
+                      li.nav-item {
+                        a.nav-link.nav-link2(href=menu_prefix_path) {
+                          `${menu_titles[i]}`
                         }
-                    }
-                    //li.nav-item.dropdown {
-                    //  a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") {
-                    //    'Dropdown'
-                    //  }
-                    //  div.dropdown-menu(aria-labelledby="navbarDropdown") {
-                    //    a.dropdown-item(href="#") {
-                    //      'Action'
-                    //    }
-                    //    ' '
-                    //    a.dropdown-item(href="#") {
-                    //      'Another action'
-                    //    }
-                    //    div.dropdown-divider {}
-                    //    a.dropdown-item(href="#") {
-                    //      'Something else here'
-                    //    }
-                    //  }
-                    //}
-                    //li.nav-item {
-                    //  a.nav-link.disabled {
-                    //    'Disabled'
-                    //  }
-                    //}
-                  //}
-                  //ul.navbar-nav.ml-auto {
-                    li.nav-item.mt-4 {
-                      a.nav-link.nav-link2#navbar-give-feedback(href="#") {'Give feedback'}
-                    }
+                      }
                   }
+                  //li.nav-item.dropdown {
+                  //  a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") {
+                  //    'Dropdown'
+                  //  }
+                  //  div.dropdown-menu(aria-labelledby="navbarDropdown") {
+                  //    a.dropdown-item(href="#") {
+                  //      'Action'
+                  //    }
+                  //    ' '
+                  //    a.dropdown-item(href="#") {
+                  //      'Another action'
+                  //    }
+                  //    div.dropdown-divider {}
+                  //    a.dropdown-item(href="#") {
+                  //      'Something else here'
+                  //    }
+                  //  }
+                  //}
+                  //li.nav-item {
+                  //  a.nav-link.disabled {
+                  //    'Disabled'
+                  //  }
+                  //}
                 //}
+                //ul.navbar-nav.ml-auto {
+                  li.nav-item.mt-4 {
+                    a.nav-link.nav-link2#navbar-give-feedback(href="#") {'Give feedback'}
+                  }
+                }
               //}
-            }
+            //}
+          }
 
-            div.col-xl-8 {
-              await body(_out)
+          div.col-xl-8 {
+            await body(_out)
 
-              footer.page-footer.grid-gutter-background.py-5 {
-                a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
-                  img(alt="Creative Commons License" style="border-width:0;" src="/images/by-sa_3.0_88x31.png") {}
+            footer.page-footer.grid-gutter-background.py-5 {
+              a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
+                img(alt="Creative Commons License" style="border-width:0;" src="/images/by-sa_3.0_88x31.png") {}
+              }
+              p {
+                'This website is '
+                a(href="https://git.ndcode.org/public/nick_site.git") {
+                  'open source'
                 }
-                p {
-                  'This website is '
-                  a(href="https://git.ndcode.org/public/nick_site.git") {
-                    'open source'
-                  }
-                  ' and licensed under a '
-                  a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
-                    'Creative Commons Attribution-ShareAlike 3.0 Unported License'
-                  }
-                  '.'
+                ' and licensed under a '
+                a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
+                  'Creative Commons Attribution-ShareAlike 3.0 Unported License'
                 }
-      
-                p.mb-0 {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`}
+                '.'
               }
+    
+              p.mb-0 {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`}
             }
           }
         }
index 33d7bfc..d07619c 100644 (file)
@@ -50,7 +50,7 @@ return async (env, head, body, scripts) => {
 
       await head(_out) //title {'Hello, world!'}
     }
-    body(style="overflow-x: hidden;") {
+    body {
       await body(_out) //h1 {'Hello, world!'}
 
       // Optional JavaScript; choose one of the two!
index 8030696..2579812 100644 (file)
@@ -9,7 +9,10 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
 // (this is useful for modals since scrollbar disappears during a modal)
 // note: intended to be used with div.container which adds padding for
 // media sizes sm and above, don't do it for xs to avoid losing content
-.scrollbar-fix {
+.scrollbar-fix-outer {
+  overflow-x: hidden;
+}
+.scrollbar-fix-inner {
   @include media-breakpoint-up(sm) {
     margin-right: calc(100% - 100vw);
   }