Fix index page layout

rerdavies · Jan 27, 2025 · 69e6a0a · 69e6a0a
1 parent 66fcb44
commit 69e6a0a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/docs/src/App.tsx b/docs/src/App.tsx
@@ -98,6 +98,7 @@ function App() {
     })
 
     let isSearchPage = location.pathname === "/search";
+    let isIndexPage = location.pathname === "/index";
     const compactNavBar = windowWidth < 600 && !isSearchPage;
     const fullNavBar = !compactNavBar && !isSearchPage;
 
@@ -234,7 +235,7 @@ function App() {
                                     <div style={{ flex: "1 1 1px" }} />
                                 )
                             }
-                            {!isSearchPage && (
+                            {(!isSearchPage && !isIndexPage) && (
                                 <MainPageSearchBox open={searchOpen} onOpen={(open) => { setSearchOpen(open); }} />
                             )}
                             {!hideNavBar && (
@@ -309,7 +310,7 @@ function App() {
                                         <div style={{ flex: "1 1 1px" }} />
                                     )
                                 }
-                                {!isSearchPage && (
+                                {(!isSearchPage && !isIndexPage) && (
                                     <MainPageSearchBox open={searchOpen} onOpen={(open) => { setSearchOpen(open); }} />
                                 )}
 

diff --git a/docs/src/pages/IndexPage.tsx b/docs/src/pages/IndexPage.tsx
@@ -27,6 +27,8 @@ import SiteIndexData from "../SiteIndexData";
 import SearchBox from "../SearchBox";
 import { useState } from "react";
 import PageColumn from "../PageColumn";
+import Paper from "@mui/material/Paper";
+import PersistentScrollDiv from "../PersistentScrollDiv";
 
 
 
@@ -42,29 +44,28 @@ export default function IndexPage() {
 
     }
     return (
-        <div style={{ display: "flex", flexFlow: "column nowrap", flex: "1 1 auto", height: "100%", overflowX: "hidden" }}>
-            <div style={{ marginTop: 36, flex: "0 0 auto" }}>
-                <PageColumn >
+        <Paper className="app_body" style={{display:"flex",flexFlow:"column nowrap",flex:"1 1 1px"}}>
+            <div style={{flex: "0 0 auto",boxShadow: "0px 0px 5px 0px rgba(0,0,0,0.5)", zIndex: 1}}>
+                <PageColumn  >
 
                     <div style={{ display: "flex", flexFlow: "row nowrap", justifyContent: "space-between", alignItems: "center" }}>
-                        { (!searchOpen || window.innerWidth > 500) ?
+                        {(!searchOpen || window.innerWidth > 500) ?
                             (<h2 className="section-head" style={{ marginBottom: 0, marginTop: 0, flexShrink: 1 }}>Index</h2>)
                             : (<div style={{ flex: "1 1 auto" }}></div>)
                         }
                         <SearchBox open={searchOpen}
-                        onSearchChangedWithDelay={(searchString) => {
+                            onSearchChangedWithDelay={(searchString) => {
                                 setSearchString(searchString);
 
                             }}
                             onOpen={(open) => { setSearchOpen(open); }}
                         />
                     </div>
                 </PageColumn>
-                <hr style={{ marginTop: 0, marginBottom: 12 }} />
             </div>
 
-            <div style={{ flex: "1 1 auto", overflowX: "auto", overflowY: "auto" }}>
-                <DocsPage route="/index" >
+            <PersistentScrollDiv tag="index" style={{ flex: "1 1 1px", overflowX: "auto", overflowY: "auto" }}>
+                <PageColumn >
 
                     {
                         !found && <h4>Not found.</h4>
@@ -83,8 +84,8 @@ export default function IndexPage() {
                                                     return (
                                                         <p key={index} className="indexLink" >
                                                             <Link to={ref.route} state={{ showElement: ref.elementId }}>
-                                                            <div><p className="indexTitle">{label}</p></div>
-                                                            <div><p className="indexSubtitle">{ref.text}</p></div>
+                                                                <div><p className="indexTitle">{label}</p></div>
+                                                                <div><p className="indexSubtitle">{ref.text}</p></div>
                                                             </Link>
                                                         </p>
                                                     )
@@ -103,9 +104,9 @@ export default function IndexPage() {
                             )
                         })
                     }
-                </DocsPage>
-            </div>
-        </div>
+                </PageColumn>
+            </PersistentScrollDiv>
+        </Paper>
 
     )
 }