add Footer to main body

set the min-height of the spinner to 100% to move the footer below the viewport while loading /corpus
ElectronicBabylonianLiterature · Jul 19, 2024 · 5811324 · 5811324
1 parent d72069e
commit 5811324
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/src/common/AppContent.sass b/src/common/AppContent.sass
@@ -7,6 +7,7 @@
   padding-bottom: 1em
   padding-left: 1.5em
   padding-right: 1.5em
+  min-height: 90vh
 
   &--wide
     max-width: initial
@@ -15,7 +16,7 @@
     display: flex
     flex-flow: wrap
     margin-bottom: 1em
- 
+
   &__breadcrumbs
     flex: 0 0 100%
 
@@ -33,7 +34,7 @@
     background: #417DD2
     background-blend-mode: lighten
     background-image: url(https://www.ebl.lmu.de/api/images/Babel_Project_01_cropped.svg)
-    background-position: right -12em  bottom
+    background-position: right -12em bottom
     background-repeat: no-repeat
     background-size: 20em
     color: #FFFFFF

diff --git a/src/http/withData.tsx b/src/http/withData.tsx
@@ -52,7 +52,7 @@ export default function withData<PROPS, GETTER_PROPS, DATA>(
     return (
       <ErrorBoundary>
         {!data && !error && (
-          <div className="text-center my-5">
+          <div className="text-center my-5 withData-spinner">
             <Spinner />
           </div>
         )}

diff --git a/src/router/router.sass b/src/router/router.sass
@@ -0,0 +1,2 @@
+.main-body > .withData-spinner
+    min-height: 100vh
diff --git a/src/router/router.tsx b/src/router/router.tsx
@@ -29,6 +29,8 @@ import NotFoundPage from 'NotFoundPage'
 import { helmetContext } from 'router/head'
 import { HelmetProvider } from 'react-helmet-async'
 import { FindspotService } from 'fragmentarium/application/FindspotService'
+import Footer from 'Footer'
+import './router.sass'
 
 export interface Services {
   wordService: WordService
@@ -46,15 +48,18 @@ export interface Services {
 export default function Router(services: Services): JSX.Element {
   return (
     <HelmetProvider context={helmetContext}>
-      <Header key="Header" />
-      <Switch>
-        <Route exact path="/sitemap">
-          <Sitemap services={services} />
-        </Route>
-        <Route exact path="/sitemap/sitemap.xml" />
-        {WebsiteRoutes(services, false)}
-        <Route component={NotFoundPage} />
-      </Switch>
+      <div className="main-body">
+        <Header key="Header" />
+        <Switch>
+          <Route exact path="/sitemap">
+            <Sitemap services={services} />
+          </Route>
+          <Route exact path="/sitemap/sitemap.xml" />
+          {WebsiteRoutes(services, false)}
+          <Route component={NotFoundPage} />
+        </Switch>
+        <Footer />
+      </div>
     </HelmetProvider>
   )
 }