Merge pull request #352 from honza801/add_footer_element

Add Footer element at the bottom of the index page

client/src/app.tsx

@@ -2,6 +2,7 @@ import React, {Component, Fragment, ReactNode} from 'react';
 import Menu from './components/menu';
 import {Notifier} from './components/notifier';
 import Error from './components/error';
+import Footer from './components/footer';
 import {initRouter} from './router';
 import log from './utils/log';
 import Button from './components/button';
@@ -61,6 +62,8 @@ class App extends Component<{}, State> {
                 </div>
 
                 <Notifier />
+
+                <Footer />
             </>
         );
     }

client/src/components/footer.scss

@@ -0,0 +1,8 @@
+@import '../scss/settings.scss';
+
+#footer {
+    height: $footer-height;
+	text-align: center;
+    z-index: 1;
+}
+

client/src/components/footer.tsx

@@ -0,0 +1,10 @@
+import './footer.scss';
+import React from 'react';
+
+export default function Footer() {
+    if (process.env.REACT_APP_FOOTER) {
+        document.body.style.setProperty("--footer-height", "17px");
+        return <div id='footer'>{process.env.REACT_APP_FOOTER}</div>;
+    }
+    return null;
+}

client/src/scss/index.scss

@@ -36,7 +36,7 @@ html {
 
 #shell {
 	display: flex;
-	min-height: calc(100vh - 55px);
+	min-height: calc(100vh - 55px - $footer-height);
 }
 
 #menu {

client/src/scss/settings.scss

@@ -37,6 +37,8 @@ $media-xsmall: 700px;
 $media-small: 812px;
 $media-medium: 1200px;
 
+$footer-height: var(--footer-height);
+
 body {
     --color-lightest: #F0F0F0;
     --color-light: #AAA;
@@ -52,6 +54,8 @@ body {
     --color-icon-inactive: #{$color-dark};
 
     --box-shadow-size: 4px;
+    
+    --footer-height: 0px;
 }
 
 body.dark-mode {