adjust layout with header and footer

52North · Jan 31, 2025 · ac8de96 · ac8de96
1 parent 86deb34
commit ac8de96
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 11 deletions.
diff --git a/src/apps/empty/AppUI.tsx b/src/apps/empty/AppUI.tsx
@@ -4,14 +4,33 @@ import { SearchView } from "./views/SearchView";
 import { Notifier } from "@open-pioneer/notifier";
 import { BrowserRouter, Route, Routes } from "react-router";
 import { GeoResultView } from "./views/GeoResultView";
+import { Center, Grid, GridItem } from "@open-pioneer/chakra-integration";
 
 export function AppUI() {
     return (
         <BrowserRouter>
-            <Routes>
-                <Route path="/" element={<SearchView></SearchView>} />
-                <Route path="georesult/:id" element={<GeoResultView></GeoResultView>} />
-            </Routes>
+            <Grid
+                templateAreas={`"header" "main" "footer"`}
+                gridTemplateRows={"50px 1fr 30px"}
+                gridTemplateColumns={"1fr"}
+                h="100%"
+                gap="1"
+            >
+                <GridItem bg="orange.50" area={"header"}>
+                    <Center height="100%" fontWeight="bold">
+                        Catalog Search
+                    </Center>
+                </GridItem>
+                <GridItem area={"main"} height="100%" overflow="hidden">
+                    <Routes>
+                        <Route path="/" element={<SearchView></SearchView>} />
+                        <Route path="georesult/:id" element={<GeoResultView></GeoResultView>} />
+                    </Routes>
+                </GridItem>
+                <GridItem bg="blue.50" area={"footer"}>
+                    <Center height="100%">Footer</Center>
+                </GridItem>
+            </Grid>
             <Notifier position="bottom" />
         </BrowserRouter>
     );

diff --git a/src/apps/empty/views/SearchView.tsx b/src/apps/empty/views/SearchView.tsx
@@ -38,8 +38,8 @@ export function SearchView() {
     useOnMountUnsafe(() => searchSrvc.initSearch());
 
     return (
-        <Container maxW="8xl" p={5}>
-            <VStack gap="10px" align="stretch">
+        <VStack gap="10px" align="stretch" overflow="hidden" height="100%">
+            <Container maxW="8xl" p={5}>
                 <SearchInput></SearchInput>
                 {loading ? <Progress size="xs" isIndeterminate /> : <Box height="4px"></Box>}{" "}
                 <Center gap={2}>
@@ -49,13 +49,15 @@ export function SearchView() {
                     <PageSizeSelection></PageSizeSelection>
                     <Ordering></Ordering>
                 </Center>
-                <Grid templateColumns="400px 1fr" gap={2}>
-                    <GridItem w="100%">
+            </Container>
+            <Container maxW="8xl" p={5} overflow="hidden">
+                <Grid templateColumns="400px 1fr" gap={2} overflow="hidden" height="100%">
+                    <GridItem w="100%" overflow="auto">
                         {currentFilter.facets.map((f) => (
                             <FacetComp key={f.key} facet={f}></FacetComp>
                         ))}
                     </GridItem>
-                    <GridItem w="100%">
+                    <GridItem w="100%" overflow="auto">
                         <VStack>
                             {results?.map((e) => (
                                 <ResultEntry key={e.id} resultEntry={e}></ResultEntry>
@@ -64,8 +66,8 @@ export function SearchView() {
                         </VStack>
                     </GridItem>
                 </Grid>
-            </VStack>
-        </Container>
+            </Container>
+        </VStack>
     );
 
     function clearActiveFilterButton() {