From ddc01d112b5156e064975c297b38c540938fc8a2 Mon Sep 17 00:00:00 2001
From: Cornelius Emase <corneliuslochipi@gmail.com>
Date: Thu, 14 Mar 2024 18:57:27 +0300
Subject: [PATCH] refactor:update: footer reusability component

---
 apps/Info.html            | 10 ++++---
 apps/common.css           | 55 ++++++++++++++++++++++++++++++++++++---
 apps/landing/landing.html | 50 +++++------------------------------
 apps/signup/signup.html   | 11 +++++---
 apps/table.html           |  8 +++---
 common/util.js            | 14 ++++++++++
 6 files changed, 91 insertions(+), 57 deletions(-)
diff --git a/apps/Info.html b/apps/Info.html
index 1605832ab..03a3a0655 100644
--- a/apps/Info.html
+++ b/apps/Info.html
@@ -35,6 +35,8 @@
 		integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 
 		crossorigin="anonymous">
 	<link rel="stylesheet" href="../common/stacktable.css">
+	<!-- common styling -->
+	<link rel="stylesheet" href="./common.css">
 	<style>
 		html,
 		body {
@@ -166,10 +168,12 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 </div>
 </div>
 
-<footer class="text-center text-white bg-dark p-3 mt-2">
-	<p class="p">Copyright © 2021 caMicroscope</p>
-</footer>
+<!-- footer -->
+<footer id="footer-layout"></footer>
 </div>
+
+    <!-- script to call a footer(layout footer in the common > utils folder) function -->
+<script> insertFooterLayout(); </script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
 </body>
 <script>
diff --git a/apps/common.css b/apps/common.css
index 2f1ffdb7a..51595599e 100644
--- a/apps/common.css
+++ b/apps/common.css
@@ -1,7 +1,54 @@
 .text-in-line {
-	margin: 0 auto;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  margin: 0 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+/* layout footer styles */
+#footer-layout hr {
+  border-bottom-color: #ffffff;
+  padding: 0;
+  margin: 0;
+}
+
+#footer-layout hr {
+  border-bottom-color: #ffffff;
+  padding: 0;
+  margin: 0;
+}
+
+#footer-layout {
+  color: whitesmoke;
+  text-align: left;
+  padding: 2.5em 4.5em;
+  background-color: #343a40;
+}
+
+#footer-layout p {
+  color: whitesmoke;
+}
+
+.company-name {
+  color: #24a9f6;
+}
+
+.company-name a {
+  color: #24a9f6;
+  text-decoration: none;
+}
+
+.company-name:hover {
+  color: #4f5e66;
+  text-decoration: underline;
+}
+#footer-layout strong,
+#footer-layout b {
+  color: #ffffff;
+}
+
+@media (max-width: 768px) {
+  #footer-layout {
+    padding: 2em 2.5em;
+  }
+}
diff --git a/apps/landing/landing.html b/apps/landing/landing.html
index e442429ca..0c61f2ad2 100644
--- a/apps/landing/landing.html
+++ b/apps/landing/landing.html
@@ -8,32 +8,14 @@
         integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
         crossorigin="anonymous">
     <link rel="stylesheet" href="./main.css" />
+    <!-- common styling -->
+	<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
     <link rel="shortcut icon" type="image/x-icon" href="favicon.png">
 
 </head>
 <body>
 
-
-
-<!-- Header -->
-
-<!-- <header id="header" >
-    <nav id= "nav" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="position: sticky;">
-        <button style="display:none;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
-		</button>
-       <ul>
-            <li><a href="landing.html" class="link" style="color: white;">Home</a></li>
-            <li><a href="../table.html"  class="link">Slides</a></li>
-            <li style="float: right;"><a href="/apps/signup/signup.html"  class="link">Signup</a></li>
-            <li style="float: right;"><a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform"  class="link">Feedback</a></li>
-
-        </ul>
-
-    </nav>
-
-</header> -->
-
+    <!-- Header -->
 <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
     <div class="container-fluid">
         <button class="navbar-toggler m-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -109,26 +91,7 @@ <h3>Documentation</h3>
 
 
 <!-- Footer -->
