theme: align content with topbar icon limits #290

exampleSite/content/tests/width.en.md

@@ -0,0 +1,12 @@
++++
+description = "Test dynamic width resizing of content if scrollbar is present"
+title = "Width"
++++
+
+{{% notice primary %}}
+Make a visible block
+{{% /notice %}}
+
+{{% notice primary %}}
+And another one
+{{% /notice %}}

static/css/print.css

@@ -85,7 +85,7 @@ body,
 }
 #body #body-inner {
     /* reset paddings for chapters in screen */
-    padding: 0 3rem 4rem 3rem;
+    padding: 0 3.25rem 4rem 3.25rem;
 }
 
 #body #body-inner h1 {

static/css/theme.css

@@ -364,12 +364,12 @@ th {
     flex: auto;
     flex-direction: column;
     overflow-y: auto;
-    padding: 0 3rem 4rem 3rem;
+    padding: 0 3.25rem 4rem 3.25rem;
     position: relative; /* PS */
 }
 @media screen and (max-width: 59.938em) {
     #body-inner {
-        padding: 0 2rem 15px 2rem;
+        padding: 0 2.25rem 15px 2.25rem;
     }
 }
 @media screen and (max-width: 47.938em) {
@@ -1436,3 +1436,12 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 .math.align-right > mjx-container{
     text-align: right !important;
 }
+
+.scrollbar-measure {
+    /* https://davidwalsh.name/detect-scrollbar-width */
+	height: 100px;
+	overflow: scroll;
+	position: absolute;
+	width: 100px;
+	top: -9999px;
+}

static/js/theme.js

@@ -22,6 +22,19 @@ var psc;
 var psm;
 var pst;
 
+function scrollbarWidth(){
+    // https://davidwalsh.name/detect-scrollbar-width
+    // Create the measurement node
+    var scrollDiv = document.createElement("div");
+    scrollDiv.className = "scrollbar-measure";
+    document.body.appendChild(scrollDiv);
+    // Get the scrollbar width
+    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    // Delete the DIV
+    document.body.removeChild(scrollDiv);
+    return scrollbarWidth;
+}
+
 function switchTab(tabGroup, tabId) {
     var tabs = jQuery(".tab-panel").has("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']");
     var allTabItems = tabs.find("[data-tab-group='"+tabGroup+"']");
@@ -380,6 +393,20 @@ function initMenuScrollbar(){
             psm && psm.update();
         });
     });
+
+    // finally, we want to adjust the contents right padding if there is a scrollbar visible
+    var scrollbarSize = scrollbarWidth();
+    function adjustContentWidth(){
+        var left = parseFloat( getComputedStyle( elc ).getPropertyValue( 'padding-left' ) );
+        var right = left;
+        if( elc.scrollHeight > elc.clientHeight ){
+            // if we have a scrollbar reduce the right margin by the scrollbar width
+            right = Math.max( 0, left - scrollbarSize );
+        }
+        elc.style[ 'padding-right' ] = '' + right + 'px';
+    }
+    window.addEventListener('resize', adjustContentWidth );
+    adjustContentWidth();
 }
 
 function initLightbox(){