Fix scrollbar shifting problem again (fix was lost in upgrade to Bootstrap 4, because...

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index 8498bb0..8781d25 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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.