From 1b176759f61e037c3b7f91c498d8782e5a7cff6b Mon Sep 17 00:00:00 2001 From: Nick Downing Date: Tue, 1 Feb 2022 14:20:37 +1100 Subject: [PATCH] Improved scrollbar-fix-(inner|outer) classes, inner class expands content to avoid break in navbar during modal dialog, outer class avoids horizontal scrollbar --- _lib/navbar.jst | 256 +++++++++++++++++++------------------ css/bootstrap/_custom.scss | 16 ++- 2 files changed, 140 insertions(+), 132 deletions(-) diff --git a/_lib/navbar.jst b/_lib/navbar.jst index 2fe089d..edd7c80 100644 --- a/_lib/navbar.jst +++ b/_lib/navbar.jst @@ -127,156 +127,158 @@ 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 { - div.row.align-items-center.py-3 { - div.col-sm-8 { - _out.push(logo_large) - } - div.'col-sm-4' { - div.'mb-1'.text-right { - span#navbar-signed-in-status { + div.scrollbar-fix-outer { + div.scrollbar-fix-inner { + div.container { + div.row.align-items-center.py-3 { + div.col-sm-8 { + _out.push(logo_large) + } + div.'col-sm-4' { + div.'mb-1'.text-right { + span#navbar-signed-in-status { + if (signed_in_as !== undefined) + 'Signed in.' //`Signed in as ${signed_in_as}.` + else + 'Browsing as guest.' + } + ' ' + 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) - 'Signed in.' //`Signed in as ${signed_in_as}.` + a#navbar-sign-out(href="#") {'Sign out'} else - 'Browsing as guest.' + a#navbar-sign-out(href="#" hidden) {'Sign 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(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(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)} + } } } } } } - } - //div.'col-sm-1'.vbottom { - // // a nested div is used to avoid hover colour on the padding - // div.nav-li-a(style="text-align: center;") { - // a(href="/online_store/view_cart/index.html") { - // div.cart-icon { - // _out.push(icon_cart_small) - // } - // div.cart-number { - // div.cart-circle { - // `${(env.cart.items || []).length}` - // } - // } - // } - // } - //} - } - 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.'col-sm-1'.vbottom { + // // a nested div is used to avoid hover colour on the padding + // div.nav-li-a(style="text-align: center;") { + // a(href="/online_store/view_cart/index.html") { + // div.cart-icon { + // _out.push(icon_cart_small) + // } + // div.cart-number { + // div.cart-circle { + // `${(env.cart.items || []).length}` + // } + // } + // } + // } + //} } - 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'} + } } } } - } - await body(_out) + await body(_out) - footer.extend-background { - 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 58393b7..c04669a 100644 --- a/css/bootstrap/_custom.scss +++ b/css/bootstrap/_custom.scss @@ -5,11 +5,17 @@ $footer-link-hover-color: darken($footer-link-color, 10%); // apply this to a div inside the body tag // prevents page shifting to left/right as scrollbar appears/disappears -// it works by calculating the width of the scrollbar and then adding -// the corresponding amount of padding to left to keep things centered -// see https://stackoverflow.com/questions/45524214/how-do-i-stop-my-web-content-from-shifting-left-when-the-vertical-scrollbar-appe -.scrollbar-fix { - padding-left: calc(100vw - 100%); +// uses negative margin to force content to be drawn under the scrollbar +// (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-outer { + overflow-x: hidden; +} +.scrollbar-fix-inner { + @include media-breakpoint-up(sm) { + margin-right: calc(100% - 100vw); + } } // place a container div around entire page, and then use this -- 2.34.1