add footer

fittrackee_client/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+  "short_name": "FitTrackee",
-  "name": "Create React App Sample",
+  "name": "Self hosted workout/activity tracker",
   "icons": [
     {
       "src": "favicon.ico",
@@ -11,5 +11,6 @@
   "start_url": "./index.html",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#ffffff",
+  "version": "0.1.1"
 }

fittrackee_client/src/components/App.css

@@ -1,7 +1,17 @@
-.App {
+html {
+  height: 100vh;
+}
+
+body {
   background-color: #eaeaea;
-  padding-bottom: 20px;
+  margin: 0;
   min-height: 100vh;
+  padding-bottom: 50px;
+  position: relative;
+  }
+
+.App {
+  padding-bottom: 20px;
   text-align: center;
 }
 
@@ -207,6 +217,17 @@ label {
   color: #405976;
 }
 
+.footer {
+  background-color: #f8f9fa;
+  bottom: 0;
+  color: #8b8c8c;
+  font-size: 0.9em;
+  height: 50px;
+  line-height: 50px;
+  position: absolute;
+  width: 100%;
+}
+
 .huge {
   font-size: 25px;
 }

fittrackee_client/src/components/App.jsx

@@ -6,6 +6,7 @@ import './App.css'
 import Activity from './Activity'
 import Activities from './Activities'
 import Dashboard from './Dashboard'
+import Footer from './Footer'
 import Logout from './User/Logout'
 import NavBar from './NavBar'
 import NotFound from './Others/NotFound'
@@ -93,6 +94,7 @@ export default class App extends React.Component {
           {/* <Route path="/admin" component={Admin} /> */}
           <Route component={NotFound} />
         </Switch>
+        <Footer />
      </div>
     )
   }

fittrackee_client/src/components/Footer/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { version } from './../../utils'
+
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <div className="container">
+        <strong>FitTrackee</strong> v{version} -{' '}
+        <a
+          href="https://github.com/SamR1/FitTrackee"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          source code
+        </a> under{' '}
+        <a
+          href="https://choosealicense.com/licenses/gpl-3.0/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          GPLv3
+        </a>{' '}
+         license
+      </div>
+    </footer>
+  )
+}
+

fittrackee_client/src/utils.js

@@ -2,6 +2,7 @@ import togeojson from '@mapbox/togeojson'
 import { addDays, format, parse, startOfWeek, subHours } from 'date-fns'
 import { DateTime } from 'luxon'
 
+export const version = '0.1.1' // version stored in 'utils' for now
 export const apiUrl = `${process.env.REACT_APP_API_URL}/api/`
 export const thunderforestApiKey = `${
   process.env.REACT_APP_THUNDERFOREST_API_KEY