From: Nick Downing Date: Fri, 14 Jan 2022 12:53:17 +0000 (+1100) Subject: Fix scrollbar shifting problem again (fix was lost in upgrade to Bootstrap 4, because... X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?p=ndcode_site.git;a=commitdiff_plain;h=3ee27ccfaa0799654dd2836b57ce818b541a7f60 Fix scrollbar shifting problem again (fix was lost in upgrade to Bootstrap 4, because it moved the "Give feedback" button to left, but now I fixed that too) --- diff --git a/_lib/navbar.jst b/_lib/navbar.jst index 8498bb0..8781d25 100644 --- a/_lib/navbar.jst +++ b/_lib/navbar.jst @@ -45,64 +45,66 @@ 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.container { - div.row.align-items-center.py-3 { - div.col-sm-8 { - _out.push(logo_large) - } - div.'col-sm-4' { - //div { - // let signed_in = - // Object.prototype.hasOwnProperty.call(env.session, 'account') - // span#signed-in-status { - // if (signed_in) - // `Signed in as ${env.session.account}.` - // else - // 'Browsing as guest.' - // } - // ' ' - // if (signed_in) - // a#sign-in(href="" hidden="") {'Sign in'} - // else - // a#sign-in(href="") {'Sign in'} - // ' ' - // if (signed_in) - // a#sign-out(href="") {'Sign out'} - // else - // a#sign-out(href="" hidden="") {'Sign out'} - //} - //p {} - - form/*.form-inline*/(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#search-button(type="submit") { - _out.push(icon_search_mono) + 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 { + // let signed_in = + // Object.prototype.hasOwnProperty.call(env.session, 'account') + // span#signed-in-status { + // if (signed_in) + // `Signed in as ${env.session.account}.` + // else + // 'Browsing as guest.' + // } + // ' ' + // if (signed_in) + // a#sign-in(href="" hidden="") {'Sign in'} + // else + // a#sign-in(href="") {'Sign in'} + // ' ' + // if (signed_in) + // a#sign-out(href="") {'Sign out'} + // else + // a#sign-out(href="" hidden="") {'Sign out'} + //} + //p {} + + form/*.form-inline*/(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#search-button(type="submit") { + _out.push(icon_search_mono) + } } } } } + + //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.'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 { + nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.scrollbar-fix { div.container { //a.navbar-brand(href="#") {'Navbar'} //' ' @@ -170,10 +172,12 @@ return async (env, head, body, scripts) => { } } } - div.container { - await body(_out) + div.scrollbar-fix { + div.container { + await body(_out) + } } - footer { + 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") {} diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss index 1cdda89..ff8f136 100644 --- a/css/bootstrap/_custom.scss +++ b/css/bootstrap/_custom.scss @@ -3,6 +3,15 @@ $footer-link-color: darken(theme-color("success"), 10%); $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%); +} + // apply this to svg, see _svg/icon_search.svg .svg-icon { display: inline-block; @@ -15,12 +24,6 @@ $footer-link-hover-color: darken($footer-link-color, 10%); //bottom: -.125em; } -// note: needs to match the bootstrap border spinner -.svg-color { - width: 32px; - height: 32px; -} - // use this to display the pi symbol without horrible blocky look in Sans .serif { font-family: $font-family-serif; diff --git a/css/bootstrap/_navbar.scss b/css/bootstrap/_navbar.scss index 6e4cecf..9a27f3f 100644 --- a/css/bootstrap/_navbar.scss +++ b/css/bootstrap/_navbar.scss @@ -21,7 +21,8 @@ flex-wrap: wrap; // allow us to do the line break for collapsing content align-items: center; justify-content: space-between; // space out brand from logo - padding: $navbar-padding-y $navbar-padding-x; + //padding: $navbar-padding-y $navbar-padding-x; + padding-y: $navbar-padding-y; // Nick // Because flex properties aren't inherited, we need to redeclare these first // few properties so that content nested within behave properly.