Merge pull request #73613 from aireilly/add-footer-transition

OCPBUGS-17161 - hide footer after a few seconds

Author: aireilly

_templates/_page_openshift.html.erb

@@ -20,7 +20,7 @@
   <link href="https://assets.openshift.net/content/subdomain/touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" type="image/png"/>
   <link href="https://assets.openshift.net/content/subdomain/favicon32x32.png" rel="shortcut icon" type="text/css"/>
   <link href="https://assets.openshift.net/content/osh-nav-footer.css" rel="stylesheet" type="text/css" media="screen"/>
-  <link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/docs.css" rel="stylesheet"  media="screen"/>
+  <link href="https://file.emea.redhat.com/aireilly/add-footer-transition/_stylesheets/docs.css" rel="stylesheet"  media="screen"/>
   <link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
   <!--[if IE]><link rel="shortcut icon" href="https://assets.openshift.net/content/subdomain/favicon.ico"><![endif]-->
   <!-- or, set /favicon.ico for IE10 win -->
@@ -718,64 +718,6 @@
       })
   </script>
 
-  <!--adjust sidebar and toc when footer is displayed -->
-  <script type="text/javascript">
-    sidebar = document.querySelector('.sidebar')
-    toc = document.querySelector('#toc')
-    main = document.querySelector('.main')
-    okd_footer = document.querySelector('.footer-origin-docs')
-
-    //handle short pages
-    if (window.innerHeight === document.documentElement.scrollHeight) {
-      //sidebar
-      if (sidebar !== null && okd_footer == null) {
-        sidebar.style.marginBottom = "38px";
-        main.style.marginBottom = "35px";
-      };
-      //okd sidebar
-      if(sidebar !== null && okd_footer !== null) {
-        sidebar.style.marginBottom = "176px";
-        main.style.marginBottom = "135px";
-      }
-    };
-
-    //handle scrolling pages
-    document.addEventListener('scroll', () => {
-      //scroll to bottom
-      if ($(window).width() >= 1008) {
-        if(sidebar !== null) {
-          //pages with multiple toc entries
-          if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
-              //sidebar
-              if (sidebar !== null && okd_footer == null){
-                sidebar.style.marginBottom = "38px";
-                main.style.marginBottom = "35px";
-              };
-              //toc
-              if (toc !== null && okd_footer == null){
-                toc.style.bottom = "35px";
-              };
-              //okd sidebar
-              if(sidebar !== null && okd_footer !== null) {
-                sidebar.style.marginBottom = "176px";
-                main.style.marginBottom = "135px";
-              };
-              //okd toc
-              if (toc !== null && okd_footer !== null){
-                toc.style.bottom = "175px";
-              };
-            };
-          if(document.documentElement.scrollHeight != window.pageYOffset + window.innerHeight) {
-            sidebar.style.marginBottom = "0px";
-            if (toc !== null) {
-              toc.style.bottom = "0px";
-            }
-          }
-        }
-      }
-    })
-  </script>
-
   <!-- adjust alerts on mobile -->
   <script type="text/javascript">
     alert = document.querySelector('#support-alert')
@@ -804,5 +746,19 @@
     })
   </script>
 
+  <!-- hide footer after 3 seconds -->
+  <script type="text/javascript">
+    const hideFooter = () => {
+        document.querySelector('footer#rh').style.display = "none";
+      };
+
+    window.addEventListener('scroll', function() {
+      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+        setTimeout(hideFooter, 3000);
+      } else {
+        document.querySelector('footer#rh').style.display = "block";
+      }
+    })
+  </script>
 </body>
 </html>