Expand details elements during printing

Also some sensible layout and page break controls for printing
EnterpriseDB · Nov 14, 2024 · 98e501b · 98e501b
1 parent c419284
commit 98e501b
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 8 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -19,3 +19,26 @@ function scrollToAnchor(location, mainNavHeight = 0) {
 
   return true;
 }
+
+exports.onInitialClientRender = () => {
+  // h/t https://stackoverflow.com/questions/19646684/force-open-the-details-summary-tag-for-print-in-chrome/75260733#75260733
+  window.matchMedia("print").addEventListener("change", (evt) => {
+    if (evt.matches) {
+      let detailsElements = document.body.querySelectorAll(
+        "details:not([open])",
+      );
+      for (let e of detailsElements) {
+        e.toggleAttribute("open", true);
+        e.dataset.wasclosed = "";
+      }
+    } else {
+      let detailsElements = document.body.querySelectorAll(
+        "details[data-wasclosed]",
+      );
+      for (let e of detailsElements) {
+        e.removeAttribute("open");
+        delete e.dataset.wasclosed;
+      }
+    }
+  });
+};
diff --git a/src/components/prev-next.js b/src/components/prev-next.js
@@ -7,7 +7,7 @@ const PrevNext = ({ prevNext }) => {
   let upLink = prevNext.up;
 
   return (
-    <div className="d-flex justify-content-between mt-5">
+    <div className="d-flex justify-content-between mt-5 d-print-none">
       <div className="max-w-40">
         {prevLink && (
           <Link

diff --git a/src/styles/_docs.scss b/src/styles/_docs.scss
@@ -191,6 +191,20 @@ html.katacoda-panel-active .katacoda-exec-button {
 }
 
 @media print {
+  // h/t https://stackoverflow.com/questions/31947026/bootstrap-printing-and-column-resizing/45226168#45226168
+  .col-print-12 {
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+
+  tr {
+    break-inside: avoid-page;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    break-after: avoid-page;
+  }
+
   .topbar,
   .sidebar,
   nav {
@@ -207,6 +221,18 @@ html.katacoda-panel-active .katacoda-exec-button {
       display: none;
     }
   }
+
+  /*
+   * details / summary
+   * note that this does not / cannot *expand* the details - that's handled via script in 
+   * the purpose of these styles is simply to clean up the rendering a bit.
+   */
+  summary {
+    display: block;
+  }
+
+  summary::-webkit-details-marker { display: none }
+
 }
 
 // Index page

diff --git a/src/templates/doc.js b/src/templates/doc.js
@@ -255,7 +255,7 @@ const DocTemplate = ({ data, pageContext }) => {
                 </span>
               )}
             </h1>
-            <div className="d-flex">
+            <div className="d-flex d-print-none">
               {editTarget !== "none" && (
                 <a
                   href={
@@ -280,7 +280,13 @@ const DocTemplate = ({ data, pageContext }) => {
           ) : null}
 
           <ContentRow>
-            <Col xs={showToc ? 9 : 12}>
+            <Col
+              className={[
+                "col-xs-12",
+                "col-lg-" + (showToc ? 9 : 12),
+                "col-print-12",
+              ].join(" ")}
+            >
               <MDXRenderer>{body}</MDXRenderer>
               <Tiles mode={indexCards} node={navRoot} />
               {(!indexCards || indexCards === TileModes.None) && sections && (
@@ -289,7 +295,7 @@ const DocTemplate = ({ data, pageContext }) => {
             </Col>
 
             {showToc && (
-              <Col xs={3}>
+              <Col className="d-xs-none col-lg-3 d-print-none">
                 <TableOfContents toc={newtoc} deepToC={deepToC} />
               </Col>
             )}

diff --git a/src/templates/learn-doc.js b/src/templates/learn-doc.js
@@ -133,7 +133,7 @@ const LearnDocTemplate = ({ data, pageContext }) => {
     isIndexPage: isPathAnIndexPage(mdx.fileAbsolutePath),
     productVersions,
   };
-  const { path, depth } = fields;
+  const { path } = fields;
 
   const showToc = !!mdx.tableOfContents.items && !frontmatter.hideToC;
   const showInteractiveBadge =
@@ -212,17 +212,23 @@ const LearnDocTemplate = ({ data, pageContext }) => {
           )}
           <div className="d-flex justify-content-between align-items-center">
             <h1 className="balance-text">{title}</h1>
-            {editOrFeedbackButton}
+            <div className="d-print-none">{editOrFeedbackButton}</div>
           </div>
 
           <ContentRow>
-            <Col xs={showToc ? 9 : 12}>
+            <Col
+              className={[
+                "col-xs-12",
+                "col-lg-" + (showToc ? 9 : 12),
+                "col-print-12",
+              ].join(" ")}
+            >
               <MDXRenderer>{mdx.body}</MDXRenderer>
               <Tiles mode={cardTileMode} node={navRoot} />
             </Col>
 
             {showToc && (
-              <Col xs={3}>
+              <Col className="d-xs-none col-lg-3 d-print-none">
                 <TableOfContents toc={newtoc} deepToC={deepToC} />
               </Col>
             )}