Merge pull request #2605 from andrewbaldwin44/feature/static-footer

Modern UI: Change Footer to Static Positioning
locustio · Feb 15, 2024 · a0a3700 · a0a3700
2 parents 648bec8 + 714d4c4
commit a0a3700
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 12 deletions.
diff --git a/locust/webui/dist/assets/index-fcdc76c8.js → locust/webui/dist/assets/index-af38c28c.js b/locust/webui/dist/assets/index-fcdc76c8.js → locust/webui/dist/assets/index-af38c28c.js
diff --git a/locust/webui/dist/auth.html b/locust/webui/dist/auth.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
 
     <title>Locust</title>
-    <script type="module" crossorigin src="/assets/index-fcdc76c8.js"></script>
+    <script type="module" crossorigin src="/assets/index-af38c28c.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/locust/webui/dist/index.html b/locust/webui/dist/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
 
     <title>Locust</title>
-    <script type="module" crossorigin src="/assets/index-fcdc76c8.js"></script>
+    <script type="module" crossorigin src="/assets/index-af38c28c.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/locust/webui/src/components/Layout/Footer/Footer.tsx b/locust/webui/src/components/Layout/Footer/Footer.tsx
@@ -1,13 +1,19 @@
-import { Box, Container } from '@mui/material';
+import { Container } from '@mui/material';
 
 import About from 'components/Layout/Footer/About';
 
 export default function Footer() {
   return (
-    <Box component='nav' sx={{ position: 'fixed', bottom: 0, width: '100%' }}>
-      <Container maxWidth='xl' sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <About />
-      </Container>
-    </Box>
+    <Container
+      maxWidth='xl'
+      sx={{
+        display: 'flex',
+        height: 'var(--footer-height)',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+      }}
+    >
+      <About />
+    </Container>
   );
 }
diff --git a/locust/webui/src/components/Layout/Layout.tsx b/locust/webui/src/components/Layout/Layout.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Box } from '@mui/material';
 
 import Footer from 'components/Layout/Footer/Footer';
 import Navbar from 'components/Layout/Navbar/Navbar';
@@ -10,8 +11,10 @@ interface ILayout {
 export default function Layout({ children }: ILayout) {
   return (
     <>
-      <Navbar />
-      <main>{children}</main>
+      <Box sx={{ minHeight: 'calc(100vh - var(--footer-height))' }}>
+        <Navbar />
+        <main>{children}</main>
+      </Box>
       <Footer />
     </>
   );

diff --git a/locust/webui/src/styles/theme.ts b/locust/webui/src/styles/theme.ts
@@ -11,6 +11,15 @@ const createTheme = (mode: PaletteMode) =>
         main: '#00C853',
       },
     },
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: {
+          ':root': {
+            '--footer-height': '40px',
+          },
+        },
+      },
+    },
   });
 
 export default createTheme;