Better title handling for mobile

AppliedEnergistics · Jul 9, 2023 · f9e247d · f9e247d
1 parent 521c09b
commit f9e247d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/GuideShell.module.css b/src/GuideShell.module.css
@@ -27,6 +27,7 @@
     border-radius: 8px;
     margin: 5px;
 }
+
 /* Taken from Bulma */
 
 .navbarBurger > span {
@@ -97,6 +98,18 @@
     max-width: 100%;
 }
 
+
+.pageTitle {
+    display: flex;
+    border-bottom: calc(1px * var(--gui-scale)) solid var(--color-header1-separator);
+}
+
+.pageTitle > h1 {
+    border: none;
+    margin: 0;
+    align-self: center;
+}
+
 .main > article {
     padding: calc(5px * var(--gui-scale));
     background-color: #33333380;
@@ -117,6 +130,10 @@
         grid-template-rows: max-content max-content 1fr max-content;
     }
 
+    .pageTitle {
+        display: none;
+    }
+
     :global(:root) {
         --document-rect-margin: 0 !important;
     }
@@ -131,6 +148,7 @@
     .main.menuExpanded > aside, .main.menuExpanded > .versionPicker {
         display: initial;
     }
+
     /* but then hide the article... */
     .main.menuExpanded > article {
         display: none;
@@ -142,4 +160,8 @@
     .main .navbarBurger {
         display: none;
     }
+
+    :global(.inlinePageTitle) {
+        display: none;
+    }
 }
diff --git a/src/GuideShell.tsx b/src/GuideShell.tsx
@@ -65,7 +65,7 @@ function GuideShell() {
           <span aria-hidden="true"></span>
         </a>
       </div>
-      <div>{pageTitle}</div>
+      <div className={css.pageTitle}>{pageTitle}</div>
       <aside onClick={() => setMenuExpanded(false)}>
         <GuideNavBar />
       </aside>

diff --git a/src/page-compiler/compilePage.tsx b/src/page-compiler/compilePage.tsx
@@ -165,7 +165,19 @@ export function compilePage(
     if (child.type === "heading") {
       if (child.depth === 1) {
         title = compileHeading(context, child);
-        clonedRoot.children.splice(i, 1);
+        // Wrap the existing heading such that it can be re-enabled for mobile clients
+        clonedRoot.children[i] = {
+          type: "mdxJsxFlowElement",
+          name: "div",
+          attributes: [
+            {
+              type: "mdxJsxAttribute",
+              name: "className",
+              value: "inlinePageTitle",
+            },
+          ],
+          children: [child],
+        };
       }
       break;
     }