-
-<footer id="footer">
-
-    <div class="content">
-
-        <div class="inner">
-
-
-
-            <section class="about" style="margin-left:0cm">
-
-                U24 CA18092401A1, <b>Tools to Analyze Morphology and Spatially Mapped Molecular Data</b>
-            </section>
-
-
-        </div>
-
-    </div>
-
-</footer>
+<footer id="footer-layout"></footer>
 
 
 
@@ -145,9 +108,10 @@ <h3>Documentation</h3>
 <script src="./skel.min.js"></script>
 
 <script src="./util.js"></script>
+<script src="../../common/util.js"></script>
 
-
-
+    <!-- script to call a footer(layout footer in the common > utils folder) function -->
+<script> insertFooterLayout(); </script>
 </body>
 
 
diff --git a/apps/signup/signup.html b/apps/signup/signup.html
index 10243698a..71d97755f 100644
--- a/apps/signup/signup.html
+++ b/apps/signup/signup.html
@@ -16,6 +16,9 @@
     integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
     crossorigin="anonymous">
 
+  <!-- common stylings-->
+	<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
+
     <link rel='stylesheet' type='text/css' media='all' href='../../css/normalize.css'/>
     <link rel='stylesheet' type='text/css' media='all' href='signup.css'/>
     <link rel='stylesheet' type='text/css' media='all' href='../../css/popup.css'/>
@@ -111,9 +114,8 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
       </form>
       <div class="text-center" onclick="loginPage()">Already have an account? </div>
     </div>
-    <footer class="text-center text-white bg-dark p-3">
-      <p class="p">Copyright © 2021 caMicroscope</p>
-    </footer>
+   
+    <footer id="footer-layout"></footer>
     <!-- popup -->
     <div id="popup-container"></div>
 
@@ -122,5 +124,8 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
             crossorigin="anonymous"></script>
     <script src="../../common/util.js"></script>
 
+    <!-- script to call a footer(layout footer in the common > utils folder) function -->
+  <script> insertFooterLayout();</script>
+
   </body>
 </html>
diff --git a/apps/table.html b/apps/table.html
index 0ad2b8cb1..bc158f4b1 100644
--- a/apps/table.html
+++ b/apps/table.html
@@ -332,13 +332,13 @@ <h5 class="modal-title" id="slideNameChangeModalLabel">Slide name change confirm
 
 </div>
 
-
-<footer class="text-center text-white bg-dark p-3">
-	<p class="p">Copyright © 2021 caMicroscope</p>
-</footer>
+<!-- footer -->
+<footer id="footer-layout"></footer>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
 <script src="./table.js"></script>
+    <!-- script to call a footer(layout footer in the common > utils folder) function -->
+<script> insertFooterLayout();</script>
 </body>
 
 </html>
diff --git a/common/util.js b/common/util.js
index 30cc6473a..6fdb03b3a 100644
--- a/common/util.js
+++ b/common/util.js
@@ -1347,3 +1347,17 @@ async function captureScreen(camic, {
 
   return canvas;
 }
+
+// footer content layout
+const currentYear = new Date().getFullYear();
+
+const footerContent = `
+  <p>U24 CA18092401A1, <b>Tools to Analyze Morphology and Spatially Mapped Molecular Data</b></p>
+  <p id='contact'>Spot a Bug? <a href='https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform' target='_blank'>Send us the feedback!</a></p>
+  <hr />
+  <p class='copyright'>Copyright &copy; ${currentYear} <span class='company-name'><a href="https://camicroscope.org/" target='_blank'>caMicroscope</a></span></p>
+`;
+
+function insertFooterLayout() {
+  document.getElementById('footer-layout').innerHTML = footerContent;
+}
