add footnote

Author: JinZhou5042

static/css/content.css

@@ -21,13 +21,25 @@ body {
     padding: 20px;
     width: 86%;
     height: 100vh;
+    min-height: 100vh;
     box-sizing: border-box;
     overflow-x: hidden;         
     transition: top 0.5s ease;
     flex: 1;
     overflow-y: auto;
 }
 
+#content > .footnote {
+    font-size: 14px;
+    color: #777;
+    background-color: #f9f9f9;
+}
+
+.footnote a {
+    color: #0056b3;
+    text-decoration: none;
+}
+
 .iframe-style {
     width: 100%;
     height: 100%;

static/js/main.js

@@ -4,6 +4,21 @@ import { updateSidebarButtons } from './modules/utils.js';
 
 const moduleObjects = {};
 
+function addFootnote() {
+    const content = document.getElementById('content');
+
+    const footnote = document.createElement('div');
+    footnote.className = 'footnote';
+    footnote.innerHTML = `
+    <p>
+        TaskVine Report Tool available on GitHub: 
+        <a href="https://github.com/cooperative-computing-lab/taskvine-report-tool.git" target="_blank">https://github.com/cooperative-computing-lab/taskvine-report-tool.git</a>.
+    </p>
+    `;
+
+    content.appendChild(footnote);
+}
+
 async function fetchAllModulesData(folder) {
     try {
         const tasks = moduleConfigs.map(({ id }) => {
@@ -52,4 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     /* update sidebar buttons */
     updateSidebarButtons();
+
+    /* add footnote */
+    addFootnote();
 });

templates/index.html

@@ -70,12 +70,7 @@
     </div>
 
     <div id="content">
-        <!-- handled in module_definitions.js -->
-        <div class="footnote">
-            <p>
-                TaskVine Report Tool available on <a href="https://github.com/cooperative-computing-lab/taskvine-report-tool.git" target="_blank">Github</a>.
-            </p>
-        </div>
+
     </div>
 
 </body>