Merge pull request #252 from topcoder-platform/reskin-or-nav

fix: header footer not sticky
topcoder-platform · Mar 3, 2023 · 27a93b8 · 27a93b8
2 parents 762c053 + 321b74b
commit 27a93b8
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 58 deletions.
diff --git a/web/css/reskin-or/reskin.css b/web/css/reskin-or/reskin.css
@@ -138,12 +138,15 @@ body {
     text-decoration: none !important;
 }
 
+.mainFooter {
+    position: sticky;
+    bottom: calc(-1 * var(--footer-height));
+    z-index: 99;
+}
+
 .mainTabs {
     width: 100%;
     background-color: var(--black-10);
-    position: fixed;
-    top: var(--header-height);
-    z-index: 998;
     font-family: Barlow, sans-serif;
     text-transform: uppercase;
     font-weight: 600;
@@ -182,20 +185,18 @@ body {
 
 .content {
     margin: 0;
-    padding-bottom: 90px;
-    padding-top: 116px;
-    min-height: 100vh;
+    min-height: calc(100vh - var(--header-height) - var(--footer-height) - 56px);
 }
 
 .content--manageProject,
 .content--projectDetails {
-    padding-bottom: 200px;
+    /* padding-bottom: 200px; */
 }
 
 .content--viewSpec,
 .content--viewApproval,
 .content--projectPayment {
-    padding-bottom: 135px;
+    /* padding-bottom: 135px; */
 }
 
 .content__inner {
@@ -829,11 +830,8 @@ table.scorecard td.reviewerResp input {
 }
 
 .cta {
-    position: fixed;
     width: 100%;
     background-color: #fff;
-    bottom: var(--footer-height);
-    z-index: 99;
     box-shadow: 0 0 16px 16px rgb(42 42 42 / 10%);
 }
 
@@ -2572,11 +2570,6 @@ td.resourcesTable__empty {
     height: 74px;
 }
 
-.viewManageButtom {
-    position: absolute;
-    right: 0;
-}
-
 .editProject__checkbox .when {
     margin-left: 8px;
     order: 1;
@@ -2649,18 +2642,11 @@ td.resourcesTable__empty {
 }
 
 #headerNav {
-    position: fixed;
     width: 100%;
-    z-index: 999;
-    top: 0;
 }
 
 #footerNav {
-    position: fixed;
     width: 100%;
-    z-index: 99;
-    bottom: 0;
-    left: 0;
 }
 
 .checkPoint__chevron {
@@ -2758,9 +2744,6 @@ td.resourcesTable__empty {
     height: 35px;
 }
 
-.ctaOpen {
-    bottom: 386px !important;
-}
 .approvalRadioBtn {
     display: flex;
     align-items: flex-start;
@@ -2781,4 +2764,4 @@ td.resourcesTable__empty {
 
 .lateness {
     width: 110px;
-}
+}
diff --git a/web/jsp/viewProjectDetails.jsp b/web/jsp/viewProjectDetails.jsp
@@ -171,39 +171,69 @@
     </div>
 </div>
 
-<div class="cta">
-    <div class="cta__inner">
-        <c:if test="${isAllowedToViewPayments}">
-            <a href="ViewProjectPayments?pid=${project.id}"><or:text key='viewProjectDetails.btnPayments.alt' /></a>
-        </c:if>
-        <c:if test="${requestScope.isAllowedToManageProjects}">
-            <a href="ViewManagementConsole?pid=${project.id}"><or:text key='viewProjectDetails.btnManagementConsoleLink.alt' /></a>
-        </c:if>
-        <c:if test="${isAllowedToEditProjects}">
-            <a href="EditProjectLinks?pid=${project.id}"><or:text key='viewProjectDetails.btnEditLink.alt' /></a>
-        </c:if>
-        <c:if test="${isAllowedToEditProjects}">
-            <a href="EditProject?pid=${project.id}"><or:text key='viewProjectDetails.btnEdit.alt' /></a>
-        </c:if>
+<div class="mainFooter">
+    <div class="cta">
+        <div class="cta__inner">
+            <c:if test="${isAllowedToViewPayments}">
+                <a href="ViewProjectPayments?pid=${project.id}"><or:text key='viewProjectDetails.btnPayments.alt' /></a>
+            </c:if>
+            <c:if test="${requestScope.isAllowedToManageProjects}">
+                <a href="ViewManagementConsole?pid=${project.id}"><or:text key='viewProjectDetails.btnManagementConsoleLink.alt' /></a>
+            </c:if>
+            <c:if test="${isAllowedToEditProjects}">
+                <a href="EditProjectLinks?pid=${project.id}"><or:text key='viewProjectDetails.btnEditLink.alt' /></a>
+            </c:if>
+            <c:if test="${isAllowedToEditProjects}">
+                <a href="EditProject?pid=${project.id}"><or:text key='viewProjectDetails.btnEdit.alt' /></a>
+            </c:if>
+        </div>
     </div>
+    <jsp:include page="/includes/inc_footer_reskin.jsp" />
 </div>
 
-<jsp:include page="/includes/inc_footer_reskin.jsp" />
 <script type="text/javascript">
-  window.onload = () => {
-  var footerDetails = document.getElementById("footerNav").childNodes[0];
-  if (document.getElementById("footerNav")) {
-    var footerHeight = document.getElementById("footerNav").clientHeight;
-  }
-  var cta = document.querySelector(".cta")
-  if (footerHeight) {
-    cta.style.bottom = (footerHeight) + 'px';
-  }
-  footerDetails.children[0].addEventListener("click", function(){
-    if (cta) {
-        cta.classList.toggle("ctaOpen")
+window.onload = function () {
+  var root = document.querySelector(':root')
+
+  var footerMain = document.getElementsByClassName('mainFooter')[0];
+  var footerNav = document.querySelector("#footerNav");
+
+  var intervalId = setInterval(function () {
+    var footerDetails = footerNav.childNodes[0];
+    if (footerDetails) {
+        var toggleBar = footerDetails.childNodes[0];
+        toggleBar.addEventListener("click", function() {
+            root.style.setProperty('--footer-height', footerNav.clientHeight + 'px');
+        })
+        clearInterval(intervalId);
     }
-  })
+  }, 1000)
+}
+
+window.onresize = function () {
+  var root = document.querySelector(':root')
+
+  var footerMain = document.getElementsByClassName('mainFooter')[0];
+  var footerNav = document.getElementById("footerNav");
+  var footerDetails = footerNav.childNodes[0];
+
+  root.style.setProperty('--footer-height', footerNav.clientHeight + 'px');
+}
+
+window.onscroll = function () {
+  var html = document.querySelector('html')
+
+  var cta = document.querySelector('.cta')
+  var footer = document.querySelector('#footerNav');
+
+  var rect = footer.getBoundingClientRect();
+  var footerVisible = rect.top < (window.innerHeight || document.documentElement.clientHeight)
+
+  if (footerVisible) {
+    cta.style.boxShadow = 'none';
+  } else {
+    cta.style.boxShadow = '';
+  }
 }
 
 </script>

diff --git a/web/jsp/viewProjectManagementConsole.jsp b/web/jsp/viewProjectManagementConsole.jsp
@@ -284,7 +284,7 @@
                                 </td>
                                 </tr>
                                 </table>
-                                <div class="saveChanges__button viewManageButtom">
+                                <div class="saveChanges__button">
                                     <button id="saveChanges" form="ManageProject" value="Submit" class="saveChanges__save"><or:text key='btnSaveChanges.alt' /></button>
                                     <a href="<or:url value='/actions/ViewProjectDetails?pid=${project.id}' />" class="saveChanges__cancel"><or:text key='btnCancel.alt' /></a>
                                 </div>
@@ -874,7 +874,7 @@
                                                         </tbody>
                                                     </table>
                                                 </div>
-                                                <div class="saveChanges__button viewManageButtom">
+                                                <div class="saveChanges__button">
                                                     <button id="reviewSaveBtn" form="SaveReviewPayments" value="Submit" class="saveChanges__save"><or:text key='btnSaveChanges.alt' /></button>
                                                     <a href="<or:url value='/actions/ViewProjectDetails?pid=${project.id}' />" class="saveChanges__cancel"><or:text key='btnCancel.alt' /></a>
                                                 </div>
@@ -887,6 +887,7 @@
                     </div><!-- //tabconentcontainer -->
                 </div>
             </div>
+        </div>
     </div>
     <jsp:include page="/includes/inc_footer_reskin.jsp" />
     </body>

diff --git a/web/jsp/viewProjectPayments.jsp b/web/jsp/viewProjectPayments.jsp
@@ -143,7 +143,7 @@
                         </div>
                     </div>
                 </div>
-                <div align="right" style="margin-top: 56px;">
+                <div align="right" style="margin-top: 56px; margin-bottom: 32px;">
                     <c:if test="${isAllowedToEditPayments}">
                         <a class="editPaymentBtn" href="EditProjectPayments?pid=${project.id}"><or:text key='projectPayments.btnEditPayments.alt' /></a>
                     </c:if>