Improve reader mode sidebar behavior

dragonstyle · dragonstyle · commit 0dd46e31b25a · 2022-06-09T11:30:48.000-04:00
- don’t leave scrollable sidebar when collapsed
- improve alignment of button
diff --git a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss
@@ -1395,7 +1395,6 @@ div.callout.callout-style-default > .callout-header {
   margin-bottom: -0.2rem;
 }
 
-.sidebar-tools-main .quarto-reader-toggle .bi::before,
 .sidebar-tools-main .quarto-color-scheme-toggle .bi::before {
   padding-top: 0.2rem;
   margin-bottom: -0.2rem;
diff --git a/src/resources/formats/html/quarto.js b/src/resources/formats/html/quarto.js
@@ -275,6 +275,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
         const convertToMenu = () => {
           for (const child of el.children) {
             child.style.opacity = 0;
+            child.style.display = "none";
           }
 
           const toggleContainer = window.document.createElement("div");
@@ -312,6 +313,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
 
             const clone = child.cloneNode(true);
             clone.style.opacity = 1;
+            clone.style.display = null;
             toggleContents.append(clone);
           }
           toggleContents.style.height = "0px";
@@ -376,6 +378,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
         const convertToSidebar = () => {
           for (const child of el.children) {
             child.style.opacity = 1;
+            clone.style.display = null;
           }
 
           const placeholderEl = window.document.getElementById(

Original file line number	Diff line number	Diff line change
`@@ -1395,7 +1395,6 @@ div.callout.callout-style-default > .callout-header {`
`1395`	`1395`	`margin-bottom: -0.2rem;`
`1396`	`1396`	`}`
`1397`	`1397`
`1398`		`-.sidebar-tools-main .quarto-reader-toggle .bi::before,`
`1399`	`1398`	`.sidebar-tools-main .quarto-color-scheme-toggle .bi::before {`
`1400`	`1399`	`padding-top: 0.2rem;`
`1401`	`1400`	`margin-bottom: -0.2rem;`
Original file line number	Diff line number	Diff line change
`@@ -275,6 +275,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {`
`275`	`275`	`const convertToMenu = () => {`
`276`	`276`	`for (const child of el.children) {`
`277`	`277`	`child.style.opacity = 0;`
	`278`	`+ child.style.display = "none";`
`278`	`279`	`}`
`279`	`280`
`280`	`281`	`const toggleContainer = window.document.createElement("div");`
`@@ -312,6 +313,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {`
`312`	`313`
`313`	`314`	`const clone = child.cloneNode(true);`
`314`	`315`	`clone.style.opacity = 1;`
	`316`	`+ clone.style.display = null;`
`315`	`317`	`toggleContents.append(clone);`
`316`	`318`	`}`
`317`	`319`	`toggleContents.style.height = "0px";`
`@@ -376,6 +378,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {`
`376`	`378`	`const convertToSidebar = () => {`
`377`	`379`	`for (const child of el.children) {`
`378`	`380`	`child.style.opacity = 1;`
	`381`	`+ clone.style.display = null;`
`379`	`382`	`}`
`380`	`383`
`381`	`384`	`const placeholderEl = window.document.getElementById(`