fix(footer): support fixed footer in layout

dhis2 · Aug 1, 2023 · 004282f · 004282f
1 parent 11bbd9d
commit 004282f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 17 deletions.
diff --git a/src/app/layout/Layout.module.css b/src/app/layout/Layout.module.css
@@ -15,9 +15,16 @@
     grid-template-rows: auto 1fr;
     overflow: auto;
 }
+.wrapperWithFooter {
+    composes: wrapper;
+    grid-template-areas: 'sidebar main' 'footer footer';
+    grid-template-rows: auto 1fr 68px;
+    overflow-y: auto;
+}
 
 .main {
-    padding: 16px;
+    padding: var(--spacers-dp16);
+    padding-bottom: 0px;
     grid-area: main;
     background-color: var(--colors-grey100);
     width: 100%;
@@ -40,6 +47,10 @@
         grid-template-rows: none;
         grid-template-areas: 'sidebar   main';
     }
+    .wrapperWithFooter {
+        grid-template-areas: 'sidebar main' 'footer footer';
+        grid-template-rows: 1fr 68px;
+    }
     .sidebar {
         width: 240px;
         overflow: auto;

diff --git a/src/app/layout/Layout.tsx b/src/app/layout/Layout.tsx
@@ -8,11 +8,16 @@ import css from './Layout.module.css'
 interface BaseLayoutProps {
     children: React.ReactNode
     sidebar?: React.ReactNode
+    showFooter?: boolean
 }
 
-export const BaseSidebarLayout = ({ children, sidebar }: BaseLayoutProps) => {
+export const BaseLayout = ({
+    children,
+    sidebar,
+    showFooter,
+}: BaseLayoutProps) => {
     return (
-        <div className={css.wrapper}>
+        <div className={showFooter ? css.wrapperWithFooter : css.wrapper}>
             {sidebar}
             <div className={css.main}>{children}</div>
         </div>
@@ -22,20 +27,23 @@ export const BaseSidebarLayout = ({ children, sidebar }: BaseLayoutProps) => {
 export const SidebarLayout = ({
     children,
     hideSidebar,
+    showFooter,
 }: {
     children: React.ReactNode
     hideSidebar?: boolean
+    showFooter?: boolean
 }) => {
     return (
-        <BaseSidebarLayout
+        <BaseLayout
+            showFooter={showFooter}
             sidebar={
                 <Sidebar
                     className={cx(css.sidebar, { [css.hide]: hideSidebar })}
                 />
             }
         >
             {children}
-        </BaseSidebarLayout>
+        </BaseLayout>
     )
 }
 
@@ -44,9 +52,10 @@ export const Layout = () => {
     // routes can specify a handle to hide the sidebar
     // hide the sidebar if any matched route specifies it
     const hideSidebar = matches.some((match) => match.handle?.hideSidebar)
+    const showFooter = matches.some((match) => match.handle?.showFooter)
 
     return (
-        <SidebarLayout hideSidebar={hideSidebar}>
+        <SidebarLayout hideSidebar={hideSidebar} showFooter={showFooter}>
             <Outlet />
         </SidebarLayout>
     )

diff --git a/src/app/routes/Router.tsx b/src/app/routes/Router.tsx
@@ -97,7 +97,7 @@ const schemaSectionRoutes = Object.values(SCHEMA_SECTIONS).map((section) => (
         handle={{ section }}
     >
         <Route index lazy={createSectionLazyRouteFunction(section, 'List')} />
-        <Route handle={{ hideSidebar: true }}>
+        <Route handle={{ hideSidebar: true, showFooter: true }}>
             {!sectionsNoNewRoute.has(section) && (
                 <Route
                     path={routePaths.sectionNew}

diff --git a/src/app/routes/types.ts b/src/app/routes/types.ts
@@ -10,6 +10,7 @@ type MatchWithHandle<THandle> = ReturnType<typeof useMatches>[number] & {
 // common type for possible handle-properties used in Route
 export type RouteHandle = {
     hideSidebar?: boolean
+    showFooter?: boolean
     section?: SchemaSection
 }
 

diff --git a/src/pages/dataElements/New.module.css b/src/pages/dataElements/New.module.css
@@ -1,14 +1,6 @@
 .container {
-    display: block;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    overflow-y: auto;
     box-sizing: border-box;
-}
-
-.form {
-    padding-bottom: 68px;
+    height: 100%;
 }
 
 .formActions {
@@ -17,6 +9,6 @@
     bottom: 0;
     width: 100vw;
     padding: var(--spacers-dp16) 0;
-    box-shadow: 0 0 3px rgba(0,0,0,0.8);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
     background: var(--colors-white);
 }