From 4a61160901335868284462323aac8b5412a17c17 Mon Sep 17 00:00:00 2001 From: Nick Downing Date: Tue, 1 Feb 2022 14:36:32 +1100 Subject: [PATCH] Simplify navbar with .extend-background class so we can use only one container --- _lib/navbar.jst | 170 +++++++++++++++++-------------------- css/bootstrap/_custom.scss | 9 ++ 2 files changed, 89 insertions(+), 90 deletions(-) diff --git a/_lib/navbar.jst b/_lib/navbar.jst index be95539..2fe089d 100644 --- a/_lib/navbar.jst +++ b/_lib/navbar.jst @@ -5,7 +5,7 @@ let XDate = require('xdate') let arrays_equal = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]) - + return async (env, head, body, scripts) => { //let cart = await _require('/online_store/cart.jst') let fa_arrow_circle_left = await env.site.get_min_svg('/_svg/fa_arrow-circle-left.svg') @@ -100,15 +100,11 @@ return async (env, head, body, scripts) => { // component_titles[i] corresponds to component_names[i - 1], i >= 1 env.component_names = component_names env.component_titles = component_titles - console.log('cn', component_names) - console.log('ct', component_titles) // note: menu_titles.length === menu_names.length + 1 // menu_titles[0] corresponds to /, is 'Home' or similar // menu_titles[i] corresponds to menu_names[i - 1], i >= 1a // (navbar has Home appearing at same level as its immediate children) - console.log('mn', menu_names) - console.log('mt', menu_titles) await page( env, @@ -192,102 +188,96 @@ return async (env, head, body, scripts) => { // } //} } - } - } - nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.scrollbar-fix { - div.container { - //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.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(href=menu_prefix_path) { - `${menu_titles[i]}` - span.sr-only {' (current)'} + nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.extend-background { + //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.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(href=menu_prefix_path) { + `${menu_titles[i]}` + span.sr-only {' (current)'} + } } - } - else - li.nav-item { - a.nav-link(href=menu_prefix_path) { - `${menu_titles[i]}` + else + li.nav-item { + a.nav-link(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' + // } + //} } - //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 { - a.nav-link#navbar-give-feedback(href="#") {'Give feedback'} + ul.navbar-nav.ml-auto { + li.nav-item { + a.nav-link#navbar-give-feedback(href="#") {'Give feedback'} + } } } } - } - } - div.scrollbar-fix { - div.container { + await body(_out) - } - } - footer.scrollbar-fix { - div.container { - 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/ndcode_site.git") { - 'open source' - } - ' and licensed under a ' + + footer.extend-background { a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") { - 'Creative Commons Attribution-ShareAlike 3.0 Unported License' + 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/ndcode_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' + } + '.' } - '.' - } - p {'Example code fragments embedded within the text are placed in the public domain unless otherwise noted.'} + p {'Example code fragments embedded within the text are placed in the public domain unless otherwise noted.'} - p {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`} + p {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`} + } } } diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss index 53b4834..58393b7 100644 --- a/css/bootstrap/_custom.scss +++ b/css/bootstrap/_custom.scss @@ -12,6 +12,15 @@ $footer-link-hover-color: darken($footer-link-color, 10%); padding-left: calc(100vw - 100%); } +// place a container div around entire page, and then use this +// to make the background on navbar or footer appear full-width +.extend-background { + margin-left: calc(-.5 * (100vw - 100%)); + margin-right: calc(-.5 * (100vw - 100%)); + padding-left: calc(.5 * (100vw - 100%)); + padding-right: calc(.5 * (100vw - 100%)); +} + // needed for svg icons inside buttons, card headers, etc // creates an inline element with correct width but no height // the svg is positioned within this to vertically centre on a capital letter -- 2.34.1